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

Question

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

chillitom opened this issue 6 years ago · comments

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.

Pavlo Haleta commented 5 years ago

+1

Valentin GUENICHON commented 5 years ago

+1

gilbertlucas41 commented 5 years ago

+1

Gagik Movsisyan commented 5 years ago

+1

waters01 commented 5 years ago

+1

Myles commented 5 years ago

+1

Jón Trausti · Answer 1 · Fri Jan 04 2019 03:20:12 GMT+0800 (China Standard Time)

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

Pascal Birchler · Answer 2 · Fri Jan 04 2019 04:12:01 GMT+0800 (China Standard Time)

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

Brennan Kinney · Answer 3 · Tue Apr 16 2019 14:43:48 GMT+0800 (China Standard Time)

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.

Addy Osmani · Answer 4 · Sun May 12 2019 00:28:50 GMT+0800 (China Standard Time)

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.

Mikhail Alferov · Answer 5 · Tue May 14 2019 23:10:34 GMT+0800 (China Standard Time)

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 · Answer 6 · Wed May 15 2019 16:39:50 GMT+0800 (China Standard Time)

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

Casey Picker · Answer 7 · Thu May 16 2019 00:25:36 GMT+0800 (China Standard Time)

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?

Aleksandras Nelkinas · Answer 8 · Thu May 16 2019 05:33:18 GMT+0800 (China Standard Time)

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 · Answer 9 · Thu May 16 2019 18:32:02 GMT+0800 (China Standard Time)

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

Dennis Andersson · Answer 10 · Tue May 21 2019 21:07:17 GMT+0800 (China Standard Time)

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.

Terence · Answer 11 · Wed May 22 2019 18:00:02 GMT+0800 (China Standard Time)

@rawksteady It seems that your approach does not support multi fonts while @Cinamonas 's one does.

Update: @rawksteady Oh my bad, it does work.

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

But this case does not work:

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

From Network tab:

https://fonts.googleapis.com/css?family=Lato:300,300i,400|Roboto&subset=400,400i,500&display=swap

Dennis Andersson · Answer 12 · Thu May 23 2019 15:01:26 GMT+0800 (China Standard Time)

@tzjoke Gotcha! Like I said, felt pretty hacky.

Deleted user · Answer 13 · Mon Jun 10 2019 03:56:27 GMT+0800 (China Standard Time)

Workarounds proposed by @Cinamonas & @tzjoke does not work as it renders wrong body-class list (sticking all class names to each other without spaces)

EmielZuurbier · Answer 14 · Wed Jun 12 2019 17:22:42 GMT+0800 (China Standard Time)

@pmpr-ir
I found that by separating the families in the array does work and does not render the body-class wrong. It does not work when adding &display=swap or any other value behind the first two families. It only works when adding it to the last item in the array.

WebFont.load({
  google:{
      families:[
          'Arimo:400,400i,700',
          'Didact+Gothic',
          'Playfair+Display:400,400i,700&display=swap'
      ]
});

This resolves to the URL below:
https://fonts.googleapis.com/css?family=Arimo:400,400i,700%7CDidact+Gothic%7CPlayfair+Display:400,400i,700&display=swap

Would prefer a built in setting or property to specify the font-display value per loaded font.

MrPropre · Answer 15 · Thu Jun 13 2019 20:34:45 GMT+0800 (China Standard Time)

&display=swap hack doesn't work on Edge browser.

Deleted user · Answer 16 · Sat Jun 15 2019 18:23:21 GMT+0800 (China Standard Time)

@EmielZuurbier What if you have different font-display spec for separate fonts? Consider:

WebFont.load({
  google:{
      families:[
          'Harmattan&display=swap',
          'Lalezar&display=swap',
          'Material+Icons&display=block'
      ]
});

Everybody, please vote on this pull request

EmielZuurbier · Answer 17 · Thu Jun 27 2019 04:54:41 GMT+0800 (China Standard Time)

@pmpr-ir That too would be a feature that is very welcome. Maybe a syntax like the following would be a nice way to write it down?

WebFont.load({
  google:{
      families:[
         {
            family: 'Arimo',
            styles: ['400', '400i', '700'],
            display: 'swap'
         },
         {
            family: 'Playfair+Display',
            styles: ['400', '400i', '700'],
            display: 'block'
         }
      ]
   }
});

Or maybe:

WebFont.load({
  google:{
      families:[
         {
            'Arimo': {
               styles: ['400', '400i', '700'],
               display: 'swap'
            }
         },
         {
            'Playfair+Display': {
               styles: ['400', '400i', '700'],
               display: 'block'
            }
         }
      ]
   }
});

Both would provide a way to be more explicit when requesting the fonts with their associated styles and the desired display value. Although I can see how this could be a compatibility issue with previous implementations of the WebFont loader.
What are your thoughts on this?

I have upvoted your referenced pull request!

Edit: I just realized that both examples would result in two separate requests. How silly of me.

Szymon Dziewoński · Answer 18 · Mon Aug 12 2019 21:10:28 GMT+0800 (China Standard Time)

Any update on this? Thanks

Misael Taveras · Answer 19 · Mon Sep 09 2019 06:38:33 GMT+0800 (China Standard Time)

I've made it work with the following config:

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

The trick, at least for me is to put the &display=swap ONLY on the last font.

Mtx Z · Answer 20 · Mon Sep 30 2019 10:12:51 GMT+0800 (China Standard Time)

@taverasmisael is correct.

This config:

WebFontConfig = {
        google: {
            families: 
                [
                    'Hind:400,600:latin-ext', 
                    'Ubuntu:700:latin-ext&display=swap'
                ]}
    };

Generates a CSS get to:

https://fonts.googleapis.com/css?family=Hind:400,600%7CUbuntu:700&subset=latin-ext,latin-ext&display=swap

So the URL is clearly built from the parameters.
(Before, I was using to get the same result <link href="https://fonts.googleapis.com/css?family=Hind:400,600,700|Ubuntu:700&subset=latin-ext&display=swap" rel="stylesheet">).

CSS file have the font-display:swap; for both.

https://fonts.googleapis.com/css?family=Hind:400,600%7CUbuntu:700&subset=latin-ext,latin-ext&display=swap:

/* devanagari */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGh4BCOz.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGd4BCOz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Hind Regular'), local('Hind-Regular'), url(https://fonts.gstatic.com/s/hind/v10/5aU69_a8oxmIdGl4BA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcER2SjQpf.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcERKSjQpf.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Hind SemiBold'), local('Hind-SemiBold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfLZcERySjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdER2SjQpf.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdERKSjQpf.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Hind Bold'), local('Hind-Bold'), url(https://fonts.gstatic.com/s/hind/v10/5aU19_a8oxmIfNJdERySjQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Heiko Frenzel · Answer 21 · Sat Feb 15 2020 12:51:40 GMT+0800 (China Standard Time)

Hi there,
it is possible to fix webfont.js directly. For example, you can use dynamic integration (generated code for multiple fonts) without problems. Check this out: https://heiko-frenzel.de/fix-web-font-loader-pagespeed-insights-15782/

Cheers!