Adding non-standard fonts to your site is one of the fastest ways to make your design POP! The Easy Google Fonts Plugin makes it really easy to do that.
You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.
First, you need to install a plugin. Go to Plugins and click on Add new.
In the search box, type in ‘Easy Google Fonts’ and press enter.
Click on Install Now and Activate to add the plugin to your WordPress site. There are other plugins which are also quite useful but for the purpose of this tutorial, we’re going to be using Easy Google Fonts plugin by Titanium Themes (link to the plugin page).
Once activated the plugin adds a new item inside the Settings menu called Google Fonts. Click on it to set the font controls.
Setting font controls means adding CSS selectors to the font style you selected. This may seem confusing at the moment, but it will become a lot clearer in a moment.
First, you need to set the control name. At the upper part of the page, there’s a small box where you need to put in a control name. For this example I’m using paragraph as the control name.
Once you have the control name, click on the Create Font Control button.
The next part is to add the CSS selector that font style is going to be applied to. Since it’s a paragraph, it’s going to be applied to the p tag. Type in the letter p and hit tab. It adds a small box and you can exit out of it if you press on the small x besides the letter p. It will be useful if you check the force styles override box just to avoid ‘fighting’ with theme styles. When you’re done, click on Save Font Control.
You’ll see a message on the top of the page saying that the paragraph has been updated and that you should visit the customizer to apply the style and manage the control you created.
Before we do that, a couple of words about the other tabs. The two tabs are for management of the font control and the other one is used for advanced options.
The advanced tab offers the option of adding the Google Fonts API key. This API key brings you automatic updates of your Google Fonts. You can check out how it’s done at 2:16 of the video tutorial.
Now let’s move on to the customizer.
Click on customizer to manage the created control. Or, if you are unable to find the customizer link in this message, go to the Appearance menu and click on Customize.
This will open the WordPress customizer. The next step is to click on Typography and then on Theme Typography.
You’ll see the control group you’ve created a couple steps before. In this case, the paragraph will have some text so you can see how the plugin actually works.
Now click on the Edit Font drop-down menu. Once you click it you’ll see a lot of options in there.
Three different tabs regarding are revealed called Styles, Appearance and Positioning. Each one of them has numerous options and settings thoroughly analyzed in the video tutorial. So if you want full detail watch that.
When adjusting the options inside the first tab, you can transform the text, decorate it, change the font in various ways or set the Script/subset.
The other tab is pretty much self-explanatory and it is used to adjust the font. You’ll notice that the text on the right-hand side changes in real-time.
The styles don’t take effect on the live site until you save in the Customizer.
The final tab allows you to position the text, change the margins, padding, add a border and many other cool things.
Making these changes is super easy and the best thing is that you can see the updates in real-time.
All you need to do when you’re done editing is to click on Save & Publish button. Now the changes are live.
Google Fonts Advanced Stuff
You don’t need to do this stuff but it’s cool to know what can be done. I’m going to show you how to change the font of the homepage text, or the one in the footer.
To do this, you must find out what CSS selectors apply to them. Right-click on the Homepage text for example and click on inspect, inside the code, you’ll see that it’s a heading class – h2.
Changing the heading font can be done in two ways. You can go back one step in the Customizer and instead of selecting theme typography, select default typography and then select which font you like.
You can also avoid the default fonts. To do so you need to create a new font controls like we did at the beginning of the tutorial.
In these case I’m going to name it Heading 2 and add an h2 CSS selector.* (*In this case it’s h2, it can be anything that turns up inside the inspector).
The rest of the process is exactly the same as the process for editing the Paragraph font.
And that’s how it’s done! I hope this tutorial helps you.
For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.