No way to specify font-display on @font-face

[chillitom]

Chrome's Lighthouse suggests setting the font-display CSS property to deal with the trade offs between FOUT/FOIT and missing content and links to the following article: https://developers.google.com/web/updates/2016/02/font-display

Unfortunately there doesn't appear to be a way to pass this configuration to webfontloader which I believe is responsible for assigning the @font-face definitions.

[raRaRa]

+1. Shouldn't be that hard to add as opt-in, or even make it default with opt-out config?

[swissspidy]

I found myself in the same position and decided I'll host the webfont CSS myself for now.

I wrote a small script that downloads the webfont CSS from Typekit and adds font-display automatically, in case it is helpful for anyone: https://github.com/swissspidy/local-webfont

[superp]

+1

[vguenichon]

+1

[gilbertlucas41]

+1

[gagikm]

+1

[waters01]

+1

[polarathene]

Please stop adding "+1" responses, they're not useful in anyway and just clog up the issue thread with noise.

Instead 👍 the issue up top like many others are doing. Thanks.

[addyosmani]

I'm not sure about TypeKit, but we are shipping font-display support to Google Fonts soon which will hopefully avoid needing extra steps to locally host. This could be passed through configuration to webfontloader the same way the font-family currently is.

[mmalferov]

Google already understands the 'display' parameter. Is there any hope that this option will be available in WFL?

https://fonts.googleapis.com/css?family=Roboto:400,700%7CRoboto+Condensed:400,700&subset=latin,cyrillic&display=swap

[steveooo9]

Is there a way to set the new &display=swap parameter for Google Fonts in Webfontloader?

[ckpicker]

I'm not sure about TypeKit, but we are shipping font-display support to Google Fonts soon which will hopefully avoid needing extra steps to locally host. This could be passed through configuration to webfontloader the same way the font-family currently is.

@addyosmani Can you give an example of how this might be done using webfontloader?

[Cinamonas]

As a temporary solution, instead of google module, I’m using custom to specify the font:

WebFont.load({
  custom: {
    families: [
      'Roboto:n4,n7',
    ],
    urls: [
      'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
    ],
  },
});

[SamXronn]

Looks like Google Fonts and other third parties are starting to support this no news from Typekit disappointing.

[rawksteady]

Similar to @Cinamonas example above, I've noticed you can also get away with doing the following:

WebFont.load({
  google: {
    families: [
      'Roboto:400,400i,700,700i&display=swap'
    ]
  }
});

Though I must admit it feels pretty hacky.

Update: This seems to have some issues with multiple font families, see @tzjoke answer below.