Adding Google Fonts to WordPress can be a great way to have your website stand out against your competitors.
Some themes already embed Google Fonts directly, but others still don’t.
If your theme doesn’t come with a Google Fonts integration, don’t worry!
This tutorial got you covered:
Luckily, you don’t need to be a developer to add custom Google Fonts to your WordPress site.
You don’t even need to write a single line of code.
However, adding Google Fonts to WordPress is fairly simple when coding it; it would just require a few lines.
But I won’t bother you with that code because there’s an amazing plugin handling everything for you:
Enter Easy Google Fonts:
Install Easy Google Fonts from the WP repository
You can install that plugin from the WordPress repository, by searching for “Easy Google Fonts”.
After you installed it, you’ll see a new menu item in the Customizer for your theme:
The new Customizer menu
In that menu, you can select the fonts you want to change: paragraph text, headings, etc.
Here's where you add Google Fonts to WordPress
Now what you can easily do is to click on “Edit Font” for the element you want to change, and then select the Google Font you want to add to your WordPress.
Change the fonts to Google Fonts
As soon as you select a new font, you’ll see the live preview on the right side update.
You can use the live preview just like your normal website, navigate through it, and open the page you want to test.
This process should work with most Genesis themes (and also with other most themes).
If you experience issues with Google Fonts not showing or updating on your WordPress site, please consider this part tutorial.
Warning, you will need to touch a bit of code - but at a level that you’ll be able to handle without being a developer.
Easy Google Fonts allows you to add fonts to your WordPress site using custom selectors.
A selector tells your website how to style a certain element.
Let’s have a look at the selector for the blog headings on my WordPress site:
The CSS selector for the blog headline
Open your website in Google Chrome, and then right-click on the element you want to modify.
Choose “Inspect Element” from the context menu.
The element inspector will show you a similar view to what you can see above in my screenshot.
I highlighted the elements that are important, which are one <h2> tag and a <a> tag
This is HTML, so let me explain:
<h2> marks a headline; it’s the second most important headline on a website. You can use <h1> (most important) to <h6> (least important).
<a> is a hyperlink; in my case it’s the link to the blog post that opens when you click on the headline.
Still with me?
In the screenshot, you see that the <h2> element has a class “entry-title”.
This class depends on the theme I’m using, and might be a different class for you.
The second code snippet (the one to the right) I highlighted in the screenshot is the CSS selector that specifies the headline on the website.
You’ll need this element to configure Easy Google Fonts accordingly.
In this case, you’d have to copy: h2.entry-title a
Got your selector?
Then you can go back to Easy Google Fonts and open the settings page for the plugin at “Settings” -> “Google Fonts”.
Here you can specify custom font controls.
In my case, I created a new font control called “Post headings in the blog” and pasted the CSS selector in the respective field.
Create a custom font control
After saving this font control, you’ll be able to use it in the Customizer at “Appearance” -> “Customize” -> “Typography”.
If you encounter any problems following this process or have questions about it, please leave a comment on this post!
Enjoy your custom Google Fonts,
Jan
