Updated: 22nd March 2024
A font rendering issue appeared over the past week due to the Kirki customizer plugin. Fonts now either appear all bolded, or in some cases, don’t render correctly at all.
This appears to be due to how Kirki retrieves fonts from Google’s API. It looks for woff fonts rather than the woff2 type. Something has changed within Google’s API and the woff versions are not retrieved correctly.
We have created an issue on Kirki’s GitHub page.
In the meantime, here are two solutions.
1. Update Kirki to 5.1.0
On March 22nd 2024, Kirki released a 5.1.0 update, which loads woff2 versions of the fonts, which resolves the problem.
Update Kirki, but you won’t see the issue resolved right away. This is because the font transient has an expiry window of 7 days. If you leave it, it will eventually resolve itself.
But to fix it immediately, install the Transients Manager plugin.
And look for:
kirki_remote_url_contents
And delete that transient. Test the site now, and the fonts should display correctly again.
You can remove the Transients Manager plugin afterwards.
2. Enable Typography 2.0
Shoptimizer comes bundled with an alternative method to render fonts called Typography 2.0, which we cover in Step 6 of our speed guide.
Loading fonts in this way, ensures that they are not render-blocking, and are in the woff2 format, which means the file sizes are much smaller.
To enable Typography 2.0, using either the Code Snippets plugin, or a child theme’s functions.php file – add the following line.
|
1 |
add_filter( 'shoptimizer_typography2_enabled', '__return_true' ); |
This will create a new section in the customizer.
It is available within Appearance > Customize > Typpgraphy 2.0 – and the fonts should now render correctly.
