How to properly use Google Fonts by preloading them

You are here:
Estimated reading time: < 1 min
In this article

The problem

The problem is that each plugin, such as Elementor or Revolution slider, or Customizer’s typography font lists, are all requesting the Google Fonts separately and can even load duplicate fonts and variants.

This can potentially cause a lot of performance problems and can slow down your site totally unnecessary.

Solution:

So what i did was to create a single source of truth for Google Fonts, to allow users to preload the fonts, which will be loaded into the entire website.

These fonts will be shown in every font list of Elementor or Customizer’s typography lists at the very beginning of the list.

Was this article helpful?
Dislike 0
Views: 172

2 Replies to “How to properly use Google Fonts by preloading them”

  1. Adrienne

    I don’t really feel like this has explained how to properly use Google Fonts by preloading.

    What (if anything) do we have to do as users?

    1. mariushoria[ Post Author ]

      Hi Adrienne,

      This tool is mostly to improve performance of loading Google fonts into the site, because Elementor & Customizer’s typography options each make separate requests for the fonts and their variants (weights). This means that for the same font you could potentially double load it.

      Basically after a font has been added in that preload option (or an ID for Adobe fonts), the Elementor & Customizer’s typography options will automatically contain them at the start of the lists eg: https://d.pr/i/Qcvt3J or https://d.pr/i/BjeFDs .

      So if you select fonts outside of this preloaded list, will result in multiple requests eg: https://d.pr/i/XaeVdJ (and loading all their weights 100, 200, 300, etc. ).

      Let me know if you still have trouble understanding it. I will also try to update this article.

Join the conversation