Home » Genesis framework » How to host Google fonts locally in Genesis Sample theme (or any other WordPress theme)

How to host Google fonts locally in Genesis Sample theme (or any other WordPress theme)

Looking how to add Google Fonts to WordPress Full Site Editing themes? Click here.

You may have heard that loading Google Fonts from Google servers violates GDPR. You also probably know that loading elements from other servers may slow down your website. That’s why today we’ll learn how to host Google Fonts locally in WordPress.

There are multiple ways to host Google Fonts locally in WordPress – you can do it using a plugin, or you host Google fonts in Genesis Sample theme without third party plugins – by downloading Google Fonts yourself, and including them to your WordPress theme. I’ll show you how to do it both ways.

How to know if Google fonts in your websites are hosted locally

If you’re not sure if your website loads Google fonts locally or remotely you can use free tool Google Font Checker. You won’t need to install any plugin or run any complicated procedure. Just enter your website URL to the field, and run the test to check if your WordPress website calls to Google to get fonts.

How to host Google Fonts locally using plugin (works with any WordPress theme)

If you want to load Google Fonts locally using any WordPress theme, you may use a free plugin OMGF.

Go to Plugins >> Add New, and enter OMGF to plugin search field at the top. Install the OMGF | Host Google Fonts Locally plugin, and activate it.

wordpress plugin host google fonts locally

In most cases you won’t need to do anything else – once you open your WordPress website as a visitor for the first time after OMGF plugin installation, plugin will start caching Google fonts locally, without any need for changing any settings or making any other changes.

Best WordPress hosting 2024

If something does not work as it should, you can always check Settings >> Optimize Google fonts page for plugin settings, but in most cases you don’t need to make any changes there.

wordpress local google fonts plugin

How to host Google fonts locally in Genesis Sample theme without any plugins

If you’re using Genesis framework, you probably like to have your WordPress admin panel as clean and minimal as possible. As me, actually.

Hosting Google Fonts locally in Genesis Sample theme is a bit more work without a third party plugin, but it’s still not hard to do.

First – go to Appearance >> Theme File Editor, and check what types of Google Font will be needed.

By default Genesis Sample theme uses Source Sans Pro font family (styles 400, 400 italic, 600, 700). But if you’re using any other Google font, the method will work perfectly fine for you too.

You’ll need to remove line starting with ‘fonts-url’ for Genesis not to load Google font from Google server.

genesis sample theme google fonts

Login to your WordPress website’s FTP server using Filezilla or any other FTP client, and create new directory named fonts in your WordPress installation (ideally it should be /wp-content/fonts/ directory ).

Now go to Google Webfonts helper tool and look for the Google font you need:

  1. select font family on the left
  2. select charsets, font styles.
  3. Under Copy CSS window there is Customize folder prefix field. Enter full path to your fonts folder you just created (for example http://mysite.com/wp-content/fonts/).
  4. Click Download files button to download selected Google fonts to your computer.
  5. Extract the download, and upload Google font files to wp-content/fonts/ directory you created before.
  6. Copy CSS from Google Webfonts helper tool – it will be ready to use in your website.
how to host google fonts locally in wordpress and genesis framework

Now there’s one final step needs to be done. Go to Appearance >> Theme File Editor, and open style.css file of your Genesis Sample theme. Then paste previously copied CSS code to the theme’s style.css file. Paste it somewhere at the top, before body and other styles.

To make sure changes are loaded in your browser change Version number at the top of the style.css file to any larger number (for example from 3.4.1 to 3.4.2) and click Save changes.

host google fonts locally in genesis

Once it’s done your Genesis Sample theme will use Google fonts hosted locally in your server.


Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials

Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK