Add Google Fonts to Genesis – .com

In this tutorial we will see how to add a Google Fonts font to a Genesis Framework child theme.

Google Fonts fonts in Genesis

Google Fonts is a popular free, interactive font directory made up of hundreds of typefaces optimized for the web. In its catalog we can find all kinds of fonts, from classic to current, which will allow us to easily customize our pages.

In this tutorial we are going to see how we can add some of these fonts to child themes created with the Genesis Framework. To do this we will have to follow two steps.

The first will be to obtain the link of the source to be able to add it later to our website. The next one will consist of importing that code, for this we can choose between two options.

One will be to use the Genesis Extender plugin, a plugin that can be very useful as we will explain later, and another will be through programming. This last option will only require a few lines of code, let’s get to it!

Get link to import font from Google Fonts

Regardless of whether we choose to use a plugin or do it programmatically, the first thing we will have to do is obtain the link to the font that we want to add to our site.

To do this we will have to access and, from among all the available fonts, choose the one/s that we want to include by clicking on the “+” sign.

The selected fonts will be saved in the “Family Selected” window that will appear at the bottom of the page as soon as we click to add the first font.

When we finish adding them, we will have to display said window. We will see that it shows us several sections, the one that interests us specifically is the one that is located under the “Embed/Standard” section, which opens by default, and that contains a link that will help us to import the chosen fonts to our website.

One point here, in the event that we want to import a specific variant of this font, we must go to the “Customize” tab and choose from the available possibilities.

Well, once done, we have to go back to the “Embed/Standard” section, and copy the link that appears under it to be able to use it later on our site. The next step will be to choose the method with which we want to import the new fonts from Google Fonts.

We are going to see two ways, although they are not the only ones, since we could, for example, include the new fonts by adding the “import” directive in our style sheet. That being said, we will first see how to do it through a plugin, and then how we can achieve it through a few lines of code.

Option 1: Add a new font using a plugin

The plugin we are going to use is called Genesis Extender. It is a premium plugin that allows us to customize the design of our site in a very intuitive way while bringing us closer to the code, so it is aimed at relatively new Genesis users as well as those who want to enter the world of programming. or improve your skills in this area.

If you are subscribed to you can download it for free from the “Downloads” tab of the , and also access all the courses, including the , where all the sections of the plugin are explained so that you can get the most out of it.

Once we have it downloaded to our computer, we will have to install and activate it. To do it, as always, we go to the WordPress desktop, and click on “Plugins/Add new”, and then on “Upload plugin”. Then we will select the compressed file, click on “Install now”, and finally on “Activate plugin”.

Once installed and activated, a new option will appear in the WordPress menu, “Genesis Extender”. To enter the configuration screen that we will use in this case, we will have to click on “Genesis Extender/Settings/General Settings”.

From this tab we can modify various aspects of our Genesis Framework child theme. Specifically, we are interested in the section that says “Google Font Control”, from which we can add new sources from Google Fonts to our templates.

This is where the link that we copied in the previous point comes into play. First we will have to click on “Google Fonts”.

A window will open immediately where we can add the mentioned link. Specifically, we will have to paste it where it says “Link Code goes here…”.

Once we have it, we will click on the corresponding option depending on whether we are interested in “sans-serif”, “serif” or “cursive”. What this will do is convert the link we have provided into a code that Genesis can use.

Then we would only have to save the changes, and we would have it ready. By following these simple steps, the new fonts would be included and we could use them at any time in our CSS code to customize our website. Let’s see now the option to add the fonts using code.

Option 2: Add new font using code

If we’re already working with the code and prefer to make these changes without installing extra plugins, we can import the new font directly into our theme by adding a few lines of PHP code.

As we have seen on other occasions, these lines can be included in various ways. In it we treat the same. In this case we will choose to use a utility plugin that we created earlier.

The advantage of using this method is that if we change to another theme we will not lose the code that we include in the plugin since it is external to the template, and it will also continue to work since it is valid for other WordPress templates.

Well, to include the code snippet that we need to add the new fonts we will have to access our plugin through the FTP tool that we use and, with it disabled, include a code similar to the following:

// Add Google Fonts function bld_include_new_font() { wp_enqueue_style( ‘bld-google-fonts’, ‘//fonts.googleapis.com/css?family=Raleway:400,800’, array(), CHILD_THEME_VERSION ); } add_action( ‘wp_enqueue_scripts’, ‘bld_include_new_source’ );

Here we will use only part of the link that we obtained in the first section. Specifically, the one that corresponds to the font import, that is, we will have to replace the code that appears in bold with the one that corresponds to the font chosen in our case, and then save and activate our plugin again.

And that’s it, with this small piece of code we could use any font from the Google Fonts directory to customize our website 🙂

Summary and conclusion

In this tutorial we have seen how to add a new font to a Genesis Framework child theme. The first step is to choose the one we want, select it, and copy the link that will allow us to import it to our site. To do so we have several possibilities, specifically we saw two options.

One is to use the Genesis Extender plugin, which we recommend for new Genesis users or people who want to get into the world of Genesis programming. By the way, if you want to know more about this plugin we explain it in depth in the .

The other option we saw was to use code. In this case, if you are interested in learning to program you can take a look at , and also at .

You already know that if you subscribe you will have access to premium plugins and themes, to the 3 courses, and to those available at . Go for it!