Blogging, WordPress
How to add Google font to a WordPress site

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.

Google Font for WordPress Site

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.

Google Font for WordPress Site

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.

Google Font for WordPress Site

You’ll see a font-family collection drawer in the bottom right of your browser, as shown in the image below.

Google Font for WordPress Site

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.

Google Font for WordPress Site

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.

Google Font for WordPress

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.

Google Font for WordPress Site

Next, open your WordPress Dashboard > Appearance > Theme Editor > Theme Functions (functions.php).

Google Font for WordPress

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;

}

Google Font for WordPress

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.

Google Font for WordPress

2. Setting Google Fonts

Next, Go to Installed Plugins and click on Google Font Typography Settings. Then, you’ll land on the customize screen.

To add Google fonts, click on the Google Fonts tab. Under Basic Settings you’ll see 3 different font configurations:

  1. Base Typography – This will add Google font to your content.
  2. Head Typography – This will add Google font to your headings.
  3. 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.

Google Font for WordPress

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.

Author Bio:

Author Bio: Farhan is a community manager at WPblog. He loves to work with WordPress and has a passion for web development. Mostly, he spends his time interacting with the people in the WordPress community. Apart from his work life, Farhan spends his time gaming and playing sports.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Join Over 50,000+ Subscribers

Interested In
  •   
  •           
  •                      

wp-legal-pages-sidebar-ad-banner
gdpr-cookie-consent-sidebar-ad-banner

Search

Send this to a friend