Do you need to pre-load fonts in the and declare them in CSS as a font-face?

Question

My question comes from trying to optimize for lighthouse test's preloading key assets.

I've placed the fonts flagged by lighthouse report in Chrome browser into a link in my head file.

[header.php]

Do I still need to include it in my style.css file and declare the font-face?

[style.css]

@font-face {
  font-family: "Roboto";
  src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }

I'm asking because despite adding the preload link in my header, Lighthouse report still shows that my file is not preloading.

Thanks for your help all.

user_3645650 · Answer

Both declaration don't have the same goal.

The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.

Source @ https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

If you add preload by itself, your font won't be taken into account. You have to specify the action too.

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on.

Like Graham said in the comment, preload can only be efficient if it is specified before any font related actions like the tag (loading font via html) or the css file itself.

Additionally, your request is dependent to style.css. loading your font in the html could greatly improve performance. Either by inlining it in a

Do you need to pre-load fonts in the <head> and declare them in CSS as a font-face?

1 Answers