[Resolved] Preloading Fonts Conditionally

Home Forums Support Preloading Fonts Conditionally

  • This topic has 3 replies, 2 voices, and was last updated 12 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1149832
    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.

    #1149911
    Tom
    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: 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 πŸ™‚

    #1150091
    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.

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