Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature detection for font-display? #62

Closed
vijayaraghavanramanan opened this Issue Apr 12, 2016 · 18 comments

Comments

Projects
None yet
7 participants
@vijayaraghavanramanan
Copy link

commented Apr 12, 2016

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

This comment has been minimized.

Copy link
Owner

commented Apr 13, 2016

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

@zachleat

This comment has been minimized.

Copy link

commented Apr 21, 2016

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 comment has been minimized.

Copy link
Owner

commented May 12, 2016

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.

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Jul 24, 2016

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?

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Aug 19, 2016

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

This comment has been minimized.

Copy link

commented Aug 20, 2016

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

@crstauf

This comment has been minimized.

Copy link

commented Aug 21, 2016

@crstauf

This comment has been minimized.

Copy link

commented Aug 21, 2016

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

This comment has been minimized.

Copy link

commented Aug 27, 2016

@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.

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Aug 27, 2016

@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

This comment has been minimized.

Copy link

commented Aug 27, 2016

@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.

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Aug 30, 2016

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.

@bramstein bramstein closed this Mar 10, 2017

@adamrights

This comment has been minimized.

Copy link

commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Owner

commented Apr 21, 2018

I've been using this:

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

Which seems to work in both Chrome and Firefox.

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Apr 22, 2018

@adamrights

That was what my comment #62 (comment) was

@vijayaraghavanramanan

This comment has been minimized.

Copy link
Author

commented Jun 19, 2018

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

This comment has been minimized.

Copy link

commented Aug 14, 2018

@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

This comment has been minimized.

Copy link

commented Aug 14, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.