Use font-display for Google Fonts


How to use 'font-display' descriptor for a website that uses Google Fonts.

Last Updated : June 26, 2020

Approach #1 above is easier to implement but is less performant than approach #2. However, it gets you the tick on your Lighthouse / PageSpeed audits (if that is what you are looking for). Approach #2 performs better but requires careful implementation for reliably serving fonts.

Approach 1 : Use "&display=swap" URL parameter:

Add the "&display=swap" URL parameter to your Google fonts CSS request as highlighted in bold in the example below:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap" rel="stylesheet" >

No other changes shall be required in your code base for this to work.

Approach 2 : Self host Google font-files:

When using Google fonts, the CSS containing @font-face rule(s) is hosted by Google (like this) and you cannot alter the content of this file. Also, you should not just copy the contents of Google’s fonts css to a self-hosted CSS since Google generates different CSS files for different browsers.

So, the recommended approach to go about this is:

  • Generate a cross-browser compatible Fonts CSS
  • Add ‘font-display’ descriptor to the generated Fonts CSS
  • Download the font files for self-hosting
  • Self-host the generated CSS and font files

Generate a Cross-Browser Compatible Fonts CSS

Use Google Webfonts Helper to generate a cross-browser compatible CSS file as detailed below:

  • Select Google fonts and their styles specific to your website
  • Copy the generated CSS (containing @font-face rules)
  • Download the fonts zip file

Add ‘font-display’ Descriptor

You can now add ‘font-display’ to @font-face rules of the copied CSS. While you may chose the right font-display value based on your requirements, we have found that the value ‘swap’ fits most requrements.

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/lato-v14-latin-100.eot");
  src: local("Lato Hairline"), local("Lato-Hairline"),
       url("../fonts/lato-v14-latin-100.eot?#iefix") format("embedded-opentype"),
       url("../fonts/lato-v14-latin-100.woff2") format("woff2"),
       url("../fonts/lato-v14-latin-100.woff") format("woff"),
       url("../fonts/lato-v14-latin-100.ttf") format("truetype"),
       url("../fonts/lato-v14-latin-100.svg#Lato") format("svg");
  font-display: "swap";
}

Self-host Generated CSS and Fonts

You may want to modify the ‘./fonts/’ path within the generated CSS to a location where font files are actually hosted. Other than that, you just need to host the generated CSS (either as a separate CSS file or as part of existing CSS file) and font files onto your server.


Didn't find what you are looking for?


Just email your query or suggestion to punit@tezify.com and we shall do the needful.

Contact Us Image

Also Read:
How to Accurately Measure Your PageSpeed Score
Well, can’t we just go to PageSpeed Insights or web.dev measure, slap our dear URL and know the scores? Unfortunately, the answer is ‘No’. Read on to know (..continue reading)



ABOUT THE AUTHOR
Punit Sethi has been working with large e-Commerce & B2C websites on improving their Site Speed & Scalability. He frequently tweets here.
Punit Sethi