Adding the link rel=preload into blocs

I Need Help
1

Hello guys! Any idea how to add the link rel=preload into blocs?
After running lighthouse I get a message saying

Preload key requests
Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.

How to fix it? its on the fonts mostly!

1 Like
2

hey @Stewie_Griffin, i had the same question a week ago and managed it with the following code in the projects header:

link rel=“preload” href=“fonts/cicle_fina-webfont.woff2” as=“font” type=“font/woff2” crossorigin=“anonymous”

  • rel – this tells the browser to preload the font file.
  • href – this is the link to the actual font file. You’ll need to edit it to reflect the font that you want to preload. Better to use the full url of the file location!
  • as – this tells the browser that it’s preloading a font file.
  • type – this specifies the font file type. You’ll need to change it if you want to preload a different file type.
  • crossorigin – this is needed to satisfy a quirk of font preloading, which I’ll mention more in the next sections.

Hope this helps

2 Likes
3

Ah great thanks a lot! You do the same for the fa fonts right? When adding the preload to the css file gets all so messy!

4

Glad it worked. I personally don’t use FontAwesome, I rather use SVG inline for Icons when needed. But you could still preload FA the same way.

5

Some how it didn’t work for me! :sob:

6

<link rel="preload" href="https://www.extrobes.com/fonts/XELO/XELO.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Try this :slight_smile:

1 Like
7

and what about my on installed fonts?

8

you mean added fonts that aren’t google fonts?

9

Yes! Correct!

10

locate your file directory where your font is located. Enter the whole URL in the script above and you should be fine.