How to Add Google Fonts to a WordPress Site
Design plays an integral part in any website’s success; it attracts visitors and customers to your website and increases user engagement. Similarly, typography plays a vital role in your design, which makes it a lot easier for your readers to read and explore your website.
There are a lot of ways to enhance your website design, but the easiest way to use a variety of fonts on your website is via “Google Fonts.” It is an open-source Fonts library where you can use hundreds of beautiful fonts.
In this article, I’ll go through a step-by-step guide on how to add Google fonts to a WordPress site.
So let’s get started!
Add Google Fonts to WordPress – Manually
There are two methods to add Google fonts to your WordPress site:
- Add Google Fonts to WordPress Manually
- Add Google Fonts to WordPress via Plugin
The manual approach needs some coding to embed Google fonts to your WordPress site. This approach is the optimized way to add Google fonts, as it will have no effect on your site speed. Visibly, it looks difficult because it includes some lines of code, but trust me, it’s simple, and all you have to do is follow the below-mentioned steps.
1. Find the Google Font for WordPress Site
The first step is to find the Google font that you’re looking for your website from the fonts library. For example, if you want to add Roboto Google font to your WordPress site, type Roboto in the search box.
If you haven’t selected any font yet, then you can check and preview all the fonts here. Thanks to Google, which allows us to use its interactive library, it makes it a lot easier to choose from its fonts list.
Also, you’ll find different filters that’ll help you to find the most elegant font for your WordPress site.
On the top left, you’ll see three drop-down filters: Categories, Language, and Font Properties that comprise different filters. Using these, you can find the font that best suits your website.
2. Select the Google Font
Now select the Google font by clicking on the plus icon (+) in the top right corner of the font family box.
You’ll see a font-family collection drawer in the bottom right of your browser, as shown in the image below.
You can choose multiple fonts for your WordPress site, by clicking on the plus icon (+) of each font after which they’ ll appear in the “Family Selected” tab.
3. Customizing the Google Font
You can customize your fonts by opening the “Family Selected” tab and then clicking on the Customize button.
On the Customize tab, you’ll see different font styles. Next, select the styles that you want to embed on your WordPress site.
On the top right corner, you’ll see a Load Time tag that indicates the impact of adding this style selection on your site’s load time.
The green signal on the top right indicates that embedding this style selection will not hit the site load time.
If you select more than two styles, the Load Time tag will turn red which indicates embedding this style selection will make your site speed slow.
Try to use lesser font styles in order to make site speed faster.
4. Embedding Google Fonts to Your WordPress Site
Next, you need to embed the selected font styles to your WordPress site. Click on the EMBED tab and copy the URL as shown in the image below.
The URL will look something like this: https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap that you need to embed in the WordPress site.
Next, open your WordPress Dashboard > Appearance > Theme Editor > Theme Functions (functions.php).
Next, copy the following code and paste it on theme functions (functions.php) files and click on Update File.
function wpeka_add_google_fonts() {
wp_enqueue_style( ‘ wpeka_google_fonts ‘, ‘ https://fonts.googleapis.com/css?family=Roboto:300i,400&display=swap ‘, false );}
add_action( ‘wp_enqueue_scripts’, ‘wpblog_google_fonts’ );
Note: This is a Roboto font URL link in the above code. You need to replace the font URL link with your own.
If you want to use this font only for your H3 headings, then you need to specify it through the CSS following in the style sheet.
h3 {
font-family: ‘Roboto’, sans-serif;
}
You’ll find this CSS rule at the bottom of the “Family Selected” tab.
In this manual method, we’ve discussed four steps and learned how to embed the Google font to our WordPress site.
Add Google Fonts to WordPress with Plugin
If you don’t want to use a manual method then there are several plugins out there. Using these plugins, you can easily add Google fonts to your WordPress site.
I’ll use the Google Font Typography plugin to demonstrate this method.
So, let’s begin.
1. Install and Activate the Plugin
First, you need to install the plugin and for this, Go to Dashboard > Plugins > Add New then type Google Font Typography in the search bar of your WordPress site.
Next, click on Install > Activate it.
2. Setting Google Fonts
Next, Go to Installed Plugins and click on Google Font Typography Settings. Then, you’ll land on the customized screen.
To add Google fonts, click on the Google Fonts tab. Under Basic Settings you’ll see 3 different font configurations:
- Base Typography – This will add Google font to your content.
- Head Typography – This will add Google font to your headings.
- Buttons and Input Typography – This will add Google font to your buttons and input fields.
Now, just click on the drop-down list and use your favorite Google fonts on your WordPress site.
You can follow the same process for the advanced tab.
Final Words
In this tutorial, we’ve covered two methods to add Google font to your WordPress site. First is the manual approach where you embed a Google font code into a Function. And the second via a Google font plugin.
If you’re working on localhost and your site is ready now. Then learn how to migrate a WordPress site from localhost to a live server.
If you have any questions, drop them in the comments below.
Leave a Reply