How to add Google Fonts to your WordPress website
Last Updated: August 31, 2020 in Guides
There are many beautiful WordPress themes that you can use for your website. They can be free or premium. After installing and using a theme for a while, you usually customize it to fit your content or make it more beautiful. One of the things that is often customized is font. In this article, we'll show you how to use Google Fonts in your WordPress website. And how to customize font size, font weight and font style to make it look best for your content.
Introducing Google Fonts
While customizing fonts, the most important question is which font will you use? There are many sources for free fonts on the Internet, including Google Fonts, Adobe Typekit, Font Squirrel, etc. However, Google Fonts is the most popular source of fonts nowadays. They offer more than 800 fonts for free. All of them are high quality and easily to embed in any website.
Google Fonts offers more than 800 fonts for free
Google Fonts Features
- More than 800 fonts, all for free
- Support multiple font styles
- Support multiple languages
- Easily to add to any website
- Fast, thanks to Google worldwide network
Without Google Fonts, we have to include fonts manually to websites. This work is not easy for beginners or for people who are not familiar with technical terms.
Adding Google Fonts to WordPress
Adding Google Fonts to WordPress is easy, thanks to plugins. Without plugins, you need to edit your theme directly to embed some HTML/CSS line. Although Google has made it very easy to embed, editing themes directly is discourage. You will loose change when your theme updates.
So, we will use a WordPress plugin to add Google Fonts to WordPress. The plugin is Ultimate Fonts.
This plugin allows you to change font settings to any element on your website without writing a single line of code. It supports all Google Fonts. And you can preview the fonts in the Customizer in real-time.
How to use Ultimate Fonts
After installing the plugin, just go to Customizer → Fonts to change font settings. This panel lists all the available elements that you can change fonts for. By default, there are 2 elements: body text and headings.
Edit fonts for custom elements
Clicking on an element brings you to the font settings panel:
Change font settings for an element
Here you can change:
- Font family: you can select from 800+ fonts available
- Font style and size
- Line height
- Letter spacing
- And text transform
All these settings are applied to your website in real-time and you can preview it on the right panel. With this feature, you're able to select any font, adjust its settings and see what best for your content.
Adding more elements
As you can see, the plugin offers the font settings for body text and headings. What if you want to change font for entry title? Well, you can do that easily.
Just go to Settings → Ultimate Fonts and add new elements.
Adding more elements for font settings
If you're familiar with CSS, you will see this settings page is every easy to use. Simply adding CSS selectors for an element and bump! it's ready to use in the Customizer. If you don't know how to get the CSS selector for an element, this documentation will help.
Conclusion
Changing font is a common task when using a WordPress theme. And Google Fonts seems to be the best source of fonts on the Internet. We hope this tutorial can help you adding Google Fonts to WordPress the simplest way. Moreover, you can even optimize Google fonts on your website to make it load faster following this guide.
If you have any trouble, please leave your comment below. We'll try our best to help.