Do you have the problem where your website loads, and then suddenly the text font changes, slightly moving the page as styling is applied? This is a common WordPress font loading issue.
This can be referred to as a Flash Of Unstyled Content or FOUC, and is caused by the page rendering before the CSS – in this case the font file – loads.
This can be exacerbated by some sites loading many fonts – more than the standard 1-2 – including many different font weights. When this adds up, and all tries to load at the start of the render process, there can be something like 20 different fonts loading, which causes the FOUC.
How to fix WordPress Font Loading Issues
1. Cut down on the number of fonts being loaded
Are you using more than 2 fonts on your site? You should evaluate what you really need – having too many fonts can look messy.
2. Cut down on the number of font weights being used
Each new font weight requires another font file to load it. If you use font size 50 for H1 and 36 for H2, why does H1 need to be 900 weighted and H2 600 weighted? You can easily have the size give the hierarchy, rather than combining this with the weighting.
3. Enable the relevant CSS to resolve styling issues on load
By utilising various CSS display parameters such as display:swap, you can combine and link or preload the fonts in the head. Various options exist here to allow you to either block rendering until the font load is complete, or otherwise choose your preference – perhaps you give more importance to the user reading the page, and then the styling being added.
4. Enable locally served fonts
This gives you more control over what is loading and when, and ensuring that all resources are coming from your server. This has the added benefit of reducing the domain lookups per page load, and means you don’t need to worry about prefetching any font resources.
How to Locally Serve Fonts
You can go about adding fonts to WordPress either manually or via a plugin.
The plugin option is generally recommended as this will take care of the required CSS generation and linking needed to enable local fonts.
We recommend OMGF as this plugin allows you to automatically detect what fonts you are using and add them to your site. In addition, there are options are which CSS display parameter is chosen.
Need Help Fixing WordPress Font Loading Issues?
This is part of our optimization service. We can help you optimize your site above and beyond WordPress font loading issues, just let us know what you are trying to achieve, and we will let you know how we can help.