How To Use Any Font With WordPress With Ease

A (brief) history of web typography

Web designers used to be quite limited in font choice.

It was recommended to use only web safe fonts – the small subset of fonts installed on both Windows and Mac computers.

As Coffee Cup Software explained in their What is a web-safe font? post, that boiled down to only 5 that were guaranteed to work:

1. Arial
2. Courier New
3. Georgia
4. Times New Roman
5. Verdana.

As Craig Revel Horwood would say on Strictly, “Dull, dull, dull.”

If you wanted to use any other fonts, you had to embed them into graphics.

If you can remember back to the 90s or early noughties, sites might use images with embedded text as logos or navigation buttons.

The former is still commonplace today.

The latter isn’t, as it offers a worse user experience and looks rubbish if the images are turned off or fail to download!

Web Fonts

Web fonts were added to the CSS specification in 1998, but there was no universal standard laid down for them until 2008, when the EOT font format was agreed upon.

The WOFF format (Web Open Font Format) was agreed in 2010.

Web font providers began to spring up, and the choice of fonts increased massively.

Google Fonts is one of the most popular providers. All its fonts are free to use.

Font licensing

Fonts are pieces of software, and come with license terms.

Buying a font for desktop or print use does not necessarily give you the right to use it on the web. You need to examine the licensing agreement for it. You might need to purchase a separate license, depending on whether it’s for personal or commercial use.

Don't assume you can use any font on your website. Read and check the licensing agreement first! Click To Tweet

Some fonts are free and licensed under an open source agreement, usually the SIL Open Font License.

Read Design Shack’s article to find out more about font licensing.

Choosing web fonts

Note that most fonts only have one style.

You might want to choose a body font with a range of styles so that you can have different font weights (light > bold) and italic styles.

But the more styles you pick, the more font files you have to load. Which makes your website slower. So it’s a trade-off in terms of aesthetics vs speed.

Web fonts are cool, but only use the styles that you need. Too many will slow down your site. Click To Tweet

So how do we use any font with WordPress?

The simplest way is to add a font plugin, to avoid some complex coding.

But first…

Check the font choice in your WordPress theme

Some themes have a collection of fonts already added to them which you can use without the need to add plugins.

For example, Divi theme has a number of Google Fonts to select from.

Go to Appearance > Customize > General Settings > Typography to set the header and the body font.

You can change individual selections of text using the Divi Builder.

Avada theme also has many font families to choose from, and the ability to upload custom fonts of your own.

Adding Google Fonts with Easy Google Fonts

If you’ve identified Google Fonts that you want to use, Easy Google Fonts is a simple way to add them.

Install the plugin and go to the theme Customizer (Appearance > Customize > Typography > Default Typography).

Change the body font and headings from Heading 1 to Heading 6 using the Edit Font dropdowns. You’ll see them applied instantly. Save and publish when you’re happy.

Limitations

• Not all text on your site is targeted by the plugin. You can see that the sidebar was unaffected in this example.
• To get a truly consistent look, you need to add your own CSS styles.
• You can only use Google Fonts with this plugin.
• No fallback font is specified. So if for any reason your font doesn’t load, you might see some blank space where it’s meant to be.

Typekit Fonts for WordPress

Typekit Fonts for WordPress works with Adobe’s Typekit web font service.

Steps:

1. Sign up first for a Typekit plan – there is a free option.
2. Browse the font list until you find one you like.
3. Add the font to a kit. Specify a name for your kit and the domain you’re going to use the font on.
4. Copy the default embed code you’re given. Normally, you’d have to add this to your site yourself, but the plugin takes care of this for you.
5. Add the embed code to the box under Settings > Typekit Fonts. Save. This connects Typekit to your site.
6. Continue on the Typekit site. In the Selectors box, add the elements on your page that you want to show the new font. For headings 1 to 3, type h1, h2, h3 and add them.
7. Choose the weights and styles you want in your kit.
8. Publish your changes.

Applying your fonts can also be done from the plugin’s settings page, and there’s a bit of guidance on writing style rules.

The result, using Divi theme and the Museo font:

Limitations

• As you can see, it’s a bit fiddly to set up.
• You can only use Typekit’s web fonts with this plugin.
• You need to know the right CSS selector to display the fonts.

Use any font with WordPress with… Use Any Font!

Use Any Font plugin does what it says… it lets you upload any web font to your website.

It’s up to you to make sure you have the correct licensing for your font.

Finding custom fonts

A good place to look for custom fonts is Font Squirrel. All their fonts are free for commercial use.

Look for fonts with the globe symbol next to them. Those ones are free to use with @font-face embedding for the Web.

I downloaded the Coiny Regular font and got a font file in .ttf format.

Setup

To start with Use Any Font, you need an API key from here.

The plugin runs by donation. Slide the slider until you get to the donation you want to give.

You can get a free key, but that means you can only install one font.

A donation of $10 or more lets you upload and use unlimited fonts.

Once you have added an API key, Use Any Font is really easy to use.

Simply upload your font in .ttf, .otf or .woff format. Name it.

Then assign your font (select from the dropdown) to the places you want to show it.

You can choose them by checking the appropriate checkboxes, or write your own style rules.

Then (slightly confusing, this) click the second Assign Font button to apply the font.

The result, on a page built with Divi theme:

Your custom font will also show in the WordPress post editor – you can select any text, go to Font Family and choose your font from the list. Very cool!

If you have any problems, visit Use Any Font’s dedicated support forum – it’s monitored more closely than the WordPress.org forum.

I had some display issues with my font, with some letters overlapping, but I suspect that was down to the font choice.

Limitations

• It costs to use more than one font, though it’s still very good value.
• There’s a slight delay in the appearance of the font in Chrome browser.
• The font styles use CSS !important. Applying styles site-wide might be what you want, but if it’s not, you need to write your own rules.
• Again, no fallback font is specified, so there’s a risk your font won’t show if it doesn’t load correctly.

Feeling brave and want to add fonts yourself with code?

Read the following to DIY:

Adding Custom Fonts to WordPress with @Font-Face and CSS3

How to Add Google Web Fonts in WordPress Themes the “Right” way

Typekit Code Snippet

Got some wonderful WordPress typography to show off?

Leave me a note of your site URL in the comments!

Category: WordPress Tags: fonts, web fonts