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
- Theme Options in the Customizer
- Host Google Fonts locally via
- Google Fonts WordPress Plugins
- Load Fonts from Google’s CDN
- Technical Users: Add Google Fonts locally via
@font-faceand 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.
Download Fonts from google-webfonts-helper
- Go to google-webfonts-helper
- Select the font(s) you want to use
- Choose your font weights
- Copy the
@font-faceCSS code (I prefer just “Modern Browsers,” but you can also choose “Best Support.”
- Click the button to download fonts in a
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.
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-family: 'Open Sans';
src: local('Open Sans'), local('OpenSans'),
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:
style.css file (recommended)
- Open your theme’s (or child theme’s)
style.cssfile, 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
- Login to your WordPress admin area
- Navigate to Appearance > Customize
- Open the Additional CSS section
- Place your
@font-facecode 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.
- Google Typography – Top Recommendation, supports font family, size, weight & color
- Google Fonts for WordPress – Super-simple, but only supports font family
- Easy Google Fonts – Most options, most complicated
- Styleguide – Quality plugin with limited options
- TK Google Fonts – Very average. Limited free options. Upgrade for monthly fee.
- WP Google Fonts – NOT Recommended
- FontPress – NOT Recommended
- 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
- Navigate to Appearance > Typography
- Click the Add New button
- Type in some preview text
- Choose your font family
- Choose a font variant (aka: font weight)
- Choose a font size
- Select a color
- Add your CSS selectors in the input box *
- Click the Save button
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
- 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
- Navigate to Appearance > Customize
- Click on the Google Fonts section
- Click on Basic Settings, and choose default fonts
- Click on Advanced Settings and set more specific fonts, if desired
- Click on the Publish button to save your changes
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
- Navigate to Appearance > Customize
- Click on Typography
- Click on Default Typography
- Choose which element for which you’d like to change the font size
- Click Edit Font
- Select your preferred options from each dropdown menu
- 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.
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.
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.
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).
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.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)
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
&text=to only download the characters you need
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 (
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:
<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
<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)…
- Navigate to fonts.google.com
- Locate the fonts you’d like to use
- Click the plus (+) icon
- Open the bottom tray that says “__ Families Selected”
- Click “Customize”
- Choose the font weights that you need
- Click back to “Embed”
- 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.
- Open the
header.phpfile in your current theme or child theme
- 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.