Editor’s note: This article was originally published on December 24, 2024, and was updated entirely on April 20, 2025, to reflect significant changes, including Elementor’s new Google Fonts self-hosting feature and improved font optimization techniques.

Introduction

With Europe’s GDPR law in effect and the increasing emphasis on page performance, hosting Google Fonts locally has gained significant importance. Optimizing loading times ensures compliance and enhances user experience. Stay ahead of the game by keeping your fonts local and your website running smoothly!

This article guides you in making your website zippier and more efficient. I will show you how to host Google fonts in WordPress with the Elementor page builder, the Blocksy theme, and an OMGF plugin. You will need Elementor Pro and Blocksy Pro. The free versions don’t offer the ability to load custom fonts.

So stick around if you’re eager to boost your site’s speed while keeping your favorite stylish typography! I assure you, it’s easier than you might believe.

What are Google fonts?

Google Fonts is a library of over 800 free licensed font families. We’ve all stumbled across them more than once, haven’t we? Web designers favor them due to their large selection of unique and stylish fonts and ease of use. You can use them on your website without worrying about hosting or licensing. Sounds great, right? Google Fonts come with default settings that can be easily customized to fit your website’s design needs.

Let’s talk about the advantages first. One of the biggest pros of using Google Fonts is their variety and versatility. Whether you are looking for a minimalistic typeface for your blog post or a fancy one for your landing page, Google Fonts has covered you. Secondly, all of these fonts are open-source. That means you can use them freely without worrying about any licensing issues.

But it’s not all sunshine and rainbows. Using Google Fonts also has its cons. Firstly, to be precise, they rely on an external server – Google’s servers. Depending on your user’s location, this might slow down your website’s load time. Also, privacy can be a concern. Anytime you use Google Fonts, you essentially share your users’ data with Google.

Hosting Google Fonts locally in WordPress can solve these issues, and here’s how.

Benefits of Self-Hosting Google Fonts

Self-hosting Google Fonts can bring several benefits to your website, including improved page load times, better performance, and increased control over your fonts. By hosting your fonts locally, you can reduce your reliance on external servers and minimize the risk of font loading issues. Additionally, self-hosting Google Fonts can help you avoid potential security risks associated with loading fonts from third-party servers. With Elementor’s custom font feature, you can easily upload and manage your own font files, giving you more flexibility and control over your website’s typography.

Preparing Font Files

To use custom fonts in Elementor, you must prepare your font files in the correct format. Elementor supports several font formats, including TTF, OTF, WOFF, and SVG. When preparing your font files, include all the necessary font weights and styles, such as regular, bold, and italic.

Font Squirrel or Google Fonts can generate the required font files. However, some fonts may have licensing restrictions, so check the terms of use before uploading your font files to Elementor.

Faster web page loading time

When you host Google Fonts locally, you store them on your site’s server. Doing so eliminates the need for your visitor’s browser to visit Google’s servers. This improves your website’s load time and enhances your visitors’ overall browsing experience, as they can seamlessly access the fonts directly from your server.

Ensuring fonts are fully loaded quickly can significantly enhance the user experience by reducing page load times.

Increased security

You’re in full control of the files by hosting Google Fonts locally. This means you don’t have to worry about Google’s servers being down or any unexpected changes to the fonts.

Having expert support can further enhance the security of your locally hosted fonts.

Compliant with European GDPR

Hosting these fonts on your server or website ensures compliance with the General Data Protection Regulation (GDPR), as you are not sharing visitors’ data with external entities such as Google.

Less dependency on external resources

You reduce your site’s dependency on external resources by self-hosting Google Fonts. If Google were to experience a server outage or make sudden changes to its font library, your website wouldn’t be affected. By hosting fonts locally, you eliminate the dependency on the Google server, which can improve site performance.

Improved user experience

Local hosting of Google Fonts can also offer a better user experience. It allows for quicker loading and rendering of text, which means users can start reading your content sooner. This speed improvement can contribute to a positive impression of your site and could potentially decrease bounce rates. Custom fonts can enhance the visual appeal and readability of various web pages, contributing to a better user experience.

Greater control over caching

Caching your resources, such as your fonts, on your own server gives you more control. You can define the caching policy that best fits your needs, potentially leading to better performance gains. Custom caching policies can be created to optimize font performance and improve site speed.

Remember, the goal is to create a faster, more secure, and more efficient website that provides a superior user experience. Self-hosting Google Fonts is one small but significant step towards that goal!

You reduce your site’s dependency on external resources by self-hosting Google Fonts.

How to Self-Host Google Fonts Locally in WordPress.

Elementor Now Supports Loading Google Fonts Locally — But Here’s Why I Still Prefer Uploading Custom Fonts

Elementor has recently introduced a handy feature: starting with version 3.27, it self-hosts Google Fonts by default. This update was rolled out in response to GDPR concerns and performance optimizations. It means you no longer need to rely on Google’s servers for fonts when using Elementor—Elementor will automatically download and serve Google Fonts from your server.

You find the setting in WordPress, backend, Elementor, settings, features,

How does it work?

When you select a Google Font inside Elementor, the builder downloads it and stores it locally on your site. This helps improve privacy and performance without requiring extra plugins or manual uploads.

That’s a smart move by Elementor, but in my opinion, manually uploading custom fonts is still the best way to go. Why?

More control over font variations: When you upload fonts yourself, you can pick only the weights and styles you need, which helps keep things lean and efficient.

Better performance tuning: You can convert fonts to WOFF2 for maximum compression before uploading—Elementor’s automatic method doesn’t offer this fine-tuning.

Truly custom typography: If you want to use a font that’s not part of Google Fonts, you’ll need to upload it manually.

So, while Elementor’s self-hosting feature is a welcome improvement—and a great default for many users—those who want complete control will still benefit from manually uploading fonts. And Elementor Pro makes that process pretty easy.

Self-host Google fonts with Elementor Custom Fonts

Elementor makes it surprisingly easy to self-host Google Fonts. Elementor Pro is required to upload custom fonts.

Let’s break it down into simple steps:

1. Find the Right Fonts: Head to Google Fonts to find your desired font. Click on the font family that you want to download.
2. Download the Font: Click on the ‘Download Family” icon in the top right corner of the screen to download the zip file.

1. Extract the ZipFile: See the screenshot below. We need the font files in the static folder. Google provides ttf font files.

1. Upload the Font in Elementor: Go to Elementor > Custom Fonts in your WordPress dashboard. Click on “Add New”, and fill in the ‘Font Name’ with the font name you’re uploading. Click “Add Font Variation”; in the font variation section,.
2. Here, upload your font file and define the font weight and style.
3. Repeat the process for all the font variations you want to add.
4. When done, click the publish button.

1. Use Your Font: Go to the Elementor page editor. Your newly uploaded fonts are in the ‘Style’ tab under ‘Typography’. Select the text element you want to change, and from the dropdown menu, select the font you uploaded. It shows as ‘custom fonts.’

1. Disable Google Fonts: Ensure Elementor won’t load Google fonts. Go to Elementer, settings, Advanced, and disable Google Fonts.

That’s it! You’ve successfully self-hosted Google Fonts with Elementor. Now, your website will load faster, offer better privacy for your users, and you’ll have more control over the look and feel of your site.

Font File Formats

In Elementor, you can upload various types of fonts. WOFF, WOFF2, TTF,SVG and EOT

• WOFF (Web Open Font Format): This web font format was developed in 2010. It uses a compressed version of the same table-based structure that TrueType (TTF) and OpenType (OTF) use. WOFF fonts are typically smaller than TTF or OTF fonts, making them quicker to load.
• WOFF2: This is an improvement over the original WOFF format. Introduced in 2014, it provides even better compression than WOFF, leading to faster load times. It’s widely supported in modern web browsers.
• TTF (TrueType Fonts): Apple and Microsoft developed This font format in the late 1980s. While it’s still used widely, it’s not compressed, meaning the file sizes can be larger and slower to load on websites.
• SVG (Scalable Vector Graphics): SVG fonts are text files containing each letter’s shape is in a font. They are typically larger in size compared to other font formats. However, they can be scaled indefinitely without losing quality, making them ideal for high-resolution displays. SVG are good for Icon upload but not recommended for fonts.
• EOT (Embedded OpenType): EOT was a proprietary format developed by Microsoft for use with Internet Explorer. It allows you to embed a subset of the font file, saving bandwidth. However, it’s not widely supported anymore, and its usage is generally discouraged.

I recommend using the WOFF2 format for better performance. Since Google delivers fonts in TTF format, you can easily convert TTF to WOFF and WOFF2 using a free online tool like Transfonter.

Use Blocksy theme for self-hosting Google fonts

The Blocksy theme supports local Google fonts in the Pro Companion. However, to use this feature, you need to buy Pro.

1. Go to Blocksy in the WP Dashboard, Extensions, Pro Extensions

1. Click ‘Add Google Fonts, type in the fonts you want to host locally
2. Click the ‘+’ next to it, and the font is added
3. Check the box ‘by checking this option…’

1. Now Blocksy will use the Google Fonts API and download all the variations of the fonts.
2. The Google Font is now available in the Customizer, General Options, and Typography.

And there you have it! You’ve successfully set up local Google Fonts using the Blocksy theme. Your website should now load faster, and you can have peace of mind knowing your visitor’s privacy is better protected.

Use the plugin OMGF

Another method to add Google Fonts locally in WordPress involves using a plugin called “OMGF (Optimize My Google Fonts)”. This plugin helps in detecting which Google Fonts your site is using and then downloads and hosts them on your WordPress site.

Let’s look into the process:

1. Install OMGF Plugin: From your WordPress Dashboard, go to Plugins > Add New. Search for OMGF and install and activate the plugin.
2. Configuration: Visit Settings > Optimize Google Fonts. In the ‘Optimize Webfonts’ section, click on ‘Detect Fonts’.
3. Download & Host Google Fonts: OMGF will scan your website for Google Fonts and then download them. The plugin will also generate the required CSS automatically.
4. Finalize Settings: Look through the settings and adjust them per your needs. For example, you can set the plugin to remove all Google Fonts and replace them with the hosted ones. After making the adjustments, click on ‘Save changes’.

Voilà! You have successfully hosted Google Fonts locally using the OMGF plugin. Your website’s load time should decrease significantly, enhancing the user’s browsing experience. Furthermore, the privacy of your visitors is now better protected, and you have greater control over the fonts used on your site.

FAQ

Conclusion: host Google fonts locally

In conclusion, hosting Google Fonts locally in WordPress is a smart move that can significantly boost your website’s speed, improve user privacy, and give you greater control over your site’s aesthetics.

Whether using Elementor, the Blocksy theme, or the OMGF plugin, each method provides a straightforward way to achieve this. With a wide range of typography options, you can customize your website’s fonts to achieve the desired look and feel. Remember, the ultimate goal is to offer a fast, secure, and efficient website that delivers an exceptional user experience, and self-hosting Google Fonts is a stepping stone toward that objective. Happy designing!

I would love to get some feedback from you. Was this article helpful? Please share your opinion with me in the comment section below. Or, if you prefer a more personal touch, feel free to email me directly at info@edywerder.ch. Your thoughts and insights are always appreciated. Additionally, you can connect with me on Reddit at Navigatetech.