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.
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.
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.
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.
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:
select font family on the left
select charsets, font styles.
Under Copy CSS window there is Customize folder prefix field. Enter full path to your fonts folder you just created (for example /wp-content/fonts/).
Click Download files button to download selected Google fonts to your computer.
Extract the download, and upload Google font files to wp-content/fonts/ directory you created before.
Copy CSS from Google Webfonts helper tool – it will be ready to use in your website.
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.
Once it’s done your Genesis Sample theme will use Google fonts hosted locally in your server.