How to Easily Use Any Google Fonts on WordPress

 

Google fonts wp integration

“Which is the best source on the web for diverse font collections to use on my blog?” If you ask this question to any of the website designers, developers, they yell GOOGLE FONTS, questioning your horse-sense.

Google fonts boast the collection of the best fonts around the web, which can be easily integrated with sites and blogs.

In this post, I’ll show you how to use Google fonts with WordPress.

Let’s get started.

Chances are there, that you are here, you have chosen the font to be used on your site and don’t know how to integrate that font with your site.
If you are here still struggling to find the best font to use on your site, then I recommend you to look at these resources.

Once you choose the best font combinations to use on your site, search for the font.

Here let me take an example of the font, Josefin Slab.

Google fonts

Now, on the next page, you will be presented with the font style selection.

Select the font style that’s great in appearance.

Font style

Here, I select semi-bold. Because for a font like Josefin Slab, semi-bold would be great. Normal would be too thin.

Now scroll down.

Font code

Here you come across the code to add to your website. Copy that.
You can also copy the font CSS.

Now you need to head over to the theme files in your WordPress.

Go to header.php

Now search the <head> tag.

Just below the tag, paste in the code that you’ve copied before.

Header file google fonts

Save the theme file.

Now you’ve imported the Google font to your site. it’s now the time to use it.

This process involves editing your CSS code.

This depends on, whether you are using the font only for your main paragraph content or throughout your site.

Here I’m explaining you to change font only of your main content.

Here’s the dirty little hack.

Head over to one of your posts. Right click on it. Select inspect element.

Inspect element

Now select the little search icon on the top left corner of the inspect element window.

Css before

Select a paragraph in your blog post.

Scroll down the CSS section at the right of your inspect element window.

Here, you can see the CSS associated with your current font.
Css after
Edit this. And add the CSS associated with the new font.

Here you can preview the new font on your site.

Now you need to head over to the theme file (most of the times style.css). Search for the old font CSS code and replace it with new font CSS code.

Change css

Now save the changes.

Visit your blog. You can notice that the font family of your blog has been changed.

If it has not been changed, it may be because of cache issues only on your browser. You can solve it by force refreshing. (CTRL + F5)

You can follow the same for changing the font of your headings, title, blockquotes, etc.
Just inspect element the portion of the test that you want to change.

 

Heading font
Changing the font of headings

This is how you implement Google fonts on your site.

If you have encountered any issues, let me know.

DISCLOSURE
This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

3 thoughts on “How to Easily Use Any Google Fonts on WordPress”

  1. Hello Akshay,

    There is also a plugin called “Easy Google Fonts.” It helps to Adds Google fonts to any theme without coding. It’s compatible with any theme and integrates with the WordPress customizer so that you can preview fonts on your site in realtime.

Leave a Comment

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.