• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Add Google Fonts To WordPress Without A Plugin

Bhagwad Park

Published on: July 9, 2018

Categories: WordPress 2

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

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

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

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” 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

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:

Edit CSS

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!

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Comments

  1. Martin says

    April 26, 2021 at 11:28 am

    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

    Reply
    • Bhagwad Park says

      April 26, 2021 at 2:00 pm

      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!

      Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA