How To Load Google Fonts Locally

Many of you want to prevent loading the Google fonts from Google’s servers. The reasons vary from privacy concerns over caching advantages to reducing file requests from third party servers. In order not to leave the layout with default fonts, they can be served directly by your own web host.

I want to present a simple way of achieving this with an Elmastudio theme.

Prevent loading the Google fonts from Google’s servers

The Elmastudio themes provide a special mechanism for translators to deactivate loading specific fonts. We can utilize this method for our purpose. For each Google font there is an translatable string, so you can switch off the font while creating a translation.

Translations can be easily managed directly in your dashboard using the Loco Translate plugin. After installing the plugin you can find a Loco Translate menu in your dashboard. Here you can change existing translations and create new ones. Please be aware that WordPress plugin and theme translations will be overwritten by updates if they are edited directly. Therefore please create a new translation file, even if a translation already exists. This file can be placed in the proposed “languages/loco/themes/…” directory.

For example with the Uku theme you would click along:
Loco Translate β†’ Themes β†’ Uku β†’ New Language

Now you can specify the language and click on “Start Translating”.

Simply search for “off” or directly for the name of the font you want to deactivate. You should find the special strings to deactivate the font download from Google’s servers. Please click on the string and add “off” to its translation. After clicking save the language file will be created and the font won’t be loaded from Google’s server anymore. If you’re using a plugin to server your website in multiple languages, you need to repeat the steps for each used language.

Embedding the Google fonts into a child theme

You need a child theme to serve the Google fonts directly from your own web host. Here you can find out more about child themes in case you’re using no child theme yet: How To Create A WordPress Child Theme – The Right Way.

Prepared child theme folders are linked in the documentation of each theme. To get started right away I’ve also linked them in the theme list at the end of this post.

The needed fonts for each theme can be looked up in the theme list as well. Now you can use the following website to download the needed font files and create the additional CSS code to actually embed them: Google Webfonts Helper.

The downloaded files (ZIP archive, please extract) can be uploaded to a “fonts” directory within your child theme folder. Please change the “folder prefix” to “fonts/” so the font files can be found. Now you can copy the CSS code provided and place it in your child theme’s style.css.

That’s it, the Google fonts won’t be requested from Google’s servers anymore and instead they will be served directly by your web host. If you have any problems implementing or I was unclear at some point, I’d be happy to hear from you in the comments below or our theme support forum.

Theme list

Theme Fonts
Baylys (child theme download) Open Sans, latin and ext-latin with font weights of normal 300, 400, 700, 800 and italic 300, 400, 700.
Black Walnut (child theme download) Source Code Pro, latin and ext-latin with font weights of normal 300, 400, 600.
Playfair Display, latin and ext-latin with a font weight of italic 400.
Bugis (child theme download) Anton in all available variations.
Cocoa (child theme download) Libre Baskerville, latin and ext-latin with font weights of normal 400, 700 and italic 400.
Dorayaki (child theme download) Domine, latin and ext-latin with font weights of normal 400, 700.
Lato, latin and ext-latin with font weights of normal 400, 900.
Hawea (child theme download) Amiri, latin and ext-latin with font weights of normal 400, 700 and italic 400.
Kerikeri (child theme download) Helvetica Neue, no Google font.
Kiore Moana (child theme download) PT Sans, latin and ext-latin with font weights of normal 400, 700.
Raleway, latin and ext-latin with font weights of normal 400, 800, 900.
Meola (child theme download) Open Sans, latin and ext-latin with font weights of normal 300, 400, 700, 800 and italic 300, 400, 700.
Moka (child theme download) Lato, latin and ext-latin with font weights of normal 400, 700, 900 and italic 400, 700.
Namba (child theme download) Cabin, latin and ext-latin with font weights of normal 400, 700.
Satisfy in all available variations.
Neubau (child theme download) Work Sans, latin and ext-latin with font weights of normal 300, 400, 600, 800.
Amiri, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Nilmini (child theme download) Helvetica Neue und Georgia, no Google fonts.
Nori (child theme download) Helvetica Neue, no Google font.
Oita (child theme download) Crimson Text, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Raleway, latin and ext-latin with font weights of normal 400, 700.
Onigiri (child theme download) Merriweather, latin and ext-latin with font weights of normal 400, 700, 900 and italic 400.
Piha (child theme download) Lucida Grande, no Google font.
Pohutukawa (child theme download) PT Sans, latin and ext-latin with a font weight of normal 700.
Ponsonby (child theme download) Open Sans, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
PT Serif, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Pukeko (child theme download) Cardo, latin and ext-latin with font weights of normal 400, 700 and italic 400.
Roboto, latin and ext-latin with font weights of normal 300, 400, 500, 700 and italic 300, 400, 500, 700.
Renkon (child theme download) Lato, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Playfair Display, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Suidobashi (child theme download) Source Sans Pro, latin and ext-latin with font weights of normal 400, 700 and italic 400.
Tatami (child theme download) Open Sans, latin and ext-latin with font weights of normal 400, 600, 700 and italic 400, 600, 700.
Ubud (child theme download) Helvetica Neue, no Google font.
Uku (child theme download) Standard design style
Noticia Text, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Kanit, latin and ext-latin with font weights of normal 400, 500, 600, 700.
Neo design style
Source Serif Pro, latin and ext-latin with font weights of normal 400, 600, 700.
Poppins, latin and ext-latin with font weights of normal 400, 500, 600, 700.
Serif design style
Poppins, latin and ext-latin with font weights of normal 400, 500, 600, 700.
Cormorant Garamond, latin and ext-latin with font weights of normal 400, 500, 700 and italic 400, 700.
Waipoua (child theme download) PT Sans, latin and ext-latin with font weights of normal 400, 700 and italic 400.
Oswald in all available variations.
Werkstatt (child theme download) Rubik, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Weta (child theme download) Source Sans Pro, latin and ext-latin with font weights of normal 400, 600 and italic 400, 600.
Zeitreise (child theme download) Martel Sans, latin and ext-latin with font weights of normal 400, 700, 800, 900.
Zuki (child theme download) Karla, latin and ext-latin with font weights of normal 400, 700 and italic 400, 700.
Libre Baskerville, latin and ext-latin with font weights of normal 400, 700 and italic 400.

0 comments on “How To Load Google Fonts Locally

Leave a Reply

Your email address will not be published. Required fields are marked *