How To Add Google Fonts To WordPress
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!
All Google fonts are searchable at this URL:
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.
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.
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:
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.
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:
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.
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:
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!!
Step 1: Find the Google Font
All Google fonts are searchable at this URL:
https://fonts.google.comOn 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!!
Updated on: 10/10/2024
Thank you!