GET REY

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.

Font settings in Rey theme > Settings backend section.

You can then go to Customizer > General > Typography and choose the Primary & Secondary fonts, or just choose from the “Rey Fonts (Preloaded)” group.

Was this article helpful?
Dislike 2
Views: 2072

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

  2. Przemek

    I am having issue with loading Google fonts in the first place. Somehow it does load on the home page and archives but it does not load at all on product pages and subsequent checkout steps and some default serif font is showed. Font preloading is set, I have tried overwritting customizer font options with elementor’s ones but it did not change anything.

  3. Przemek

    I have now switched to Adobe fonts and I am finally starting to grasp the logic of fonts configuration. I assume that if I will go back to Google fonts it will work as well. So I must have been doing something wrong, though I am not sure yet what. I will go back to Google fonts this week because ‘v’ character does not look good when using Adobe in the font-fact of my selection.

    1. Marius[ Post Author ]

      Hey!

      Yes, going back should work well. What i believe you need is to load the subset of a font. For example in the Google font preloader list ex: https://d.pr/i/BbmAJj . The Adobe fonts could only have their subsets loaded their respective editable project.

      Marius

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!