How to Use Custom Fonts in WordPress

February 18, 2016

Want to add custom fonts in WordPress? If you had asked about this just a couple of years ago, you would have been very unhappy with the answer. But since it is 2016, we’re pleased to report that now you have more possibilities to use custom fonts in WordPress than you can shake a stick at.

In this post, I’m going to explore and explain the easiest way of integrating custom fonts with your WordPress website.

Note. No coding skills required. The whole thing takes 3-5 minutes.

But first:

What’s the deal with custom fonts in WordPress anyway?

In case you don’t know, adding custom fonts in WordPress is somewhat of a new possibility in the world of website building.

Not that long ago, site owners could only work with a narrow set of “web safe” fonts. Those were the fonts that rendered correctly on most computers and in most web browsers.

You simply couldn’t use any custom fonts, because your visitors’ machines literally didn’t know how to display them on the screen.


This all changed when custom type kits were popularized and integrated through handy code snippet embeds. Because of that, every WordPress website owner can now work with completely custom fonts, and at the same time, be sure that those fonts will render correctly across all screen sizes and devices.

Here’s the most popular and easiest way of enabling custom fonts in your WordPress website:

Adding custom fonts in WordPress through Google Fonts

Google Fonts is a huge library of 700+ fonts (and growing), that’s available to all website developers for free.

The great thing about Google’s library is that the fonts are neatly categorized, which makes finding the perfect one for your project a breeze. Plus, there’s a free WordPress plugin available that’s going to make things even simpler.

Here’s what you do:

Getting the Easy Google Fonts plugin

Start by getting a free WordPress plugin called Easy Google Fonts.


Just install it normally via Plugins / Add New in your wp-admin panel. Just type in the plugin’s name:

install easy-google-fonts


After activating the plugin, the hard part of the task is basically done! At this point, you can start working with all of Google’s massive font library.

Setting up custom fonts in your WordPress site

Just go to the WordPress Customizer (Appearance / Customize in the wp-admin). There, you’ll find the Typography section:

typography section

By default, you can work with paragraphs and headings 1 to 6:

typography settings

The usage is really simple. Let’s work with Heading 3 for a quick demo.

Just expand the Edit Font button under Heading 3, and then select your new font from the Font Family list:

font-family list

Now, what you see there is a text list of font names that doesn’t give you much of an insight into what the actual font looks like. For that, hop over to As I mentioned before, the directory there is very nicely organized, and you can see font demos next to their names.

fonts at google

In short, I advise you to pick your fonts in Google’s own interface, then come back to the plugin, and input the names of those fonts into the field. This will enable your new custom fonts in WordPress.

In my case, I like a font called Lobster for my Heading 3:


As soon as I put the font’s name in the field, I will see the changes in real time:

lobster in wp

For more adjustments, I can go to the Appearance tab. There, I can adjust things like: font size, line height, font color, background color, and even letter spacing. Fun stuff.

font settings

After I’m done with Heading 3, I can adjust the other headings and the main paragraphs.

The great thing here is that whatever you do in the Customizer, won’t go live on the site until you click the main Save & Publish button at the top:


Setting additional types of website text

Apart from the paragraphs and the headings, you probably also use other kinds of text on your WordPress site. I’m talking about things like block quotes, or lists. Those you can set with the plugin as well, but with one additional step.

Go to Settings / Google Fonts. Once there, create what’s called a new Control. I recommend to use Control names that reflect the text you’re going to be adjusting. For instance, I want to adjust my block quotes, so my Control will be:

new font control

Next, in the “Add CSS Selectors” section, I have to add the text selector name that I want to adjust.

This is the only confusing part about working with the plugin, so here’s a cheat sheet of what you can input there:

  • use blockquote for block quotes,
  • use li for individual list elements.

save font control

Once you click Save Font Control, the plugin will enable a new section in the WordPress Customizer, which will allow you to adjust this new type of text.

Let’s come back to the Customizer. Again, go to the Typography section. Now there’s a new block there:


Through it, you can set some new text parameters:

new blockquotes


Adding custom fonts in WordPress sure is easy with Google Fonts, but I just want to warn you about one small thing.

Generally, it’s not recommended to have more than 2-3 different fonts on your site. Going for more than that can result is slower loading times of your whole website, and this has a negative impact on user experience.

So be careful here. In most cases, having just 2 awesome fonts will do the trick – one font for headings and the other for paragraphs.