How to use 'font-display' descriptor for a website that uses Google Fonts.
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
Use Google Webfonts Helper to generate a cross-browser compatible CSS file as detailed below:
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.