[Resolved] Preloading Fonts Conditionally

[David]

I’m self-hosting Poppins 400, 500 and 700 weight fonts. Subsetting the fonts reduces the size by 50%.

Preloading the fonts ensures they’re delivered rapidly, but they’re served site wide.

My question is: how can I conditionally load the fonts for the home page only?

<link rel="preload" href="../fonts/subset-poppins-v9-latin-regular.woff2" as="font" crossorigin>

Then I’m calling the fonts from my homepage using your Simple CSS plugin.

/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular'),
       url('../fonts/subset-poppins-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/subset-poppins-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

*Poppins 500/700 left out for brevity.

Thanks in advance.

[Tom]

Hi there,

How are you adding this currently?:

<link rel="preload" href="../fonts/subset-poppins-v9-latin-regular.woff2" as="font" crossorigin>

You could:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Add the <link> as your hook content
3. Set the Display Rules to “Front Page”

Let me know 🙂

[David]

Hi Tom,

That works perfect!

Originally I was placing the links in the child theme head section – which works fine for every page.

Then I tried an Element, but instead of a normal hook went for header, as I got confused between head and header. 🙂

Anyway, when I tried a normal hook it works flawlessly.

Thanks for your help.

[Tom]

No problem! 🙂

[Author]

Posts