Blog

Our most recent news and updates

How to Use Google Fonts on Your WordPress Site

Learning how to use Google Fonts on your WordPress site is a simple technique you can learn to completely change the way your users view your site. It may even change the way you use themes as you might feel trapped or hesitant to use a theme when it uses a font you’re not so fond of.

Plus, Google’s font collection takes you into an unbelievable world filled with new opportunities for experienced and aspiring web designers alike. It opens doors to new possibilities in terms of style and gives you more ways to grab your users’ attentions and communicate with them through design.

We’re going to learn how to use Google Fonts in WordPress using two most popular methods designers use to customize WordPress sites:

  • Plugins
  • Custom Code

How to Use Google Fonts in WordPress: The Plugin Method

The simplest way to add Google Fonts to WordPress is through the use of plugins, as is the case with anything that has to do with customizing WordPress. There are two main plugins you can use for this purpose. They are:

  • Easy Google Fonts – 200,000+ Active Installs, as of May 2016
  • WP Google Fonts – 100,000+ Active Installs, as of May 2016

1. Easy Google Fonts

Easy Google Fonts

This plugin does exactly what it says it does. It provides you with an easy way to add Google Fonts to your WordPress site. It’s also a free plugin, so all you need to do to install it is click the Install Now button in the WordPress admin.

Easy Google Fonts Frontend

This plugins allows you to customize the fonts for all of your heading tags as well as your paragraph tags using nothing but the WordPress theme customizer. You can also use the plugin’s backend settings to edit specific elements, such as block quotes.

2. WP Google Fonts

WP Google Fonts

WP Google Fonts is a simple WordPress plugin. It’s as simple as any other WordPress plugin in that all you need to do is go to the Add New Plugin page in your WordPress admin, search for the plugin, and click Install Now to add it to your site.

WP Google Fonts Backend

The plugin allows you to add up to 6 Google Fonts to your site. You can select which font, font style, HTML element and character sets you’d like to use with a few simple clicks. You can even add your own custom CSS.

How to Use Google Fonts in WordPress: Coding Methods

How to Use Google Fonts in WordPress

Plugins are great, but they have their limitations. You may also prefer adding a bit of code to your site over adding another plugin to it.

We’re going to go over a few different ways you can add code to your WordPress site. We’ll also go over how to use the Google Fonts website as well as what to look for in each font.

Here are the methods we’ll go over:

  • The Standard Method
  • The @import Method
  • The Enqueuing Method
  • The JavaScript Method

How to Choose Google Fonts for Your Website

This is technical advice, not stylistic advice. Google Fonts are great. They give you access to hundreds of different fonts, but they have their drawbacks as most fonts do. These fonts put stress on your pages’ load times. You may not notice it if you only add a single font to your site, but you should definitely keep the number of fonts and styles you use to a minimum.

Google Fonts Quick Use Button

When you find a font you’d like to use, click its Quick Use button. This takes you to a page that allows you to customize your font before providing you with the code/links you’ll need to use to add it to your website.

Google Fonts Styles

The first part allows you to pick the various styles you might want to use. Only select the ones you know you’re going to use. This section also features a meter that estimates how much of an effect different combinations of styles may have on your site’s load time.

Google Fonts Code

The second part allows you to pick whether you’d like Latin, Latin-Extended or both character sets. The third part is the most important part. It features three tabs, each of which contain a different snippet of code you’ll need to insert in specific parts of your website in order to add the font to your site. The fourth part simply contains the CSS style you’ll need to add to your stylesheet.

Let’s get started on how to add these snippets of code to your website.

How to Use Google Fonts in WordPress: The Standard Method

I’ll be using the Oswald and Cabin fonts for these tutorials. When you view Oswald’s page, you can see the code in the Standard tab looks like this:

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

However, I want to use Oswald and Cabin, so I would add a | character after Oswald, and add Cabin after it:

<link href='https://fonts.googleapis.com/css?family=Oswald|Cabin' rel='stylesheet' type='text/css'>

If you select more than one style for a font, your code will look similar to this:

<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

You need to use a modified version of this code, and add it to your theme’s header. There are a few different ways you can do this. If you have a child theme, use your child theme’s header.php file. See our post on how to create a child theme in WordPress.

