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
superpoincare opened this issue Apr 12, 2016 · 18 comments
Closed

Feature detection for font-display? #62

superpoincare opened this issue Apr 12, 2016 · 18 comments

Comments

@superpoincare
Copy link

@superpoincare superpoincare 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
Copy link
Owner

@bramstein bramstein commented Apr 13, 2016

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

@zachleat
Copy link

@zachleat zachleat 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
Copy link
Owner

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

@superpoincare
Copy link
Author

@superpoincare superpoincare 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?

@superpoincare
Copy link
Author

@superpoincare superpoincare 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
Copy link

@crstauf crstauf commented Aug 20, 2016

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

@crstauf
Copy link

@crstauf crstauf commented Aug 21, 2016

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

@crstauf
Copy link

@crstauf crstauf 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
Copy link

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

@superpoincare
Copy link
Author

@superpoincare superpoincare 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
Copy link

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

@superpoincare
Copy link
Author

@superpoincare superpoincare 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
Copy link

@adamrights adamrights 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
Copy link
Owner

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

@superpoincare
Copy link
Author

@superpoincare superpoincare commented Apr 22, 2018

@adamrights

That was what my comment #62 (comment) was

@superpoincare
Copy link
Author

@superpoincare superpoincare 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
Copy link

@brandonthomas brandonthomas 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
Copy link

@brandonthomas brandonthomas 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
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants