Google Fonts Loading Method

In order to improve performance, we continue to focus on making fonts loading adjustments, and allow you to modify the default way Elementor loads Google Fonts.

Font-display property defines how font files are loaded and displayed by the browser. You can choose the loading method you wish using a designated control in your Elementor dashboard settings screen.

Google Font Loading Method Options

Go to Elementor > Settings > Advanced tab and change the Google Fonts Load to one of the options. From the dropdown menu, select from the following loading options:

  • Default – The font display strategy is defined by the browser.
  • Blocking – Hides the text until the font has fully loaded.
  • Swap – Use a fallback-font to display, until the font has fully loaded.
  • Fallback – Hides the text for a minimal period and will use the font only if loaded within a few seconds.
  • Optional – Hides the text for a minimal period and will use the fallback-font unless the font is already fully loaded.

Note: Font Awesome libraries loading options – In v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page