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

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.

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

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

+1

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.

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.

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

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

@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.

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

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',
    ],
  },
});

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

@Cinamonas

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.

@rawksteady

@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

@tzjoke

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

@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.

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

@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.

Any update on this? Thanks

+1

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.

@taverasmisael

@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;
}

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!

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

raRaRa commented on Jan 3, 2019

swissspidy commented on Jan 3, 2019

superp commented on Feb 4, 2019

vguenichon commented on Mar 29, 2019

gilbertlucas41 commented on Mar 31, 2019

gagikm commented on Apr 11, 2019

waters01 commented on Apr 12, 2019

polarathene commented on Apr 16, 2019

addyosmani commented on May 11, 2019

mmalferov commented on May 14, 2019

steveooo9 commented on May 15, 2019

ckpicker commented on May 15, 2019

Cinamonas commented on May 15, 2019

SamXronn commented on May 16, 2019

rawksteady commented on May 21, 2019

tzjoke commented on May 22, 2019

rawksteady commented on May 23, 2019

EmielZuurbier commented on Jun 12, 2019

MrPropre commented on Jun 13, 2019

EmielZuurbier commented on Jun 26, 2019

Szymon-dziewonski commented on Aug 12, 2019

mylesthedev commented on Sep 6, 2019

taverasmisael commented on Sep 8, 2019

mtx-z commented on Sep 30, 2019

storm-sec commented on Feb 15, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions