How to Self Host Google Fonts Locally in WordPress
Introduction
With Europe’s GDPR law in effect and the increasing emphasis on page performance, hosting Google Fonts locally has gained significant importance. It ensures compliance and enhances user experience by optimizing loading times. Stay ahead of the game by keeping your fonts local and your website running smoothly!
This blog post is all about guiding you on how to make your website zippier and more efficient. I will show you how to host Google fonts in WordPress with 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?
Pros
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.
Cons
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.
Why should you Self Host Google Fonts Locally in WordPress?
Hosting Google Fonts locally in WordPress can solve these issues, and here’s how.
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.
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.
Compliant with Europe GDPR
Hosting these fonts on your own 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.
Looking for a tool to help you create content that ranks?
NOw AI writer with GPT4
Create Content that Drives More Traffic and Revenue to your Website
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.
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.
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.
Remember, the goal here is to create a faster, more secure, and more efficient website that provides a superior experience to your users. And 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.
Scenario 1: Self host Google fonts with Elementor
Elementor makes it surprisingly easy to self-host Google Fonts. To upload custom fonts, Elementor Pro is required.
Let’s break it down into simple steps:
- Find the Right Fonts: Head to Google Fonts to find your desired font. Click on the font family that you want to download.
- Download the Font: Click on the ‘Download Family” icon in the top right corner of the screen to download the zip file.
- Extract the ZipFile: See the screenshot below. We need the font files in the static folder. Google provides ttf font files.
- 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,.
- Here, upload your font file and define the font weight and style.
- Repeat the process for all the font variations you want to add.
- When done, click the publish button.
- 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.’
- 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 includes the ability 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. The format delivered by Google is TTF. Here you can convert TTF to WOFF and WOFF2.
Scenario 2: Use Blocksy theme for self hosting Google fonts
The Blocksy theme support local Google fonts in the Pro Companion. You need to buy Pro in order to use the feature.
- Go to Blocksy in the WP Dashboard, Extensions, Pro Extensions
- Click ‘Add Google Fonts, type in the fonts you want to host locally
- Click the ‘+’ next to it, and the font is added
- Check the box ‘by checking this option…’
- Now Blocksy will use the Google Fonts API and download all the variations of the fonts.
- 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.
Scenario 3: 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:
- Install OMGF Plugin: From your WordPress Dashboard, go to Plugins > Add New. Search for OMGF and install and activate the plugin.
- Configuration: Visit Settings > Optimize Google Fonts. In the ‘Optimize Webfonts’ section, click on ‘Detect Fonts’.
- 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.
- 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
Why host Google fonts locally?
Hosting Google fonts locally enhances your website’s performance by reducing external server requests, which speeds up your site’s load time. It also improves the privacy of your visitors as their data won’t be sent to Google’s servers each time they visit your site. Plus, you gain more control over the fonts and their caching, and the site remains unaffected by potential changes or outages on Google’s servers.
Should I use Google Fonts for my website?
Google Fonts can be a good choice for your website due to their high-quality designs, wide selection, and ease of use. They’re also free, which is a bonus. However, it’s important to consider the potential impact on site performance and user privacy. If you use Google Fonts, consider hosting them locally to mitigate these concerns.
Is it legal to host Google fonts locally?
Yes, it is legal to host Google Fonts locally. All the fonts available on Google Fonts are open source and free to use, modify, and distribute, even for commercial purposes, under either the SIL Open Font License or the Apache License, both of which allow for local hosting. However, double-checking the license for the font you’re interested in is always a good idea, as licensing details can occasionally change.
Can Google Fonts slow down my website?
Yes, using Google Fonts can potentially slow down your website. When your site uses Google Fonts, it has to connect to Google’s servers every time a page loads to fetch the font files, which can increase your site’s load time. This could result in a slower browsing experience for your visitors, particularly if your site uses multiple Google Fonts. You can mitigate this impact by hosting Google Fonts locally, as the fonts will be served from your own server, speeding up their load time.
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. 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!
