help center

On this page

Choose a loading method for Google fonts

Last Update: February 21, 2024

Google Fonts are an open source library of fonts often used in websites. By default, Elementor uses Google fonts for website creation. The method used to load these fonts can impact website performance so Elementor offers creators several loading options. 

Note: The website CSS also contains a fallback font which is used in case Google Fonts does not load. 

To change the Google Font loading method:

  1. From WP Admin, select Elementor>Settings.
    image 39 Choose a loading method for Google fonts 1
    Four tabs appear in the right pane.
    image 40 Choose a loading method for Google fonts 3
  2. Select the Advanced tab.
    image 41 Choose a loading method for Google fonts 5
  3. From  the Google Fonts Load dropdown menu, select a loading method.
    There are five methods you can choose from:
    • Default: Uses the browser settings to determine the loading method. 
    • Blocking: Hides the text until Google Fonts has fully loaded.
    • Swap: The text is displayed in the fallback font until Google Fonts is loaded. 
    • Fallback: – Uses the fallback font initially, then swaps it with the custom font when it’s available.
    • Optional: Similar to Auto, but the browser can choose to use a fallback font instead of waiting for Google Fonts to load.
      image 42 Choose a loading method for Google fonts 7
  4. Click Save Changes.

Google Fonts will now load using the method you selected.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article