If you’re a web developer who strives for better user interface and user experience, choosing the right fonts for your website development project is vital. The choice of fonts may differ depending on the design and theme of your website. Luckily, Google Fonts offers ample options for you to choose from.
So basically, there are three ways to use Google Fonts on your Genesis Theme.
Option #1: Enqueue the code through functions.php
Option #2: Importing Google Fonts link to your child theme’s stylesheet
Option #3: Using a reputable Google Fonts plugin
From all of the above options, it’s always advisable to go with either the first two options as far as possible. Using a third-party plugin is always fraught with security and performance issues.
Up until a few years ago, StuidoPress advised their users to follow the Option #2 method, i.e., importing Google Fonts link to child theme’s CSS. However, they came up with a better idea (Option #2) and advised their users to Enqueue the code through functions.php. However, if you have a high-traffic website, it’s a better idea to following the Option #1.
Loading Google Fonts via Stylesheet
Step #1: Go to Google Fonts page and click on the Quick Use option of your chosen fonts. It will take you to the Developer Guide page. There, you can see the option to add code to your website. Click on the @import option and copy the code.
Step #2: Go to your child theme CSS file and then add the code to the top of the stylesheet. Make sure the code is placed immediately after the style sheet header.
Step #3: In your Stylesheet, define the font in places you want to use it.
font-family: ‘Droid Serif’, serif;
Loading Google Fonts via Functions.php
Open the functions.php in your child theme and look for “Enqueue scripts and styles”. There, you can find the following code:
Note: The above code is present in the Parallax Pro theme which has Montserrat and Sports Mill Goudy enqueued on default. Depending on which Genesis theme you’re using, the fonts could be different. Depending on your needs, you want to either add a few more options to the existing set of default fonts or replace them with your chosen font family names.
For example, if I want to add Arimo and Roboto Condensed to the default fonts in Parallax Pro, the edited code would look like this:
Alternatively, if I want to replace the default fonts with Arimo and Roboto Condensed, the code would look like this:
Note: Since Roboto Condensed are two words, you need to put a + sign with no space. If your font family name consists of three words, you will need to put two + signs with no space and so on. Likewise, you’re putting a | sign between the font family names to separate them from each other. You have to be careful with this or the site can break.
Step #2: As already explained in the previous method, go to your CSS and define the font in places you want to use it.
Hope this was helpful. If you have any questions on this post, feel free to leave a comment and I will get back to you real soon.