Using Custom Fonts On Your WordPress Site

Uploading and using custom fonts on your WordPress site is not as difficult as you might think. It does involve a little CSS, but if you can copy and paste and read a menu heading, you will be fine. It really is that easy.

There are countless free font shops on the web, all with endless lists of weird, wacky, plain and strange fonts (and plenty of straight-up copyright theft, so do check the licence before you use one commercially). The routine is the same everywhere: you click download, fight your way past the ads to find the hidden button, and a zip lands in your downloads folder. Open it and you will usually find a .ttf or .otf file, and sometimes a .woff or .woff2. Great. Now how do you get that onto your web page?

Why font formats used to matter

Fonts are read differently by different browsers. Years ago you had to ship several copies of the same font so that every browser had one it understood: EOT for old Internet Explorer, SVG for very old iOS Safari, plus TTF and WOFF for everyone else. If you only uploaded one format, a browser that did not understand it would quietly substitute something like Arial, and the menu font you carefully matched to your logo would look wrong.

The good news is that this is mostly history. Every browser in use today understands WOFF2, so a single WOFF2 file is now enough. If you want to cover a few very old browsers you can add a WOFF file as a fallback, but you no longer need the EOT and SVG copies at all. That makes the whole job far simpler than it used to be.

The modern way: the built-in Font Library

If you are on a modern block theme, you may not need a plugin or any CSS at all. Since WordPress 6.5 there is a built-in Font Library. Open the Site Editor, go to Styles then Typography, and you can upload your font file there. WordPress hosts the file on your own server and writes the @font-face rule for you, so the font is ready to pick from the typography menus across the editor.

The easy plugin route

If you are on a classic theme, or you just want the simplest possible option, a tidy plugin called Use Any Font still does the job. As you upload the file it generates the font face for you and handles the formats, so as a novice you can upload the file, give it a name, and assign it to your headings and paragraph text in an instant.

There are two catches worth knowing. The free plugin only lets you add one custom font unless you make a small donation to the author, which is fair enough for a nicely made tool. More importantly, it processes the font through the Use Any Font server rather than serving everything from your own site. For the fastest, most private result you want the font files living on your own server, which is exactly what the built-in Font Library gives you.

Doing it by hand with CSS

If you would rather keep everything on your own site and wire it up yourself, upload your WOFF2 (and optionally WOFF) file to a folder on your server, then drop this into the custom CSS section of your site:

@font-face {
    font-family: "FontName";
    src: url("/wp-content/fonts/fontname.woff2") format("woff2"),
         url("/wp-content/fonts/fontname.woff") format("woff");
    font-display: swap;
}

Then reference that FontName in your theme wherever you want it, for example on your headings or body text. If you only have the original TTF or OTF file, run it through a web font generator (search for one) to produce the WOFF2 and WOFF versions first, then upload those. It is worth doing properly, because web fonts sit right in the critical path of your page load. If you want the full picture on why that matters, see optimising front-end WordPress performance, and if you serve your assets through a CDN, configuring Cloudflare for WordPress and WooCommerce will help you cache the font files at the edge.

That is really all there is to it. If you have any questions or want more help getting fonts onto your site, let me know and I am happy to lend a hand.

Further reading