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.

About the Author

Punit Sethi has been working with large e-Commerce & B2C websites on improving their site speed, scalability and frontend architecture. He tweets on these topics here.