Preloading Fonts and CLS Issues

[brianjohnsondesign]

Hi guys,

I’m having an issue where I’m getting some CLS issues on my site. It’s really inconsistent, but occasionally the CLS score is high and it appears to be caused by issues with the font load.

Is there any way for me to specify fonts to pre-load within Pro theme? I’m using Google fonts.

Currently, it looks like Pro theme loads them like this:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,400i,300,300i%7CPoppins:700,700i&#038;subset=latin,latin-ext&#038;display=auto" type="text/css" media="all" crossorigin="anonymous" data-x-google-fonts></link></head>

But I’m wondering if there’s any way for me to preload them. Or even just change font-display to “optional” which should help with CLS.

I could download them and then manually add them, but then I feel like Pro theme would still load them on its own, incurring an additional load cost which would slow my site down to load the same fonts a second time.

Let me know what my options are, thank you!

[christian]

Hey @brianjohnsondesign,

We do not have preloading options in Pro because not all fonts should be preloaded. You will need to optimize your site WordPress performance plugin. We can provide guidance specific for your site in our Boost Report.