Many Wordpress themes and plugins are using Google Fonts services as a font provider for websites. It is a convenient and more flexible way of using special fonts, rather than using fonts hosted locally. Some of the benefits which this solution brings are: wider range of fonts you can choose from on your website directly from Wordpress Admin interface for free, fonts are maintained by Google Fonts service which means all updates are immediately used on your website, no need to manually change anything in your CSS stylesheets, etc.

Google Fonts is a library of over more than 900+ fonts that can be used on our website for free.

Every coin has two sides (well, three actually but let's continue with the original assumption). What are the main downsides of using Google Fonts on your Wordpress Website? This solution dramatically slowdowns the page load time. Every font has a different file size. Your plugin or theme can even include more than one font from Google Fonts, which multiplies the time needed to completely load your website by the client's browser. Problematic are remote HTTP requests which are needed to be done, font file size, and no possibilities to configure caching and compression of the font files. All of these aspects slower page load time which negatively affects your rankings in Google Search (Google lowers position in search results when a page load time is too slow) and also discourages your visitors.

We have discovered, that many clients on our shared Web Hosting are facing this kind of issue. Tests provided by Google Page Insights are often highlighting these blocking elements and decrease ranking dramatically.

So, the question is, how to deal with this problem and increase your Wordpress website speed when using Google Fonts service?

Host fonts locally on your web hosting

There are some plugins designated to host Google Fonts locally on your web hosting. Our experience with using these plugins is very odd. The functionality and results were not as expected and trying to get plugins working correctly and as expected took us much more time than hard-code this feature. So, you may try to use for example plugin called OMGF but we are not a big fans.

We would rather suggest you implement this feature by hand as it will be described below.

How to host Google Fonts on your web hosting

There are two ways how to obtain fonts you are using: either by using free google-webfonts-helper tool or downloading the fonts directly from the Google Fonts and converting them by transfonter.org tool.

1) Obtaining fonts from google-webfonts-helper

Go to google-webfonts-helper tool website and find a font you want to use on your website in the left-hand menu. In our example, the desired font is Open Sans.

In the first box on the right side choose a charset first. The default is latin but if the font supports other ones and you want to use them, choose any you want.

Font charset selection

In the next box, you can choose font styles you are willing to use on your website. You can choose the thickness of the font and also italic version for each thickness.

Font style selection

The next two boxes are your finish line in this tool. The first box automatically generates for you CSS code which you can use on your website in the next steps of this tutorial. In the Download files section, click on the big blue button to download your font files.

Extract the files and continue to the next chapter of this tutorial.

2) Obtaining fonts from Google Fonts and converting them by Transfonter.org tool

Navigate to the Google Fonts website and find a font you would like to use. Select the desired styles (do not download the whole fonts family) and click on the Download all files button.

Downloading fonts from Google Fonts website

Extract the download file and go to the website transfonter.org. Click on the Add fonts button and upload files you have downloaded from Google Fonts website. Next, click on the Convert button and wait until the process finish and then click on the Download button to obtain your converted font files. Extract download file.

Now you have your fonts ready to use locally in your Wordpress website locally, within your web hosting.

Don't you know what styles are you using on your website and what styles to choose? View your website's source code and/or CSS stylesheet file and search for a "https://fonts.googleapis.com" URL. The styles in the URL are as parameters. For example this link: https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,300&display=swap means options: thickness 300, 300 italic and regular 400.

Implementing fonts onto your website

Connect to your web hosting server over the file transfer protocol (FTP or SFTP) - within our shared web hosting services we offer both protocols (FTP and SFTP), even SCP or rsync.

We recommend using SFTP / RSYNC or SCP to transfer your files as FTP is an old-school and vulnerable insecure protocol.

Create a folder "fonts" inside "wp-content" folder in your Wordpress installation and copy all font files into this wp-content/fonts folder.

When you have uploaded all font files onto the server, you need to fix your theme.

Create a child theme on your server first. Navigate to wp-content/themes folder and create a new folder with the name: yourThemeName-child where: yourThemeName is your actual theme folder name you are currently using and -child is required appendix that tells Wordpress you are using a child theme for your yourThemeName theme.

Example: If your theme name is twentyfifteen (one of the original Wordpress themes), the folder name in the wp-content/themes is also twentyfifteen. Your folder for child theme will be like twentyfifteen-child.

In your child theme folder, create a file called style.css and put the following code into this file:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

The following information is required:

  • Theme Name – needs to be unique to your theme
  • Template – the name of the parent theme directory. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.

Add remaining information as applicable. The only required child  theme file is style.css, but functions.php is necessary to enqueue  styles correctly.

Moreover, some additional content to the style.css file is required to apply your downloaded fonts.

If you have used google-webfonts-helper tool to download fonts, you already can have the CSS code generated by this tool automatically. It might look like this:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v26-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

You can just copy & paste this piece of code into style.css of your child theme. You just need to fix the path to your font files from: ../fonts/ to /wp-content/fonts/ as location, where we have uploaded fonts before.

You can use the similar code as well in case you have downloaded your fonts by using Google Fonts website and convert tool:

@font-face {
    font-family: 'Open Sans';
    src: url('/wp-content/fonts/Open-Sans.woff2') format('woff2'),
        url('/wp-content/fonts/Open-Sans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Adjust the file paths according to files you have downloaded & uploaded to your web hosting server. The font files might be different for every font and every convert/download tool can use its own file names or formats. Now it is time to enqueue this style.css to your website.

Create a new file functions.php inside your child theme folder and put in this code:

<?php
function my_theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

After you have your style.css and functions.php files of your child theme ready, the last step remains Disable Google Fonts include on your website.

This step really depends on what theme or plugins are you using. Google Fonts include might be placed on multiple locations. For most themes, you will probably need to reach out to the developer and they can quickly provide a function to disable Google fonts. Or check their documentation, typically this is a very quick tweak. Some themes may even have an option to turn them on or off in the back-end.

You also may check the functions.php file inside the main theme folder and search for term https://fonts.googleapis.com , you might find something like:

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400,700|Arbutus+Slab', array(), CHILD_THEME_VERSION );

This code you can comment in or completely remove. You can also search for the above term in all files of your original theme or plugin and adjust it accordingly. Anyway, be aware ⚠️! We do not recommend this method! It may lead to malfunction of your theme or plugin (especially when you are unsure what exactly you doing) and also after you update your plugin or theme, the update probably rewrites your manual changes (that's why the child themes function was implemented into Wordpress). So, a better way, if plugin or theme does not support disabling Google Fonts as a feature, request developers to implement such option.

More information about Wordpress Child Themes you can find out in the Wordpress Documentation.

I hope you consider this article as useful for you and it will help you with rocket speeding up your website and minimize your page load-time.

Enjoy!