ToolKit offers users the ability to Optimize Google Fonts, Enable Fallback Fonts, and Preload Fonts.
Optimize Google Fonts
Enabling this will locally host and combine your Google Fonts when possible. This can help solve common recommendations like “Add Expires Headers” as well as others for Google fonts.
Locally hosting Google Fonts will work if they’re referenced directly in the HTML. Google Ads and some 3rd party scripts may load Google Fonts asynchronously. If Google Fonts are loaded asynchronously, they may not be included in this optimization.
When viewing your waterfall report, click on “Fonts” or search for “fonts.googleapis.com”. Fonts that show up can be optimized.
Enable Fallback Fonts
When using external fonts such as Google Fonts, browsers won’t display the text to visitors until those fonts are fully downloaded and ready.
This creates an phenomena known as the Flash of Invisible Text or FOIT.
Google PageSpeed Insights will flag FOIT issues with the warning “Ensure text remains visible during webfont load”.
ToolKit attempts to solve this by instructing the browser to display a fallback font (normally the visitors’ default system font) until your external fonts are ready to display.
We accomplish this by adding the `font-display: swap` attribute inside the appropriate CSS rule for the font.
Preloading Fonts for Faster Load Times
Our Preload Fonts function helps improve load times by instructing the browser to start downloading fonts that it otherwise wouldn’t discover until later in the parsing process. This is normally due to fonts being referenced within a CSS file.
Google PageSpeed Insights will point out any fonts that could benefit from this optimization under the Opportunity, Preload Key Requests. Be careful of preloading too many files though as this could actually cause your site’s performance to suffer.
We recommend minimizing the number of font variants and using System Fonts wherever possible to reduce the number of font requests and files that need to be downloaded. Then, preload the fonts located Above the Fold.