Sometimes you visit a site and immediately see something you like. A sidebar, a theme, or a font and think to yourself “How do I get that on my site?”. In this tutorial, I show you how to add Google fonts to WordPress with or without a plugin. Let’s get started!
Step 1: Find the Google Font
All Google fonts are searchable at this URL:
https://fonts.google.com
On the top right-hand corner of the page, you will see a search bar as shown here:
Search for the font you want and it’ll appear as a result dynamically. In this example, I’m searching for “Roboto Slab”. When you identify your font, click the “plus” button as shown in the image above. This will add it to your collection. In our case, we want just one font.
Step 2: Get the Code to Insert into the Website
Once you’ve added the font, look at the bottom of the screen. You’ll see a black bar showing the number of font families you’ve selected:
You can expand this bar by clicking anywhere inside it. Upon expansion, it will present you with two pieces of code as shown here:
These two pieces of code are the following:
- A “link” tag that goes into the <head> part of WordPress
- A style tag defining the style
Let’s see how to insert both of these into WordPress.
Step 3: Insert the First Piece of Code into <head>
Normally, the regular way to do this is by using a plugin. The one called “Insert Headers and Footers” is a pretty useful one to have if you need more than just one snippet of code. You can also use it for Google Analytics or other other snippets.
But what if you don’t want to use a plugin? Here are a few options:
Option 1: Check if your Theme Allows you to Add Scripts
Some themes have built-in options that allow you to add code to the header and footer. For example, the Genesis framework lets its users insert header and footer scripts as shown here:
If you’re lucky enough to use a theme like this, great! Add the first piece of code into the header section. If not, use option 2.
Option 2: Add Code to WordPress
The second option is to add the code into the WordPress “functions.php” file. Or even better, add it in a custom plugin that you use for all kinds of code snippets. I highly recommend the second option over the first, for reasons mentioned in the linked tutorial.
But whatever method you use, here’s the code you need to insert:
function add_font() {
$font_script = <<<'EOD'
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
EOD;
echo $font_script;
}
add_action('wp_head', 'add_font');
Replace the section in bold with the code you get on your screen. It’s very important that you copy/paste this code exactly as shown. Don’t indent the lines or anything. Just replace the line of code in bold with the one shown in Step 2 and you’re done.
Step 4: Add the Second Piece of CSS Code
This step is easier than the one before it. Go to your WordPress dashboard and click “Appearance->Edit CSS” as shown here:
This will take you to your theme customization page where you can insert all the CSS you want. Now add the following:
p {
font-family: 'Roboto Slab', serif;
}
As before, replace the code in bold with the second piece of code you got in Step 2. This CSS applies the font to all paragraphs. If you want to apply it to something else, you need to modify the CSS rule to make it happen.
Publish your changes and you’re done! You will now have the appropriate Google font on your website!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Excellent article Bhagwad. It works great and fortunately my theme has both spots in theme manager to add both pieces of code. Hey one question!
Is there a way to make the new font show up on just one page or even just one paragraph? Wow that would be totally awesome for landing page development!!
p.s. I’m a NameHero user. It’s the best hosting on the web
You could use the custom HTML block in your WordPress post editor to add the CSS. Give the paragraph a separate class name, then add the CSS for that class.
In fact, I think I’ll write a tutorial for it with screenshots, so everyone can see!