A tutorial on how to add a google font to wordpress

Learn how to quickly and easily add a Google Font to WordPress in under five minutes. Read on to discover how easy it is!

What are Google Fonts?

Google Fonts are an enormous collection of royalty-free fonts, provided by Google, that allow you to add custom font faces to your WordPress site.

What’s great about Google Fonts, is that they are hosted on Google’s servers, and so the time to load each font when a user lands on your page is significantly reduced.

A faster load time means a better SERP position and better SEO scores. You don’t want a slow loading site!

Browse the Google Fonts Collection

If you’ve already chosen a font that you like from Google Fonts, you can skip this step.

If not, navigate to Google Fonts and take your time choosing a font. There’s an impressive amount of them to choose from.

I use Lora on SitesMonster. It’s a serif font, and looks fantastic when used for headings!

The google fonts dashboard showing a collection of fonts

Select a Google Font and Copy the Embed Code

Once you’ve chosen the perfect font for your site, left-click it.

A google font highlighted in red

You will now see the individual page for that font, allowing you to choose multiple styles of that font.

A font style is the different weight of a font. For example, thin, regular, or bold.

Click on the styles that you wish to incorporate into your site. A sidebar will appear from the right-hand side.

Click the Embed tab.

The Google Fonts page for Open Sans

You will see two grey boxes of code that look similar to these:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

and…

font-family: 'Open Sans', sans-serif;

So what are they?

Well, the first is the code to actually add a Google Font to your WordPress site.

The second is the CSS code that tells the site which HTML element tags should use that specific font face.

Add the Google Font to WordPress Functions.php

So now that we’ve browsed the Google Fonts collection, selected a font, and copied the embed code, we can add it to our WordPress site.

There are two methods of adding a Google Font to WordPress

  • Pasting the embed code directly into header.php head tags.
  • En-queuing the script via the functions.php WordPress file.

The first method is easier, but is slower and therefore not recommended.

It’s always much better to do things inside of WordPress the way they were intended.

WordPress has a special theme specific file called functions.php that executes PHP code. We can use this file to add a Google Font to WordPress.

Open your functions.php file inside of your WordPress theme folder. If one doesn’t exist, you can create a new one at the root level of the theme folder.

Add the following code to functions.php:

functions.php
<?php function main_script_create() { wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap', true ); } add_action('wp_enqueue_scripts', 'main_script_create');

Now, copy only the URL of the Google Font that you want to add to your WordPress site.

This part:

https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap

and paste it where I have a similar looking URL in the example above. The example above is enqueuing the Lora font.

Modify Your WordPress Site’s CSS File

We’re almost at the finish line!

Open up your WordPress site’s main CSS file, or download a plugin that allows you to add additional CSS styles to your WordPress theme.

Remember that the second grey box filled with CSS code? Go back to that inside of Google Fonts and copy it to your clipboard.

styles.css
h1 { font-family: 'Open Sans', sans-serif; }

Now open up your WordPress site’s CSS file and add the example above to it, using the Google Font you chosen.

The example above tells your theme to use the Open Sans Google Font for all H1 HTML tags.


🚀 Follow My Journey from 0 to 100,000 Monthly Pageviews!

Starting with this brand-new blog, I'm sharing everything I do to get from 0 pageviews to 100,000 monthly pageviews, every step of the way.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

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

We will never share your email with anyone else.