No results found. Try again with different words?

Search must be at least 3 characters.

Host Google Fonts Locally – Performance Is the Key

Sidebar Image

Did not find a solution? We are here to help you succeed.

Building a great-looking website is very important, but so is your website’s performance. Astra Theme is well-known as a fast theme featuring clean, performance-optimized code that results in fast website loading. Still, there are some additional third-party services you might use on your website (e.g., Google). All these services will have an impact on your performance.

Under the “Performance” option in the Astra Dashboard (WordPress Dashboard > Astra > Settings > Performance), you will find an option to enable this option to Load Google Fonts Locally. You can enable this option to download Google fonts and save them on your server. This can be great for improving the speed of your website and complying with GDPR laws.

Load Google Fonts Locally

When you use any Google font on your site, it requires a request to be sent to Google to fetch that font every time you load a page or post. This can harm your CLS points in the Core Web Vitals score. To help improve this, Astra Theme comes with a Self-Hosted Google Fonts feature built-in. This feature was added with Astra Theme 3.6.0 update. You can learn more about this feature in our Blog article.

In the Astra Dashboard, you will find a toggle button to enable the “Load Google Fonts Locally” option.

Enabling this feature will send only one Google Font API request, which will gather all of the font data & assets files from Google and store them locally on your server. Then, for any further requests, the Google fonts will be loaded using the locally stored files (until this option is enabled).

Preload Local Fonts

Once you have your local font files enabled, you can also preload these. By default, a browser will wait to load the font file until it starts “painting” visible content on the user’s screen (lazy loading). This may cause the situation where a browser is ready to load your websites’ text but needs to wait for the font file to be downloaded first, as it isn’t available yet. This situation slows down your page load and creates a bad user experience.

Preloading fonts will “tell” the browser to import the font early on, so the font is ready to be displayed as soon as the browser starts painting the text, which will result in a positive impact on your website performance.

Flush Local Fonts Cache

As the fonts will be loaded and saved locally, any changes with Google Fonts will not be applied automatically. However, to keep your website fonts up to date, this feature will occasionally refresh the locally stored fonts. This will happen with the following actions:

  • Your website will update fonts automatically every month
  • Every time you save changes in the Customizer

If needed, you can update fonts manually any time you wish by clicking the “Flush Local Fonts Cache” button.

We trust that this guide has been informative and valuable. If you have any questions, please feel free to reach out!

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form