1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)

HOW TO USE GOOGLE FONTS WITH WORDPRESS WEBSITE EASY TUTORIAL

Want to use Google Fonts with your WordPress website. This tutorial makes it easy and shows you how to get it set up with your site.

To use Google fonts type in “Google Fonts” in the Google search engine. You will see a link that takes you to the font section on Google. What you see in the video is a little different then what you see in the font section now. It will still work the same way though.

Using Google Fonts *

In the top right section of the website you will see a search bar. You can use this to search for a particular font that you would like to use.

Google Fonts Search Bar

You will see that underneath the search bar on the right you will see your categories. You can check and uncheck the boxes to narrow down your search.

Font Categories

You will have a lot of other options below the categories. There are a number of different options here. The best thing to do is experiment with it to get the font that you want.

Testing Your Font *

While you are in Google fonts you can type in the boxes to test the font. In order to see what a particular text will look like just start typing in the boxes. Here you can see that I typed in the box.

Type in box to see style

Getting Scripts To use Fonts *

Now you want to be able to use this style of font in your website. The first thing that you will do is hit the red circle with a white plus sign.

adding a font

You will see at the bottom of that page “1 Family Selected”.

Font Added

When you click on that big dark box, it will spread out and you will see several options. We will discuss one option.

Font Options

Adding Google Fonts To WordPress *

In the example above we are using the Roberto font. So we need to copy the script and put it on our header. So highlight the entire script that you see in the box to embed the font. It looks like this.

Font Script

Make sure you copy from the less than “<” sign clear to the greater than “>” sign. Now we will navigate to our WordPress dashboard an insert the script.

Putting Font Script Into WordPress Header *

Now that we have our script go to your WordPress dashboard. Go to “Appearances” then “Editor”. If you get a warning that you should not go any further ignore it. You want to look over to the right hand side of the page. There you will see a list of files. The file that you want to edit is header.php. You can see the header.php in the graphic below.

Find header.php to insert font script

Once you see header.php then click on it. It will open up that file so you can edit it. Look for the <head> tag. You will insert that script that you got from Google fonts right after the <head> tag. You can see an example of this in the graphic below.

Insert Font Script After Head Tag

Now you want to scroll down and update the file.

Update Header.php

Now you are ready to begin using your new font.

Changing The Font in WordPress *

Now while you are in the file system in your dashboard go to style.css on the right. You can see it under theme files where you got the header.php file.

style.css file

Click on style.css and it will open your stylesheet for your website. When the file opens you will see a lot of style sheet coding. You will want to hit “control f” on a windows machine or “command f” on a mac. This will bring up a search bar that you can type in. You can see in the graphic below that I search for title so I can change the font style on my title.

Changing Font Style on Title With Google Fonts

Now in order to actually change the font style on my title I need to add the code from Google fonts. So I will copy the font-family and insert it into the command line for title. Here is an image of what I need to copy.

Google Fonts Code

I will use it in the code for the title like this. Notice I inserted the code before the last curly bracket “}”. Make sure you do this or it will not work.

edit css to use new font

Now you want to update your style.css file.

Update style.css File

Conclusion on Google Fonts With WordPress *

There are different plugins that you can use for Google Fonts as well. However you do not want to use too many plugins in your wordpress if you can help it. Sometimes those plugins themselves are a lot more complicated than just learning to do it the right way. I hope this tutorial helped you. Feel free to comment below.

HOW TO USE GOOGLE FONTS WITH WORDPRESS WEBSITE EASY TUTORIAL was last modified: October 31st, 2018 by Maximus Mccullough

Google Fonts With Wordpress

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.