Google Fonts in WordPress: Plugins vs @font-face vs Google CDN

There’s no shortage of information out there on how to add Google Fonts to a WordPress site. There are several methods, and it can be confusing on which technique is the best for your situation.

We’ve tried to consolidate all the resources out there on Google Fonts for WordPress, and package it in a way that makes sense. Choose from one of the 4 methods below, or read straight through about all the possible solutions, and choose the right one for your website & skill-level.

How to Add Google Fonts to WordPress

1. Theme Options in the Customizer
2. Host Google Fonts locally via @font-face
3. Google Fonts WordPress Plugins
4. Load Fonts from Google’s CDN

Our Recommendation

• Technical Users: Add Google Fonts locally via @font-face and use a CDN to deliver your font files
• Non-Technical Users: If your theme has options in the Customizer, use them. If not, use the Google Typography WordPress plugin.

Now let’s dive into each of the 4 methods, and you can choose what works best for you to use Google Fonts in WordPress.

Theme Options in the Customizer

Before you go installing a Google Fonts plugin, you should first check if your theme supports Google Fonts. If so, this is typically the fastest and easiest method of including them on your site.

• Navigate to Appearance > Customize
• Look for a “Fonts” or “Typography” section (each theme might have a different name)
• Open up that section and explore the font options that are available

Many WordPress themes use Google Fonts, but not all allow you to add your own custom ones. If your theme does not support custom Google Fonts, we recommend you use @font-face (better performing, but more technical) or install a Google Fonts plugin (for beginners & non-techies).

Host Google Fonts Locally via @font-face

When we refer to “hosting fonts locally,” that means downloading the font files we’re going to use and uploading them to our own server. We always recommend taking it one step further and copying the files to a CDN, which means faster load times for our visitors.

Always use a CDN if you’re going to host fonts locally.

Brian Jackson wrote some excellent instructions on KeyCDN’s blog, so I’m piggybacking off his method.

Download Fonts from google-webfonts-helper

