# How To Add Google Fonts To WordPress Without A Plugin

> Sometimes when you browse a site, you see something that you want on your own! Here's how to add Google fonts to WordPress with or without a plugin.

- Author: [Bhagwad Park](https://www.namehero.com/blog/author/bhagwad-park/)
- Published: 2018-07-09
- Updated: 2018-07-09
- Category: [WordPress](https://www.namehero.com/blog/category/wordpress/)
- Web page: https://www.namehero.com/blog/how-to-add-google-fonts-to-wordpress-without-a-plugin/

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 Roboto Font](https://www.namehero.com/blog/wp-content/uploads/2018/07/Search-for-Roboto-Font.png)](https://www.namehero.com/blog/wp-content/uploads/2018/07/Search-for-Roboto-Font.png)

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:

[![Click to Expand](https://www.namehero.com/blog/wp-content/uploads/2018/07/Click-to-Expand.png)](https://www.namehero.com/blog/wp-content/uploads/2018/07/Click-to-Expand.png)

You can expand this bar by clicking anywhere inside it. Upon expansion, it will present you with two pieces of code as shown here:

[![Google Font Scripts to Add](https://www.namehero.com/blog/wp-content/uploads/2018/07/Google-Font-Scripts-to-Add.png)](https://www.namehero.com/blog/wp-content/uploads/2018/07/Google-Font-Scripts-to-Add.png)

These two pieces of code are the following:

1. A “link” tag that goes into the <head> part of WordPress
2. 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”](https://wordpress.org/plugins/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:

[![Add Google Fonts to WordPress in Genesis Header](https://www.namehero.com/blog/wp-content/uploads/2018/07/Insert-Script-into-Header.png)](https://www.namehero.com/blog/wp-content/uploads/2018/07/Insert-Script-into-Header.png)

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](https://www.namehero.com/blog/where-to-put-custom-code-in-wordpress-hint-use-a-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:

[![Edit CSS](https://www.namehero.com/blog/wp-content/uploads/2018/07/Edit-CSS.png)](https://www.namehero.com/blog/wp-content/uploads/2018/07/Edit-CSS.png)

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!

## Related posts

- [How To Add Google Analytics To Your Site Without A Plugin](https://www.namehero.com/blog/how-to-add-google-analytics-to-your-site-without-a-plugin/)
- [Add WordPress Snippets Using The WPCode Plugin](https://www.namehero.com/blog/add-wordpress-snippets-using-the-wpcode-plugin/)
- [How To Create Footnotes In WordPress Without A Plugin](https://www.namehero.com/blog/how-to-create-footnotes-in-wordpress-without-a-plugin/)
- [How To Redirect A Page In WordPress Without A Plugin](https://www.namehero.com/blog/how-to-redirect-a-page-in-wordpress-plugin/)