If you ran your website through PageSpeed Insights, you may see a recommendation to ensure text remains visible during webfont load.
This is caused by FOIT (flash of invisible text) and happens when the browser waits for a font to download. A simple edit in your font’s CSS (or a plugin) can fix FOIT by using font-display: swap.
By applying font-display: swap, you’re telling the browser to use the fallback font until the custom font is ready (to prevent invisible text), then to “swap” to the fallback font with the custom font. So instead of being invisible, this ensures text remains visible during webfont load.
1. What Is FOIT (Flash Of Invisible Text)?
Flash of invisible text happens when the browser hides the text until the font loads.
Fonts can load slowly because of their large file sizes. That’s why you might see the rest of the page download before your fonts, creating a flash of invisible text (shown in the image below).
FOIT: flash of invisible text – source: malthemilthers.comThe time your text is invisible is the “blocking period.” During the blocking period, you need to decide which font-display property to use. This determines how browsers will handle the fonts.
In the @font-face, you can choose between a few font-display options. Some cause more FOIT while others cause FOUT. The trick is to find a balance between the two, which is why “swap” is most often recommended. If you view your font’s CSS, it’s likely using one of the other options.
- FOIT – hide the text until fonts are ready (no fallback).
- FOUT – show the fallback font, then swap them when fonts are ready (FOUT).
Here is how browsers react:
Browsers that support font-display – caniuse.com
2. How To Fix FOIT
View the problematic font file in your PageSpeed Insights report.
Open the font’s CSS file.
If the font is being injected from a plugin (you should notice this in your PageSpeed Insights report), go to your Plugin Editor, select the plugin that is injecting the font, and view it’s CSS file.
If you still can’t find the font file, use the String Locator plugin to search for the font.
Add font-display: swap to the font’s CSS. This is different for Google Fonts vs. other fonts.
Google Fonts – add &display=swap to the end of the font’s URL.
Without Font-Display Swap:
https://fonts.googleapis.com/css2?family=Lato:wght@100With Font-Display Swap:
https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swapOther Fonts – add font-display: swap inside the CSS.
Without Font-Display Swap:
@font-face { font-family: Lato; }With Font-Display Swap:
@font-face { font-family: Lato; font-display: swap; }
3. Plugins That Fix FOIT
Swap Google Fonts Display – this plugin finds all Google Fonts and sets the font-display to swap (just install and activate it). It was developed by Gijo Varghese, author of many speed plugins and admin of the WP Speed Matters Facebook Group. The plugin only works with Google and can’t add font-display: swap to dynamically injected Google Fonts via JavaScript.
OMGF | Host Google Fonts Locally – originally developed to host fonts locally but also lets you set the font-display option to swap. Includes other features like serving fonts from your CDN and only loading .woff2 files, however many features are now only included in the pro version.
LiteSpeed Cache – if you’re using LiteSpeed Cache, you can find change the @font-face rules under Page Optimization → CSS Settings → Font Display Optimization, then set this to swap.
Asset CleanUp – add font-display: CSS property value to Google Fonts (Asset CleanUp > Settings > Google Fonts). You can also do this for local fonts, but will need the pro version.
SG Optimizer – web fonts optimization is found in the frontend optimization settings. By enabling this, a preconnect is added to Google Fonts and all other local fonts will be preloaded. When combined with CSS combination, it changes font-display to swap or add it if it’s missing.
4. Preload Fonts
Preloading fonts can fix FOIT and layout shifts.
It’s highly recommended that you test preloading fonts which you can do manually or by using plugins like WP Rocket, Pre* Party, Pefmatters, Autoptimize, Asset CleanUp, and SG Optimizer.
preload' href="https://onlinemediamasters.com//font.woff2' as="https://onlinemediamasters.com/font' crossorigin>Be careful when preloading too many fonts especially if they’re being preloaded, but not being used in some areas of your website. Too many preload tags can have a negative effect on speed.
5. Retest For Font Errors
Run your WordPress site through PageSpeed Insights (or Lighthouse) and make sure all text remains visible during webfont loads.
See Also:
Cheers,
Tom
Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-04-13 15:22:10.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.