1. Go to google-webfonts-helper
2. Select the font(s) you want to use
3. Choose your font weights
4. Copy the @font-face CSS code (I prefer just “Modern Browsers,” but you can also choose “Best Support.”
5. Click the button to download fonts in a .zip file

NOTE: Modern browser support will include .woff and .woff2 file formats. These two formats are supported by the current versions of all major desktop & mobile browsers (Chrome, Firefox, Safari, IE & Edge). Only choose “Best Support” if you need to support older browser versions.

Upload Fonts to Your Server

Using an FTP program (or your web host’s cPanel file manager), upload the font files to your server. I prefer to put them in a folder called /fonts/ within my theme, but you can choose to organize them however you want.

Copy Fonts to Your CDN

This will depend on the type of CDN you are using, but for most WordPress sites, creating a pull zone makes the most sense. With a pull zone, your font files will automatically be copied up to your CDN.

For example, with KeyCDN (our recommended provider), once you setup the CDN Enabler plugin, your files are automatically copied to the CDN for you.

Check with your CDN provider if you aren’t sure how to copy the files to your CDN.

Add CSS @font-face Code

To actually load the fonts onto your site, this is where the CSS @font-face code comes into play. You’ll need the code you copied from google-webfonts-helper when downloading the fonts.

Your code should look like this, but will differ based on which font(s) you chose:

/* open-sans-regular - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'),
 url('https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff2') format('woff2'),
 url('https://cdn.example.com/fonts/open-sans-v13-latin-regular.woff') format('woff');
}

Be sure to change the portion after url(' to point to your CDN, as well as the folder where you placed your font files.

There are two ways you could add the @font-face code to your site:

1. style.css file (recommended)

• Open your theme’s (or child theme’s) style.css file, and place the code at the very top of your file

2. Additional CSS in the Customizer (if you don’t have access to your style.css file)

• Login to your WordPress admin area
• Navigate to Appearance > Customize
• Open the Additional CSS section
• Place your @font-face code in the additional CSS area
• Click Publish

Google Fonts WordPress Plugins

Using a plugin is a good option if you’re new to WordPress, or not very technical. We’ve compiled a list of the best Google Fonts WordPress plugins, along with a few that we do not recommend. Select a plugin below to learn more.

1. Google Typography – Top Recommendation, supports font family, size, weight & color
2. Google Fonts for WordPress – Super-simple, but only supports font family
3. Easy Google Fonts – Most options, most complicated
4. Styleguide – Quality plugin with limited options
5. TK Google Fonts – Very average. Limited free options. Upgrade for monthly fee.
6. WP Google Fonts – NOT Recommended
7. FontPress – NOT Recommended
8. Font Organizer – NOT Recommended

01Google Typography Plugin

Google Typography is arguably the best Google Fonts WordPress plugin. It’s beautiful design & integration with all 800+ Google Fonts make it our top choice.

Pros & Cons

Here’s what Google Typography does really well:

• supports all 800+ Google Fonts
• customize font family, weight, size & color
• add an unlimited number of fonts & styles to your entire WordPress site (although going overboard will negatively impact performance)
• precise targeting of text in specific areas
• custom preview text on a light or dark background

It’s two minor downsides are:

• not available in the Customizer (not a true live preview)
• a little extra work involved to find the CSS selectors you want to target

Although it’s not a perfect solution, I believe it’s the best plugin for adding Google Fonts to WordPress.

How to use the Google Typography WordPress plugin

1. Navigate to Appearance > Typography
2. Click the Add New button
3. Type in some preview text
4. Choose your font family
5. Choose a font variant (aka: font weight)
6. Choose a font size
7. Select a color
8. Add your CSS selectors in the input box *
9. Click the Save button

Google Typography Plugin

* To find CSS selectors, open your website, right click on the text you want to change & choose “Inspect” or “Inspect Element.” You can use an HTML element (p or h2), a class=”myclass” (.myclass), or an id=”myid” (#myid). Show me how »

02Google Fonts for WordPress Plugin

The Google Fonts for WordPress plugin combines supported features and ease-of-use. It doesn’t come with unlimited font controls, but then again, you don’t want 12 different font styles scattered all over your site with little consistency. That would just be ugly.

Pros & Cons

Google Fonts for WordPress offers the following benefits:

• Preview changes in the Customizer
• All 800+ Google Fonts supported
• 3 basic settings for controlling body content, headings & buttons/input fields
• 9 advanced settings for more fine-grain control

Unfortunately…

• It only supports font family. You cannot change font size, style, color, etc.

If this plugin supported font size & font weight, it would have received our top recommendation.

How to Use Google Fonts for WordPress

1. Navigate to Appearance > Customize
2. Click on the Google Fonts section
3. Click on Basic Settings, and choose default fonts
4. Click on Advanced Settings and set more specific fonts, if desired
5. Click on the Publish button to save your changes

Google Fonts for WordPress

03Easy Google Fonts Plugin

The Easy Google Fonts WordPress plugin is by far the most popular font plugin, being used on more than 300,000 WordPress sites. While it does provide the most customization of any plugin we tested, it is not quite as intuitive or easy to use as the other plugins in our list.

Pros & Cons

Benefits of Easy Google Fonts include:

• Live preview font changes in the Customizer
• Easily change p tags, as well as h1 through h6, by default
• Ability to add an unlimited number of custom font controls
• Adjust the font family, size, weight, style, color, text-decoration, text-transform, letter-spacing, margin, padding & border of each font
• Includes all 800+ Google Fonts (searchable by name)

One of its benefits is also one of its biggest downsides:

• There are so many options that users can get overwhelmed, or simply create font styles that are difficult to read

How to Use the Easy Google Fonts Plugin

1. Navigate to Appearance > Customize
2. Click on Typography
3. Click on Default Typography
4. Choose which element for which you’d like to change the font size
5. Click Edit Font
6. Select your preferred options from each dropdown menu
7. Be sure to click the Publish button at the top when you’re finished

If you need to edit fonts in addition to the default paragraph & heading tags, go to Settings > Google Fonts and create a new Font Control.

Easy Google Fonts Plugin

04Styleguide Google Fonts Plugin

The Styleguide plugin was built by the talented Ben Gillbanks (known online as binarymoon). Ben takes a slightly different approach than most other Google Font WordPress plugins, and I really appreciate his simple solution.

Here’s how Styleguide works:

• Fonts can be adjusted in the Customizer in the “Colors & Fonts” section
• Some themes also support changing theme colors
• Two types of fonts can be changed: Body font & Header font
• Choose from the top 45 most popular Google Fonts
• See exactly what the font looks like before you choose it
• Choose between 3 font weights: default (inherited from theme), normal & bold

The options are simple, intuitive and perfect for those looking for a very basic solution for Google Fonts. By default, you only have access to the most popular fonts, not all 800+. However, developers can extend the plugin to include any Google Font.

Check Out Styleguide Plugin

05TK Google Fonts

The TK Google Fonts WordPress plugin is actively maintained, and works pretty well. It supports all 800+ Google Fonts. The free version only allows you to change the font family, but they offer a premium version for updating font size, weight & color ($3.99/mo.)

It’s definitely not my favorite option, but if you like the interface and don’t mind paying a monthly fee, go for it.

TK Google Fonts Plugin

06WP Google Fonts Plugin

We DO NOT recommend the WP Google Fonts plugin for the following reasons:

• It hasn’t been updated in over 2 years
• I received an error message at the top of its main settings page
• The user interface is confusing
• It aggressively promotes a completely unrelated plugin, from the plugin owner’s main company (and some would argue it violates the plugin directory’s guidelines)

It appears as though this plugin was purchased from its original author with the intention of marketing premium services (although this has not been confirmed).

07FontPress Plugin

The FontPress plugin is a premium plugin available on Envato Market for $20. It offers much more than just the ability to add Google Fonts in WordPress, but we do not recommend it for the following reasons:

• It hasn’t been updated since July 2016
• There are several concerning comments from existing & previous users
• It costs $20, and there are free plugins that do a better job of handling Google Fonts for WordPress

08Font Organizer Plugin

Font Organizer is another free WordPress plugin that helps you add Google Fonts to your WordPress site, but it is not one we recommend for the following reasons:

• I noticed a few errors in the WordPress admin area when using it
• It’s not very intuitive, and doesn’t provide any type of preview
• When it comes to simply adding support for Google Fonts, it’s just overkill

Other Font Plugins We DO NOT Recommend

• Google Web Fonts Customizer (GWFC) has not been updated in over 4 years, and should not be used.

Add Fonts from Google’s CDN

Another common way to add Google Fonts to WordPress is by loading the fonts from Google’s CDN. Opinions vary on whether or not to use this method. I’ll briefly cover the points of contention, and then show you how to add fonts this way.

Speed & Performance

Will fonts load faster from Google’s CDN, your own CDN (like KeyCDN), or your hosting server? Well, it depends.

Typically, your hosting server will provide the slowest performance. This is because you only have one server in one physical location, and the visitor who requests the font file might be thousands of miles away.

Because Google’s Font CDN is used by many sites, it is possible your visitors will already have Google’s version of the font cached in their browser (especially if you’re using a very popular font). In this case, Google’s CDN is going to provide a very fast experience for your visitors.

However, using Google’s CDN will add two additional DNS lookups (fonts.googleapis.com & fonts.gstatic.com) and a few HTTP requests. Using a CDN on your own domain will cut these out.

One big argument for the use of your own CDN is the control over caching. Kinsta explains it like this…

If you are using Google Fonts or another third-party service, you might see errors or warnings that the resources are “missing a cache validator” or that they “require expires headers.” These are fixed at the server level, and when they are on Google’s server, you have no control over fixing them.

So, to recap…

• Hosting Server: Slow, not recommended
• Google’s CDN: Reliable, fast for popular fonts, but no caching control
• Your Own CDN: Fast, fewer DNS & HTTP requests, full caching control (reliability will depend on your provider)

External Dependencies

Whenever you load a resource from a third-party, whether it be fonts, images, javascript, etc., you are putting faith in that third-party to not experience an outage. If their server goes down, your fonts don’t load.

In this case, however, Google’s CDN is likely as reliable as your own CDN or hosting service, if not more so. I wouldn’t worry about the reliability of loading your fonts from Google’s servers.

How to Add Fonts from Google’s CDN

If you’ve chosen to go this route, here are a few tips to load your fonts as fast as possible. I’ll explain them in more detail below.

• Only choose the font weights that you need
• Put all fonts in one request
• Use &text= to only download the characters you need
• Use <link rel="preconnect">

Font weights & styles

Each weight & style (bold, semi-bold, light, italic, etc.) requires an additional file to be downloaded, which will hurt your site’s performance. Only choose the styles you know you’re going to use.

All fonts in one request

If you use multiple fonts, there’s an easy way to include them all in one request. You do not want to include multiple calls to the <link> element. Instead, separate each font family with a pipe (|) character.

Do this:

https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans|Roboto

NOT this:

https://fonts.googleapis.com/css?family=Open+Sans
https://fonts.googleapis.com/css?family=Droid+Sans
https://fonts.googleapis.com/css?family=Roboto

Only download the characters you need

In most cases, you won’t be able to predict exactly which characters you’ll need. However, if you’re using a font for a specific use (like a logo), and you know exactly which characters you’ll be using, use the text parameter to further improve your font’s performance.

For example, if you only needed the font to display “WordPress,” you could do this:

https://fonts.googleapis.com/css?family=Roboto&text=WordPress

Using rel=”preconnect”

<link rel="preconnect"> informs the browser that your page intends to establish a connection to another server, and that you’d like the process to start as soon as possible (learn more). This can speed up the loading of your fonts when using Google’s CDN.

You would add this line of code to the <head> section of your site, before the call to wp_head();.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Now that we’ve covered best practices, let’s go grab a font and add it to our site.

Get the code

To get the code for your font(s)…

1. Navigate to fonts.google.com
2. Locate the fonts you’d like to use
3. Click the plus (+) icon

4. Open the bottom tray that says “__ Families Selected”
5. Click “Customize”
6. Choose the font weights that you need
7. Click back to “Embed”
8. Copy the “Embed Font” code

Your code should look something like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">

Place the code on your site

Now you need to insert this code into the <head> section of your site. This can be done in two ways:

Enqueue the Styles (preferred method)

This method is preferred, but definitely more on the technical side. WPMU DEV has an excellent tutorial on how to enqueue styles properly.

Directly in header.php

1. Open the header.php file in your current theme or child theme
   yoursite.com/wp-content/themes/themename/header.php
2. Paste your code before the call to <?php wp_head(); ?>

We’ve covered a lot in this guide, but I hope it helped give you a better understanding of how to best add Google Fonts to a WordPress website. I’d love to open a dialogue in the comments on which method you’ve chosen, and why. Or if there are other methods I failed to mention, please share them.

And as always, if you need help implementing any of the methods we’ve outlined above, let me know and I’ll try to help as best I can.

Further Reading

• Google on web font optimzation
• Kinsta’s web font optimization guide
• Browser support for .woff file format
• Getting started with Google Fonts