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
Comments
I'm not aware of any feature detection for font-display, but that would be some interesting research. |
I added a comment there, I think the descriptor should be exposed on |
This seems to do the trick on browsers that support font-display:
Not sure how reliable it is until other browsers implement font-display. |
Firefox (checked using Nightly) now has font-display. It's not enabled by default and can be enabled from about:config. I tested
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? |
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. |
@vijayaraghavanramanan I'm running Chrome 52, and the Fiddle prints "not supported": https://cloudup.com/cluEu78cpOi |
@vijayaraghavanramanan also in Canary: https://cloudup.com/c7XeBJvFIAh |
ahhh my mistake; wasn't aware that a flag had to be enabled: |
@vijayaraghavanramanan |
Sorry didn't understand your question. Why createElement when font-display not supported? You can do something like: `if(isFontDisplaySupported) { ` |
@vijayaraghavanramanan I’d like to load the fontfaceobserver.js just when it is really needed – when
but to add it dynamically to the DOM when
but somehow |
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. |
Hey, For anyone linked here from the "Font Display for the Masses" article looking for a correct feature detection for
|
I've been using this: if (FontFace && FontFace.prototype.hasOwnProperty('display')) {
// Browser supports font-display.
} Which seems to work in both Chrome and Firefox. |
That was what my comment #62 (comment) was |
Hi Bram, Should add
|
@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. |
@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. |
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
The text was updated successfully, but these errors were encountered: