How to replace Google fonts with native system fonts in Genesis Sample theme

If you just started using Genesis Framework and Genesis Sample theme you probably noticed that Genesis uses Google fonts by default. And there’s nothing wrong with that – most Google fonts look attractive and they are easy to integrate to any website.

But not everyone is a fan of Google fonts, and there are couple of reasons for that. First – loading Google fonts from Google servers adds additional milliseconds to website’s loading speed. It’s not bad, but if you’re going for maximum performance removing Google fonts is a step forward. Second reason – some website owners don’t like calling to Google servers for privacy concerns. That’s debatable, but it’s still a thing to consider.

Today I’ll show you how to remove Google Fonts from Genesis Sample theme, and how to replace them with native system fonts (or any other fonts you’d like to use in your website).

By the way, if you want to replace default Google Font used in Genesis Sample theme with another Google font, click here.

How to remove Google fonts from Genesis Sample theme

By default Genesis Sample theme uses Source Sans Pro font which is loaded from Google’s servers. In order to remove it from the theme you need to click Appearance >> Theme Editor in WordPress admin panel, and open config >> appearance.php file.

Look up for line starting with ‘fonts-url’ (line number ~30), and remove it.

The result should look like this:

That’s half job done – Google fonts will not be loaded in your Genesis Sample theme anymore. Now we need to replace Google fonts with some other fonts in css stylesheet.

How to replace Google fonts with system fonts in Genesis Sample theme

Once we removed the code which loads Google fonts in Genesis Sample theme we need to add another fonts to a style.css file as well. Again, go to Appearance >> Theme Editor, and open style.css file. Look for “Source Sans Pro” in the file.

You’ll find it in two places. First – in body tag.

Second – in headings.

If you want to replace Google fonts with system fonts you need to replace both those lines:

font-family: "Source Sans Pro", sans-serif;

with this code:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

This line will replace Google fonts with any font that is available in your computer or smartphone from the font list you just added to WordPress website. For example, if your laptop runs Mac OS it will load Apple system fonts. If you’re running Windows, your computer will show Segoe UI font in the website. If you’re running other OS your website’s fonts will be the first font available from the list.

One more thing – to make sure that changes are loaded in your and your website visitors’ browsers change version in style.css file to a bigger number – for example from 3.4.1 to 3.4.2 . This will force browser to reload style.css file with the latest code.

The result of all these changes will be slightly faster loading time of your WordPress website, and one less resource loaded from external sources which is great for website speed, privacy and security in general.