Your website’s typography is very important, therefore you should choose fonts carefully.
Nowadays, the vast majority of web developers use Google Fonts for a site’s typography because it’s free, fast, easy to implement, and currently has over 900 fonts in its library.
Most WordPress themes will come with a built-in Google Fonts feature, but if yours doesn’t, then you can use a simple plugin that I’ll present below!
Using the Easy Google Fonts Plugin for WordPress
You can watch the video for a quick guide or read the post for more details and to learn how to use the Font Control feature.
Install the Easy Google Fonts plugin.
From inside your Dashboard, go to Appearance > Customize > Typography > Default Typography.
Choose the font for your paragraphs and headings.
I don’t recommend choosing more than two fonts, one for paragraphs and one for headings.
Let’s take the Paragraphs section as an example. It’s the same for the rest.
Once you click on the Edit Font button, you’ll get 3 main tabs, each with different settings.
You can check all of them out and preview them in real-time. The changes won’t take effect until you click the Publish button in the Customizer.
- Script/Subset – lets you choose from Latin, Arabic, Cyrillic, and more;
- Font Family – here’s where you select Google fonts from;
- Font Weight/Style – lets you choose if you want the text bold, italic, and so on;
- Text Decoration – here, you can add an underline, line-through or overline;
- Text Transform – you can capitalize the text, make it lowercase or uppercase.
Here, you can select the font’s color, background color, size, line height, and letter spacing.
In the Positioning section, you can customize the font’s margin, padding, border, border radius, and display.
You should let Display set to Theme Default.
Using the Font Control Feature (Optional)
Go to Settings > Google Fonts.
There, you’ll notice that the plugin has an extra feature called Font Control.
This is useful if you want to add a different Google font for a specific element or section on your WordPress website.
For example, if you have a call-to-action box, and you want it to have a different font style than your paragraphs and headings, you can create a Font Control for it.
Enter a Control Name and click on Create Font Control.
You’ll need to add the CSS Selector(s) (class or id) that handles the element you want and click on Save Font Control.
Now, I can’t exactly show you how to choose the right CSS selector because it depends on what element you need the font changed.
It’s not a one-size-fits-all method for this one, unfortunately.
The way to start is to right-click exactly on that element, select Inspect or Inspect Element (depends on the browser), make sure it’s highlighted, and search for the correct class or id inside the window with the source code.
Something like this:
Go to Appearance > Customize > Typography.
You’ll notice that a new section appeared, called Theme Typography.
That contains the Form Controls that you create.
As you can see, there’s my Form Control, which I creatively named Example Font Control. :)
Now, you can add a different Google font for that specific element.
Support the Developers
If you like the plugin and use it, you can consider donating to the developers by clicking the Donate to this plugin button found at the bottom of the sidebar, on the plugin’s page.
That’s a Wrap
I hope you found the post useful and managed to add Google Fonts in WordPress!
If you need help setting up your WordPress site, my WordPress installation service is at your disposal!
On-going WordPress support and maintenance services are on the menu as well!
You can quickly subscribe to my newsletter by using this link.
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
Don’t forget to share the post to help out others!