Use font-display for Google Fonts


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





[Update, June 2019] : This how-to has been updated to leverage Google Fonts’ new URL parameter.

Introduction

There are two ways to achieve this:

  1. Use "&display=swap" URL parameter with Google fonts request.
  2. Self host Google font-files.

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 let us know what you are looking for & we'll add it to the article soon: