Preload local fonts

  • Resolved NaturalEnquirer

    (@naturalenquirer)


    2 years, 9 months ago

    I have fonts stored locally on my host and I am trying to preload them to avoid CLS warnings. Page still shows default system font before showing the custom font. (On this page it is the Breadcrumbs font.)

    In Preload specific requests, I’ve added 3 fonts (do I need to use absolute path?):

    /wp-content/uploads/GreatVibes-Regular.woff2, /wp-content/uploads/MerriweatherSans-Light.woff2,, /wp-content/uploads/MerriweatherSans-Bold.woff2

    I am using Elementor Pro, Cloudflare (free plan), and Super Page Cache for Cloudflare caching plugin.

    What am I missing? Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    For preload (on the “extra” tab) you’ll need to use the full URL to each to be preloaded resource naturalenquirer (so e.g. https://natureinfocus.com/wp-content/uploads/GreatVibes-Regular.woff2). Additionally if you want to increase the likelihood of the custom font being used and not a system one, you’ll want to set font-display which is now set to swap (in the Elementor-generated CSS) to the more restrictive block to allow the browser a longer “blocking period” (time the browser waits for the custom fonts to be available without using system fonts).

    Obviously these changes (preloading and font-display:block) can have a performance impact themselves; preloading forces the browser to prioritize those assets (taking bandwidth from other assets which can be an issue on mobile) and font-display:block can lead to a lower FCP, so keep on eye on more then just the CLS when experimenting here 😉

    hope this helps,
    frank

Viewing 1 replies (of 1 total)

The topic ‘Preload local fonts’ is closed to new replies.