Local Font - PageSpeed Insights

Hi there,

you can use a Hook element to add your preload link:

https://docs.generatepress.com/article/hooks-element-overview/

You would select the wp_head hook and set your Display Rules to the Entire Site

An example of the preload link looks like this:

<link rel="preload" href="https://your-site/-full-url-to-the-font/font.woff2" as="font" type="font/woff2">

Are you sure this will work using the @font-face import method in the custom css field? I added the local font using your tutorial.

As long as the URL you specify in the preload link is the same as that in your @font-face then yes.

So you mean instead of using @font-face import in custom css I should load it with the hook in the head then?

No - you need both.
The @font-face is required.
And if you want to preload them - then you must ALSO add the preload to the hook i mentioned.

When I do that pagespeed insights says that they found a preload element but it is not used in the site. Its marked as error then. Any ideas?

Hi there,

Any chance you can link us to the site so we can take a look?

Hey Tom, I've added crossorigin="anonymous" and now the error is gone and it works.

Glad you got it sorted :)

Good day, what would be the code to be used in block element for preloading style sheet/js..?? Will what is updated in block elements automatically override the same theme element..?? Can you assist with the preload code for example with below css

<link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/5.8/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' media='all' />

Hi there,

if you're using GenerateBlocks plugin in the Block Element, then its CSS is dynamically generated with ALL GB styles on the currently viewed page. So there isn't a static style sheet that can be preloaded.

You may find some optimization plugins provide preloading of the combined/cached files they generate.

Hi David, as per my plugin screen GenerateBlocks Plugin is active.. But as per the Core Web Vitals of Google, css is not being pre-loaded.. How can I ensure

You can't preload the CSS that GenerateBlocks requires at this time.
ITs dynamically created. Preloading will only work with static stylesheets that have a fixed URL and a unique name.