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.
Astra Theme Walkthrough Docs:
- Astra Theme Walkthrough
- This Is Your Customizer
- Style Your Website With Global Settings
- Build Your Header
- Find the Way With Breadcrumbs
- Set Up Your Blog
- Add Your Sidebars
- Build Your Footer
- Host Google Fonts Locally – Performance Is the Key (currently reading)
- See Other Customizer Options
- How To Build Quick Sites With Astra?
- Getting the Most Out of Astra Theme
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!
