Feature detection for font-display?

[superpoincare]

Hi Bram,

Is there any feature detection test for font-display?

If there is one can do this for old browsers:

if(!fontdisplaysupport) { //run fontfaceobserver }

CSS.supports() doesn't work as it's supposed to test properties not descriptors and font-display is a descriptor not a property, according to discussions here:

https://bugs.chromium.org/p/chromium/issues/detail?id=600137

[bramstein]

I'm not aware of any feature detection for font-display, but that would be some interesting research.

[zachleat]

I added a comment there, I think the descriptor should be exposed on FontFace and then we can feature test off of that.

[bramstein]

This seems to do the trick on browsers that support font-display:

document.documentElement.style.fontDisplay !== undefined

Not sure how reliable it is until other browsers implement font-display.

[superpoincare]

Firefox (checked using Nightly) now has font-display. It's not enabled by default and can be enabled from about:config.

I tested

document.documentElement.style.fontDisplay !== undefined

from the console and it gives false. So it seems like it's Chrome/Opera specific.

Maybe the solution is to write a code by inserting a span and with font-display: swap in css and checking its dimensions?

[superpoincare]

Update.

A Firefox developer provided me with a feature detection test:

https://jsfiddle.net/p7g8y7du/

Reference:

https://bugzilla.mozilla.org/show_bug.cgi?id=1296373

Tested it on Chrome/Canary, Firefox, Opera (with the feature enabled in settings) and it works.

[crstauf]

@vijayaraghavanramanan I'm running Chrome 52, and the Fiddle prints "not supported": https://cloudup.com/cluEu78cpOi

[crstauf]

@vijayaraghavanramanan also in Canary: https://cloudup.com/c7XeBJvFIAh

[crstauf]

ahhh my mistake; wasn't aware that a flag had to be enabled: chrome://flags/#enable-experimental-web-platform-features (via https://developers.google.com/web/updates/2016/02/font-display?hl=en)

[tibor]

@vijayaraghavanramanan
Can you post an example of your code? I tried to add fontfaceobserver via document.createElement and onload to the document when font-display isn’t supported, but my onload block isn’t working.

[superpoincare]

@tibor

Sorry didn't understand your question. Why createElement when font-display not supported? You can do something like:

`if(isFontDisplaySupported) {
document.documentElement.className += " fonts-loaded";
} else {
// existing javascript code
}

`

[tibor]

@vijayaraghavanramanan I’d like to load the fontfaceobserver.js just when it is really needed – when font-display isn’t supported. That’s why I’m trying to add it not like this:

<script src="fontfaceobserver.js"></script>

but to add it dynamically to the DOM when font-display isn’t supported:

<script>
var fontfacejs = document.createElement('script');
fontfacejs.setAttribute('type', 'text/javascript');
fontfacejs.setAttribute('src', 'fontfaceobserver.js');
document.documentElement.firstChild.appendChild(fontfacejs);

fontfacejs.onload = function(){
    var SSPr = new FontFaceObserver('SourceSansPro', {weight: 400, style: 'normal'});
    SSPr.load().then(function () {
        htmlClass.add('SSPr');
    });
}
</script>

but somehow fontfacejs.onload doesn’t seem to work.

[superpoincare]

Not sure, I tried your code but firstChild seems to have an issue. Did you look at the error log in the console? If I don't have firstChild it seems okay.

Anyway good idea of making fontfaceobbserver external.

[adamrights]

Hey,

For anyone linked here from the "Font Display for the Masses" article looking for a correct feature detection for font-display (the one posted works for Firefox, but returns "Not Supported"/false incorrectly for Chrome — use this. It's what we're using for article pages at WSJ:

try{var e=document.createElement("style");e.textContent="@font-face { font-display: fallback; }",document.documentElement.appendChild(e),window.isFontDisplaySupported="font-display"===e.sheet.cssRules[0].style[0],e.remove()}catch(e){}

isFontDisplaySupported will come back true in Firefox and Chrome.

[bramstein]

I've been using this:

if (FontFace && FontFace.prototype.hasOwnProperty('display')) {
  // Browser supports font-display.
}

Which seems to work in both Chrome and Firefox.

[superpoincare]

@adamrights

That was what my comment #62 (comment) was

[superpoincare]

Hi Bram,

Should add window. in the test, else it might give an error on IE 11 (and maybe other browsers too):

if (window.FontFace && window.FontFace.prototype.hasOwnProperty('display')) {
 // Browser supports font-display.
}

[brandonthomas]

@bramstein that doesn't work in Edge (Edge pukes at the fact that FontFace doesn't exist even though that's the whole point of checking it there).

https://jsfiddle.net/doxnq9ce/20/

This worked for me across browsers.

[brandonthomas]

@vijayaraghavanramanan beat me to it cause I was silly by not reading the whole thread. In any case, both work. His seems like a better solution.