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:

Issue Analytics

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

github_iconTop GitHub Comments

superpoincarecommented, Aug 19, 2016


A Firefox developer provided me with a feature detection test:


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

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.
Read more comments on GitHub >

github_iconTop 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...
Read more >
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 ......
Read more >
@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...
Read more >
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.
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found