In this tutorial we will see how to customize Storefront using any typeface selected in Google Fonts.
Google Fonts fonts in Storefront
As you surely know, Google Fonts is a free-to-use tool where all kinds of fonts are stored, which we can use on a website simply by adding its reference code to the site’s style sheet.
In this directory we can find hundreds of families from different sources, so it will be very useful when it comes to customizing our sites. In fact, some of the fonts it contains have achieved considerable notoriety, such as Lato, Noto Sans, Roboto, Open Sans or Raleway.
The easiest way to do it is with the plugin that we see in , but if we want we can do it with a little more work, because in this tutorial we are going to see how to use any font from Google Fonts in the Storefront theme or a child theme of the same. Go for it!.
Get link to import source
As we did at the time with him, the first thing we have to do is get link to import source or fonts that we want to include on the page. This same link will be the one we add to our site later.
To do this, we will open the website and click on the “+” sign of each of the fonts that we want to use.
When we finish, we will go to the bottom of the page where a new window will have appeared, “Family Selected”, in which the chosen sources will have been saved. We have to display it and go to the “Customize” tab in case we want to add variants for each type of font.
At the end we will return to the tab open by default, “Embed”. In the “Standard” option we will find the link that we have to use on our website to include the selected sources, so we are going to copy it. We can temporarily paste it into notepad or a similar application if we want so that it doesn’t get lost.
That code will be all that is necessary to display the font on our website. Sounds like magic, right? 🙂
Add new typeface Google Fonts
Well, once we have the link to carry out the import, we are going to see how to add the new fonts in Storefront and later we will see how to replace the predefined fonts in the template with those selected in Google Fonts.
So let’s go with the first step. To add the sources we will use a small code snippet, which, as we have done on other occasions, we will include in a utility plugin that we have installed. If you need more information you can take a look at the tutorial on .
Well, we are going to go to the WordPress desktop, “Plugins” and deactivate it. Later we will have to access via FTP to edit it, we can also do it through the file manager of our hosting, but it is usually more comfortable.
The code that we have to add will be similar to the following. Once we do, we have to save the changes and return to WordPress to activate the plugin again and make them take effect:
// Add Storefront font function bld_add_google_fonts() { wp_enqueue_style( ‘bld-gfonts’, ‘//fonts.googleapis.com/css?family=Lora|Poppins:100,200,400‘, array(), CHILD_THEME_VERSION ); } add_action( ‘wp_enqueue_scripts’, ‘bld_add_google_fonts’ );
Well, do you remember the import link that we saved in the previous section? Well, you have to replace the part that corresponds to the font that we are using in this example for the one that appears in your LINK.
Perfect. We have already added the new source, it should work right? Well, actually there is only one last step left. We must indicate in our style sheet that we want to use these fonts. Let’s see how to do it.
Replace font in Storefront
So far we have seen how to get the link and how to link the chosen Google Fonts to our theme. Now we have to see how use those fonts.
To do this we could directly change the code in the Storefront style sheet, but it is not highly recommended because we could lose the changes in an update, in the same way we could do it in the customize theme. But this time we are going to use a very simple free plugin that we will find in the repository and that is called .
This plugin allows us to add custom styles and cancel those that come predefined in other plugins or themes that we have installed. As always, we will have to go to the WordPress desktop, “Plugins/Add new”, insert its name in the search engine and, once located, install and activate Simple Custom CSS.
Next we have to access the option that interests us. We can do it from the list of plugins, by clicking on “Simple Custom CSS/Add CSS” or from the WordPress desktop by clicking on “Appearance/Custom CSS”.
Here we can include the changes we want and, since they are not linked to the theme itself, we will not lose them even if we change the template. The code we will use will be the following:
body, button, input, texarea { font-family: ‘Poppin’, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: ‘Lora’, serif; }
Finally, there is something else to consider. This code is valid in this case, however if we have a Storefront child theme active it could be that the fonts defined by default in it are also used in other classes, identifiers or HTML elements, so each case should be reviewed concrete and maybe make some tweaks to the CSS code.
Once we have added the CSS code we need, we simply have to click on “Update custom CSS”, and that’s it. We’ll look at this:
Let’s see our theme with the new fonts, just installed:
It is done! Do you see how simple? In this way we can customize the theme using any font we want from all those available in Google Fonts.
Summary and conclusion
Changing the default Storefront font to one from Google Fonts requires several steps. First we will have to choose the fonts and get the link of them to use them later.
Then we will add these fonts in our theme code, and finally we will replace the predefined fonts with the new ones in the style sheet using the Simple Custom CSS plugin.
And that’s all! As always, we recommend the . You have available the and where you will learn to customize the theme to give it an aspect that fits what you need. If you subscribe you will have access to these courses and others, there are 6047 videos available with step by step explanations 🙂
Facebook Comments
Disqus