Blog

If content is king, then typography may be the king’s clothes (or castle, if you want). Since type is what people will be looking at 99% of the time, you may want something that stands out from the same old boring Arial and Times New Roman. There are hundreds of web fonts out there that you can use for free in order to spice up your theme’s typography. This article will look at the options you have for including custom fonts in WordPress, as well as the common pitfalls (and solutions) that custom fonts bring.

Manual edit

We believe that the best way to add custom fonts is by adding them in yourself, by hand. This way you don’t rely on a plugin and you know exactly what fonts are being used in your theme.

“Wahhh, but that’s hard and I don’t know how to do it!”

Nonsense! It will only take about 5 minutes and it’s easy as cake. Besides, what’s cooler than being a 1337 h4x0r who can code simple stuff like this on his/her own? Once you learn to do this, you’ll be able to do other small changes fast and on your own (rather than paying someone to do it)

So here’s how to add web fonts manually into your theme:

1. Get the Google Web Fonts link

First of all, go to Google Fonts and get the embed link for your font of choice. You have to click on the second button in the box that is near the “Add To Collection” button. By the way, this method is valid with the other web font platforms that we list a bit later.

2. Edit your functions.php file

Next we’ll edit the functions.php file to tell WordPress to include the font-face style in the site header. Access the theme editor by going to the Appearance tab and clicking on Editor. Select the functions.php file. Add this bit of code at the end:

add_action( 'wp_enqueue_scripts', 'custom_google_fonts' );
function custom_google_fonts() {
wp_enqueue_style( 'custom-font', "//fonts.googleapis.com/css?family=Open+Sans");
}

Of course you should replace the Open Sans URL bit with font you selected. To include multiple fonts at once, add the | separator, like so

wp_enqueue_style( 'custom-font', "//fonts.googleapis.com/css?family=Open+Sans|Lato");

3. Lastly you have to edit your style.css to include the appropriate font-family.

Now that your theme has the appropriate font-face in the header, you want to edit your stylesheet so that your theme elements are actually using the new font. The best way to edit the style.css is by using child themes. You can also edit without one, but beware that your style.css will be overwritten whenever the theme gets updated, so you’ll have to do it all over again.

So let’s say that you want to change the body font. What you have to do is go to the Appearance -> Editor, select the style.css and search with CTRL+F for the “body” element and change (if you’re editing the parent theme) or add in (if it’s a new child theme) this bit:

body {
    font-family: 'Open Sans', sans-serif;
}

Note that you have to put in apostrophes for fonts that have 2 or more words in their names. Single-word fonts do not require that.

And you can do the same with every element on page. All you have to do is right click with your mouse on the element you want to style with a different font, select to “Inspect Element” and get the class name from the inspector window.

For example, let’s do this with the element on our own page that says “Blog”…

And then get the name of the class from the inspector window…

In this case, the element is .site-title

Then all you have to do is edit or add that class name in the theme’s stylesheet.

By the way, if you want to style an individual page or post element that has no specific class (for example, you want a specific headline or paragraph in one single post to have a different font), you can easily do so when you’re writing the post by using the Text editor (accessed by clicking the tab near the “Visual” one).

What you do is you either add the style directly like this:

<h2 style="font-family: 'Open Sans', sans-serif">This headline looks totally different from the rest</h2>

Or you specify a custom class…

<h2 class="customheadline">This headline looks totally different from the rest</h2>

And define it in your style.css

.customheadline {
    font-family: 'Open Sans', sans-serif;
}

We also recommend this this quick tutorial to get a grasp of how you can style fonts with CSS.

In-built theme support

Of course we realize that not everybody will want to edit theme files. Because of this, we started including this option in some of our newer themes, like Megalith for example. When you click the Typography tab in the theme options panel, you can change the font family, color and size at a global level, as well as individually for links and headers (not shown in screenshot)

Megalith also comes with the Visual Composer plugin, which allows you to define custom classes for elements in the visual editor, among other features.

If you’re using other themes, check out their options panel. However not all themes have it and the font selection is often limited so we still think that doing it manually is the best way to go.

Plugin support

OK so for some reason you don’t want to add the fonts yourself. Are there any other options? Yes: plugins.

Here are the most popular plugins you can use to add custom fonts to your site.

Easy Google Fonts

If you haven’t figured it out from the name yet, this plugin allows you to use Google’s Web Fonts. The cool thing about this particular plugin is that it allows you to see the changes in real time, so you don’t have to guess how your content is going to look.

Typekit Fonts

If you want to use the fonts from Typekit, this is the plugin to do it. Typekit has a free plan and several paid ones if you’re going to be using them commercially. You also have to create an account on their site to access the fonts. Good if you want to include fonts such as Futura, PT Sans and other popular types from famous foundries.

Web Fonts

Another plugin made to integrate with a different web font provider, this time being Fonts.com. It also has integration with Google’s Web Fonts. As with the TypeKit plugin, you will have to create an account to be able to use this plugin.

Use Any Font

This plugin allows you to upload any custom font that has the *.ttf, *.otf or *.woff extension. The developer also has a paid option that converts non-web fonts into web ones which means that you can use fonts that aren’t even available online (make sure to check the license though).

Other web font libraries

Although Google Web Fonts is great, there are other libraries and fonts that you can use with the manual method we describe.

Adobe Edge Web Fonts – Over 500 free web fonts that you can use on your site. Check out this tutorial on how to use them with WordPress.

Font Squirrel – Many quality fonts that can be used free of charge for commercial purposes. Upload with the Use Any Font plugin.

Open Font Library – 610 font families, mostly free to use, depending on license.

Downsides of using custom fonts

Custom fonts may be great but there are a couple of downsides you should keep in mind.

Not all fonts have diacritic support

If you’re writing in a language other than English, you should check if the font has support for that script. The best way to check with Google’s Fonts is to go to the site itself and use the preview function to see if the special characters are displayed. Another trick is to use the script sorting function to skip directly to the fonts that support your language.

Too many custom fonts can slow down the loading time of your site

It’s advised that you have no more than 2-3 custom fonts on one site at a time. With each new custom font that you add, the user’s browser has to ping external servers to get them. This can increase the load time and it can also make for a sluggish browsing experience as they have to be loaded into memory.

Another thing to keep in mind is to load only the styles of fonts that you’re going to use. There’s no need to load up all the font weights from 300 to 800 and include italic, bold and extra bold.

Disable fonts that you aren’t using. Either do this through the theme functionality, the custom font plugin or by modifying theme files individually. If you’re going to do it manually, the string you want to search for in the theme files (functions.php usually) is the wp_enqueue_style which includes the Google Fonts URL and comment it out (or remove it). Another way themes include fonts is through the @import keyword in the stylesheet file (style.css), so look for that one as well.

Roundup

So that’s about it when it comes to using custom fonts with WordPress. We think that one carefully selected serif paired with a sans-serif can really spice up the look of your site and the legibility of your text. Smashing Magazine has published an article that should help you decide on how to best pair body and headline types like a real designer.

Do you have a favorite font type or a font pair that you use on your own site? Let us know in the comments.