You can also use a plugin called Header and Footer.

You’ll need to add media=”screen” to your code, and you’ll need to add another line of code beneath your main line to reference your stylesheet. My code looks like this if I use Oswald and Cabin and only regular styles:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Oswald|Cabin” media=”screen”>

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen”>

Google Fonts header.php File

Add your version of this code to your theme’s header.php file. Change “style.css” to the name of your theme’s stylesheet. If you are adding the code to your header.php file, add it above your file’s stylesheet.

You need to use the CSS style in the fourth section of the font’s page to assign the font to various elements in your stylesheet. Open your stylesheet, and use the Find function (Ctrl+F) to find the element you’d like to edit, such as H1, H2, H3, etc. These tags are typically assigned to specific fonts by default, so you may not be able to add your own code, unless you use a child theme.

Once you find the element you’d like to edit or add it your child theme’s stylesheet, assign the CSS style like so:

How to Use Google Fonts in Stylesheet

You can play around with the font size and other attributes as well. You can also edit such HTML elements as the body tag, H1 tag, p tag, etc.

Note: I had trouble getting this method to work by copying and pasting the code directly from Google Fonts. Specifically, I had to change the single quotation marks ‘ to double quotation marks “ to get the new font to appear on my site properly. Strange issue but worth checking if you’re having trouble.

How to Use Google Fonts in WordPress: The @import Method

Google Fonts @import

This is probably the easiest method to use, aside from plugins. All you need to do is paste this code into your stylesheet, typically called style.css:

@import url(http://fonts.googleapis.com/css?family=Oswald|Cabin);

Place the | symbol between two different font families if you’d like to add more than one Google font to your WordPress site. This method is easy, but it isn’t recommended. This method imports the file onto the web pages you use it on. This means you and your users will need to wait for it to import before the web page downloads the rest of your content as this method blocks parallel downloads.

How to Use Google Fonts in WordPress: The Enqueuing Method

This is one of the methods many web developers prefer as it’s simple and decreases the amount of stress a font has on your pages’ load times. The only drawback is that you need to add a separate snippet of this code for each font you’d like to add to your site, making it less ideal for folks who wish to add more than one font to their sites.

Open your theme’s functions.php file, and add this code to it:

function ft_google_fonts() {
wp_enqueue_style( 'ft-google-fonts', 'http://fonts.googleapis.com/css?family=Oswald', false );
 }
add_action( 'wp_enqueue_scripts', 'ft_google_fonts' );

Replace Oswald with the font family you’d like to use as well as any styles you’d like to use. If I added all three styles available for Oswald, my code would look like this:

function ft_google_fonts() {
wp_enqueue_style( 'ft-google-fonts', 'http://fonts.googleapis.com/css?family=Oswald:300,400,700', false );
 }
add_action( 'wp_enqueue_scripts', 'ft_google_fonts' );

How to Use Google Fonts in WordPress: The JavaScript Method

Google Fonts JavaScript

The last method involves clicking over to the JavaScript tab in the third section of the Google Fonts page for the font you’d like to use. This is another method where you’ll need to add a script for each individual font you’d like to use, making it a poor choice for folks who wish to use more than one font.

Copy and paste the JS script you find there, and paste it into your theme’s header.php file right after the opening <head> tag.

Final Thoughts

Learning how to use Google Fonts in WordPress is a nifty little trick to keep in your pocket as it allows you to stay on your A-game when it comes to style.

Again, if you’re having trouble with one of these snippets of code, try changing the single quotation marks ‘ to double quotation marks “.

Another reminder is to minimize the amount of fonts and styles you add to your site. Only use the ones you know you plan on using as adding more will slow down your site, making having inactive scripts in your code a waste. If your site already gets bogged down by slow servers, make sure you read Nick’s guide on how to choose the best WordPress Hosting for your site.

Let us know which method you prefer for adding Google Fonts to your WordPress site!

5 Free Themes + Weekly Newsletter! Interested?

Leave a Reply

Scroll to top

Free Download

Enter your email address below to get access to this free WordPress theme. We will never spam you!

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match