Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Preloading Fonts Conditionally

Home Forums Support [Resolved] Preloading Fonts Conditionally

Home Forums Support Preloading Fonts Conditionally

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1149832

    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.

    Lead Developer
    Lead Developer

    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:
    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.

    Lead Developer
    Lead Developer

    No problem! πŸ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.