should be defined when font-display is available




DOM: CSS Object Model
a year ago
a year ago


(Reporter: Ramanan, Unassigned)


48 Branch

Firefox Tracking Flags

(Not tracked)




a year ago
User Agent: Mozilla/5.0 (Windows NT 6.2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce:

enabled font-display in about:config

type !=undefined in console. 

Actual results:

Evaluates to false. 

Expected results:

Should evaluate to true.
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
Product: Firefox → Core
See Also: → bug 1157064
Component: CSS Parsing and Computation → DOM: CSS Object Model
Hey John, any ideas?
Flags: needinfo?(jd.bugzilla)
Since font-display is an @font-face descriptor, and not a property, it shouldn't appear on

Comment 3

a year ago

That's a valid point if you are using CSS supports. However, using javascript I should be able to set font-display to swap. Such as = "swap".

Hence I should be able to evaluate ! = undefined

The above works in Chrome Canary i.e., evaluates to true. 

It should be great for font-display feature detection.
Hi Ramanan.  It is really a bug that Chrome exposes @font-face descriptors on CSSStyleDeclaration objects like "unicode-range", "src" and "font-display" on, since these are not properties.  This is the section of CSSOM that defines what properties are exposed on

It talks about doing this for all "supported CSS properties":

and descriptors aren't properties.

While in Chrome is a JS property that exists, it always returns "", and assigning to it won't affect the style of the element.

The CSS Fonts spec says that descriptors are exposed on CSSFontFaceRule objects like this:

but neither Firefox nor Chrome implement this.

I think font-display is still defined by this unofficial spec:

which should really extend that CSSFontFaceRule definition with an accessor for fontDisplay, but it doesn't yet.

If that happened, you would be able to write:

  "font-display" in CSSFontFaceRule.prototype

but we're not there yet. :-)

So currently, the easiest, cross-browser way I can see to feature detect this is to create a style sheet with an @font-face rule that sets font-display, and to check the serialization to see if it is there.  Something like this:

  var e = document.createElement("style");
  e.textContent = "@font-face { font-display: swap; }";
  var isFontDisplaySupported =
    e.sheet.cssText.indexOf("font-display") != -1;

That's pretty awkward, but I can't think of anything shorter that works today, I'm afraid.

Comment 5

a year ago
Thanks James. That makes a lot of sense. 

Out of curiosity ...  Your code in the last few lines doesn't seem to work in either Canary or Firefox with font-display enabled. 

It throws an error:,js,console,output

Thanks again.
Sorry, try this one instead:

Comment 7

a year ago
Last Resolved: a year ago
Flags: needinfo?(jd.bugzilla)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.