Chrome font-display CSS property

Question

I've been testing out font-display recently, however my Chrome browser (Chrome 65) at both work (Centos 7) and home (Windows 10) doesn't seem to recognize it as a valid property. Looking in DevTools, the property has the yellow exclamation mark next to it, saying "Unknown Property Name".

It was my understanding that font-display has been supported in Chrome since version 63.

For reference, I'm trying to set the value of font-display to swap.

Anyone have any ideas why I'm not seeing it work?

Thanks

Answer 1

font-display is a property only on @font-face rules, not standard elements. See @font-face examples on MDN.

Answer 2

The font-display descriptor should be used with the @font-face rule as in the following example:

@font-face {
  font-family: 'Arvo';
  font-display: swap;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Documentation on this is here