How to Use Google Fonts on Your WordPress Website

How to Use Google Fonts on Your WordPress Website

How to Use Google Fonts on Your WordPress WebsiteWhen you’re customizing the design of your website, the first things you probably thought about are colours and fonts. This is because colours and fonts are unique, and fun to choose. But, once you choose your fonts, how do you add them to your website? While there are a few different ways to add fonts to your website, the quickest and easiest way is by using Google Fonts. Here I’ll show you how to add Google Fonts to your WordPress website in no time at all (without using a plugin).

Google Fonts is an online database created by Google, that provides free fonts you can use on your website. Adding fonts to your website using this method is a great option for beginners. The only downside is that because there are only a set number of fonts in their database, these fonts are more common then other custom fonts you can find out there. But, if you find a font you love in Google Fonts and want to use it on your website, implementing it is very simple.

How to Use Google Fonts

To use Google Fonts, the first thing you want to do is go to Google Fonts and choose a pairing of fonts that you like.

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost. Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial.

Step 2

When you find a font you like on Google Fonts, press the red plus sign next to it to add that font to your collection. Then, add all of the fonts you want to your collection so that you can insert them into your website at once. If you want to see more about a specific font, you can click on it to view all the available characters and available styles like bold, italic, etc. In general, you should only choose 2-3 fonts for your design, any more than that will start to look too crazy and your brand won’t be cohesive.

Step 3

Before you can use the fonts, you have to create a header file in your child theme so that you can import the fonts into your design. You do that by logging in through FTP, and copying the header file in your parent theme into your child theme.

The head section of your header file is where all the meta data, or hidden information about your site is brought in. So, the line of code that we are going to put in to tell your website to go to Google Fonts and import these fonts, will go in your head.

Step 4

Now you want to go back to Google Fonts. Once you have all your fonts selected and added to your collection, click the little white line in the black selection drawer at the bottom of the page to open it. The first thing you want to do is click on the Customize tab and make sure you select all the variations of the fonts that you want to include. Only click the variations that you will actually need and use, because importing fonts that you don’t need just uses extra resources and takes more time.

Step 5

Next, go back to the other tab by clicking on Embed and copy the code that starts with link href. Then you want to go back to your header file and paste that code within the head tags. The safest spot is to just hit enter to make a new line right before the closing head tag, and paste it there. Then save that file.

Step 6

Now that those fonts are imported onto your website through the head, you can use them wherever you want. If you look at the Google Fonts page again, you will see under Specify in CSS it tells you what code to write to use those fonts. Each line here is a different one of the fonts you selected.

Copy the line that corresponds to the font you want to use, and then you can paste that into your CSS file wherever you want to apply it. For example, if I wanted to make all the Heading 1s on my website, I would write h1, and then paste that code in for the font I selected.

Step 7

If you wanted to also make those fonts bold or italic, you would look at the customize tab in Google Fonts again, and use those font styles as a reference for the kind of styles you can apply to that font in your CSS.

And that’s it! Applying custom fonts to your website is one of the best ways to make your design unique and really tie your site together with your brand. If the font you want to use on your site is not on Google Fonts, then you need to import the font to your site manually.

4 thoughts on “How to Use Google Fonts on Your WordPress Website”

  1. It looks like step 6 is missing, I have tried to figure out what might be missing but Im just not getting it, Im so thankful that youre willing to be so helpsul with all this information.

    1. Thanks for catching this! You’re right, there was a glitch in the post and some of the text was missing. I’ve fixed it now so you can see all the steps!

  2. Hi Melissa! This has been very helpful in getting new fonts on my website! I’m wondering if you have any suggestions for when the font doesn’t look like the font you added. For example, I am trying to implement Open Sans Condensed and using your steps it changes the look of my font, but it doesn’t look like Open Sans Condensed.
    Thank you!

Leave a Reply

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