Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature detection for font-display?

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:18 (3 by maintainers)

Top GitHub Comments

3reactions

superpoincarecommented, 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.

2reactions

superpoincarecommented, 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.
}

Top Results From Across the Web

`font-display` for the Masses - CSS-Tricks

Hi Jeremy,. That font-display feature detection may not work. It works in Chrome (when enabled) but it shouldn't be. It doesn't work in...

OpenType font features guide - CSS: Cascading Style Sheets

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties ......

@font-face feature detection - Paul Irish

This test works great in FF2+, Safari and Opera. But it fails in IE (bug surprise) and Chrome gives a false positive. The...

CSS font-display: The Future of Font Rendering on the Web

Giulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load.

Seeing your installed fonts - Wordmark - Helps you choose fonts!

But for it to be truly useful, it also needs to show the fonts you have installed yourself. With the new Local Font...