You will notice that most of the Genesis child themes on the market will be using google fonts. This is mainly because the fonts are free and take only a fraction of a second to load and as they are hosted with google as are now so widely used.
Adding google fonts to your Genesis site
There are two ways you can do this (the @import way no longer works since the release of Genesis 2.0).
The Easy Way
The first way is the easy way, but is not the optimum way. Simply add the line of code which you find on the google font page into your header.
You do this in Genesis by going to ‘theme settings’ and then scroll down until you find the box titled ‘Header and Footer Scripts’. Then paste the code into the first box.
Here is what the page on google fonts looks like and where to get the code from.
The second part I have circled is the CSS which needs to be added to your stylesheet. In this example, if we wanted to add the new Open Sans font to our body text. We would make sure our stylesheet included this;
Almost insultingly easy, no?
The Optimum Way
As said before, most of the Genesis child themes come with google fonts already built in. It is likely that you are wanting to either replace these fonts with other fonts or to add a few more and continue to use the ones built in.
The problem with the easy way is that with each extra line of code you are adding, an extra http request and slowing down your site that bit more.
First you need to find the piece of code inside your theme’s functions.php file which is already enqueuing the google fonts. If you search for the term “google” or “font” in the code it will lead you straight to the right place and should be pretty obvious from just looking.
For example, in minimum pro, after searching inside the functions.php we find this piece of code;
We can see the first part is relating to the responsive menu. We don’t want to change that. Underneath you can see the google font code. You can clearly see two fonts in use, Roboto and Roboto Slab.
Take notice that the space in the name of Roboto Slab is filled with “+”. The “:300,400” are the font weights and “|” is used as a separator.
If we were wanting to replace the Roboto Slab font with Open Sans, we could change that line of code to the following;
Then you just add the required CSS like before.
Changing Fonts With a Plugin
If you’re looking for a quick way of trying out lots of different google fonts to see which you prefer, there is a plugin, Easy Google Fonts, which helps you try different font combinations in real time.
To get this to work with your Genesis child theme, you need to first set up which elements on your page you want to change. In most Genesis themes, there are two fonts active. One for the body text and one for all the headings.
In the plugin settings, create two controls. Here is a screenshot for each control.
After saving these settings, you can then go to the WordPress customizer and change the fonts in real time.