[Resolved] Local Font – PageSpeed Insights

[Julian]

Hey there,
I added a local font with this tutorial https://docs.generatepress.com/article/adding-local-fonts/. It works like a charme but unfortunately the PageSpeed Insights keep telling me to use “<link rel=preload>” for the fonts to load.

Do you have any idea how to solve this issue for the best pagespeed result?

[David]

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">

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Julian]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Julian]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Julian]

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?

[Tom]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Julian]

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

[Tom]

Glad you got it sorted 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[manaadiar]

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&#8217; media=’all’ />

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[manaadiar]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts