4 Best Ways To Host Google Fonts Locally in WordPress
There are numerous reasons to host Google Fonts locally. One of the most important reasons is to improve your website’s loading speed.
Google Fonts offers several amazing fonts to improve the typography of your WordPress website. However, most website templates load these fonts from external sources, which can slow down the speed of your web pages and affect your ranking.
Thankfully, you can host Google Fonts locally on your WordPress website to ensure optimal performance. So keep reading as we explain how you can do this in a few simple steps.
Content:
What are Google Fonts?
Google Fonts is an online library of free and open-source fonts developed and optimized by Google for use on sites and other digital projects.
These fonts are available for use by anyone, including web developers, designers, website owners, and just anyone looking to improve the typography of their website.
And yes, it’s used extensively. A quick look at Google Fonts analytics shows a total font view of over 75,000,000.
How to Host Google Fonts Locally in WordPress
There are several ways you can host Google Fonts locally on your website. Therefore, in this article, we will outline four methods to do it.
Method 1. Host Google Fonts Locally with a WordPress Plugin
The simplest way to host Google Fonts locally on your WordPress website is by using a plugin. There are several plugins that can allow you to easily host Google Fonts locally on your website.
There’s the Fonts Plugin and the OMGF plugin. Both plugins have over 200,000 installations. For this guide, we will use the OMGF plugin.
To host Google Fonts locally using the OMGF plugin, follow the steps below.
Install the OMGF Plugin
You’ll need to install the OGMF plugin to set up Google Fonts locally.
To do this, log in to your WordPress dashboard and go to Plugins > Add New. This will take you to the WP plugin page.
Type “OMGF” into the search box. The plugin should now appear in the search result. Click on Install Now to install the plugin. Next, click on Activate to enable the plugin on your website.
Setup the Plugin
Once the plugin is activated, you need to set it up so it becomes functional. To do this, go to Settings > Optimized Google Fonts.
Once you are on the Optimized Google Fonts plugin page, scroll down and click on Save & Optimize. With this, you’re done with the setup.
Congratulations. You’ve successfully hosted Google Fonts on your website.
Method 2. Host Google Fonts Locally on WordPress Using CSS
If you don’t like the plugin option, there’s another way you can host Google Fonts without installing a plugin.
Below, we will show you how to host Google Fonts on your site using CSS.
Download Google Fonts
Start by visiting the Google Fonts platform to download your preferred fonts. The site hosts a vast collection of fonts for you to choose from.
So browse through the available fonts. You can change the view and filter based on category and language to find your preferred fonts.
Once you find a font you like, click on it, and then click on “Download family” at the right top to download the font.
For instance, to install “Tulpen One,” we’ll search for it on the search bar, then click “Download family.”
Extract and Convert the Downloaded Font File
The font you download from Google Fonts will be saved in Zip format, so you have to extract it. Find the Google Fonts file in your downloads folder and then right-click on it. After that, click on ‘Extract.’
Once you’ve extracted the file, you’ll notice that the fonts are in TrueType font family (TTF) format.
To install the font on WordPress, we have to convert it to the Web Open Font Format (WOFF) using a tool like Transfonter or Convertio. We will use Transfonter for this guide.
Go to the Transfonter website, click on Add Fonts, and then upload the extracted font.
Then, click Convert.
Click the Download button once the font is converted.
Upload Fonts to your Server
Next, you have to upload the converted font file to your WordPress site locally. You will need an FTP program like cPanel or FileZilla to do this successfully.
We will use cPanel for this guide. So login to your cPanel and click on ‘File Manager’ to access the root folder.
Once in the root folder, create a new font folder if you don’t already have one.
To do this, click on the ‘+ Folder’ option at the top-left.
Next, enter the folder name and click Create New Folder.
Now, click on Upload at the top of the page.
Now click Select File and choose the converted file to upload it to your website.
Link New Fonts to your Site CSS
After you’ve uploaded the font files to your FTP, you will need to integrate the fonts into your site’s CSS using @font-face. To do that, follow the steps below.
First, from your WordPress dashboard, go to Appearance > Customize.
In the customize section, scroll down and click on Additional CSS.
Now copy the font face code below and paste it into the Additional CSS panel.
@font-face { font-family: 'TulpenOne-Regular'; src: url('https://yoururl/fonts/tulpenone-regular.woff') format('woff'); font-weight: normal; font-style: normal; } |
Ensure to replace ‘yoururl’ with your website URL. Also, change the font family to the one you downloaded from Google Fonts. Here, we used the ‘Tulpen One family.’
Click ‘Publish’ once you’ve made those changes.
Call the Fonts Using CSS
You’ll need to use custom CSS to apply the font to any part of your website you want.
To do this, you’ll need to insert the CSS code below at the top of your child theme’s CSS file or via the Additional CSS section.
body { font-family: 'TulpenOne-Regular'; } h1, h2, h3, h4, h5, h6 { font-family: 'TulpenOne-Regular'; }WordPress |
We will use additional CSS for this. Navigate back to the Additional CSS panel. Appearance > Customize.
On the Customize panel, scroll down and click on Additional CSS.
On the Additional CSS panel, copy and paste the code and click then click on Publish.
Note: The code above has two sections that allow you to change the font for the body and header of your page. You should modify the font family names to the ones you uploaded. We used TulpenOne here.
Finally, you have successfully hosted and applied the TulpenOne-Regular font to your website.
Method 3. Use Google Web Fonts Helper
In the method above, we had to manually edit the CSS rule and convert the font file before uploading it to the server. But what if there’s a simpler way to do it?
Google Web Fonts Helper is a handy tool that can automate the process of hosting Fonts locally on your site. It basically generates the CSS rule for the font and provides the format files in WOFF or WOFF2 formats. So here’s how to self-host Google Fonts using this method.
To get started, go to Google Web Fonts Helper. The platform lists all the Google Fonts on the Left bar. Search for the fonts you like.
We will use Roboto for this illustration. So search for Roboto or the font you want to host on the left search bar and click on it.
Choose Styles and Character Sets
To generate the CSS rule for the Google Font, we have to first specify the styles, charsets, and type of browser support we need. You can leave these at the default settings if you don’t have anything specific in mind.
However, if you want the website to support older browsers, then choose Legacy or Historic Support.
For instance, we’ve selected Latin and Latin-ext charsets; and two styles; Roboto regular and 100italic styles.
Scroll down and choose ‘Historic Support’ to ensure the font supports older browsers.
You can see the font-face rules for the two fonts we selected.
Download Font Files
Next, you also need to download the Font file. To do that, click on the download button located at the bottom left corner of the page.
Note: Don’t close the Google Web Fonts Helper page. You’ll still come back to it.
Extract the Downloaded Font File
Locate the font file in your download folder and extract it. As you can see below, the file format for our download is WOFF2, which is the ideal format you need.
This eliminates the need to use tools like Transfonter or Convertio, as we did in the previous method.
Upload Fonts to your Website
Just like we did in the previous method, you’ll need to upload the font files to your server using either an FTP tool like FileZilla or cPanel.
We will use cPanel like we did before. Log in to your cPanel console and click on File Manager > + Folder to add a new font folder if you don’t already have one.
Open the new font folder you created (it should be empty). Click on Upload right corner of the page.
You will then be redirected to a different page where you can upload the font file. Ensure you’ve already extracted it.
Click on Select File and choose each font style on the extracted file until you upload all of them.
In our cases, we downloaded two font styles, and we’ve uploaded two of them as shown below.
Once done, you can exit the cPanel.
Copy Font-Face File
Now, go back to the Google Web Fonts Helper page. Scroll down and copy the Font-face code. You’ll need to insert it via the Additional CSS section.
Navigate to the Additional CSS panel by clicking on Appearance > Customize.
On the Customize panel, scroll down and click on Additional CSS.
Paste the Font-face code you copied and click Publish.
Activate the Installed Font
Now, to activate the font on your website, you have to insert another code in your Additional CSS.
Copy the code and paste it under the font-face code you added above. Then click Publish to save it.
body { font-family: 'Roboto-italic'; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto-Regular'; }WordPress |
Note: This code allows you to specify the fonts to use for the body and headers of your pages. We used Roboto here. So, change Roboto-italic and Roboto-Regular to your chosen font families.
As you can see below, the font has changed to Roboto, which means we’ve successfully hosted Google Fonts.
Method 4. Host Google Fonts Locally Through Your Theme
Several WordPress themes come with the Google Fonts optimization option to allow you to self-host Google Fonts locally without codes.
Themes like Astra and Nexter WP have this feature. Let’s see how it works on Astra below.
Host Google Fonts Locally Using Astra Theme
From your WordPress dashboard, go to Astra. Then click on Settings.
On the Settings Page, Click on Performance. Then, toggle on “Load Google Fonts Locally.“
Enabling this feature will send a Google API request, which will gather all the fonts and asset files and store them locally on your server.
Preload Fonts Locally
By default, the browser will load the fonts directly from your server every time a request is made. However, this can take a long time to load and slow down your site’s loading times.
Preloading fonts notifies the browser to import the fonts early so it loads faster. Fortunately, Astra allows you to set this up with one click. To do this, simply turn on the Preload Local Fonts toggle.
Flush Local Font Cache
One problem with storing things locally is that you won’t get automatic updates once there’s one available. The same applies to locally hosted Google Fonts.
That’s where the Flush Local Fonts Cache Feature comes in. The feature allows you to refresh your locally hosted Google Fonts at any time.
To enable this feature, click on the Flush Local Fonts Cache button.
And that is it. You have successfully hosted Google Fonts on your WordPress website with your theme. Congratulations.
Frequently Asked Questions About Google Fonts
Why load Google Fonts locally?
Loading Google Fonts locally can improve your site’s speed. It also reduces the number of HTTP requests sent and eliminates the risk associated with relying on third-party resources like Google CDN. So, even if there’s a problem with the delivery, your site will still perform optimally.
How do I add Google Fonts to my website locally?
There are several ways to add Google Fonts to your website. One of the most common methods is to use the CSS font face. To do this, you have to first download your preferred font from Google Fonts.
Next, you have to upload the font files to your website using an FTP client. Once you’ve done that, you can then call the font using Font-Face and CSS.
How do I host Google Fonts locally in WordPress?
To host Google Fonts on your WordPress site, you can use a WordPress Plugin like the OMGF | Host Google Fonts Locally plugin.
Some WordPress themes, like Astra and Nexter WP, also come with the Google Font Optimization option, which allows you to host Google Fonts locally without code snippets.
How do I host a Google Fonts on my own server?
To host Google Fonts locally on your server, you have to download the Font files from the Google website or through the Google Web Fonts Helper. Next, you’ll have to upload it to your server using an FTP tool like cPanel or FileZilla before calling it with Font-Face and CSS.
Conclusion
There you have it. That’s how you can host Google Fonts on your WordPress website in four different ways. Remember that this process can significantly increase your website’s loading speed. So it’s worth every step of it.
