Archived topic
Preloading Fonts Conditionally
3 replies · Started by David on January 30, 2020
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.
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 :)
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.
No problem! :)
