Skip to content

How to install custom fonts in Wordpress

For Wordpress, you can either use a plugin to add custom fonts, or you can add code manually to your Wordpress theme files. For details, read this how-to article.

Font file formats—which is for what?

When you purchase a font, you usually get a couple of different files. This is because different browsers (e.g. Internet Explorer, Safari, Chrome) use different font file formats to display type on a website.

Common file types you’ll get are WOFF and WOFF2. WOFF2 is a newer, more compressed version of WOFF. The more compressed a file, the faster a website loads. Other font file formats for web are EOT and SVG. They are dated.

For desktop publishing (using a font in Canva, Illustrator, Figma etc.), you use OTF or TTF files. OTF is better than TTF because it often includes Open Type features (OTF). Opentype features are, for example, alternative characters, ligatures, and fractions.

When you purchase a font from Mojomox, you can select “OTF” or “WOFF/2” from the dropdown. If you’re planning to use the font in a design software (Illustrator, Figma, Canva etc.) AND on a website, you’ll need to purchase both—OTF and WOFF/2.

For websites only, purchasing the WOFF/2 format is enough.

Unzip font folder

After you purchase a font in the WOFF/2 format, you’ll get a link to download a ZIP folder. After downloading, double-click or right-click the folder to unzip. Now, you’ll have two files, one WOFF and one WOFF2 file.

Adding a custom font to a Wordpress theme

For Wordpress, you can either use a plugin to add custom fonts, or you can add code manually to your Wordpress theme files.

Option 1: Use custom font via plugin

If you prefer using plugins, read more about it here on Wordpress’s support page:

Option 2: Use custom font via manual code snippet

If you prefer the manual way, it’s three things you need to add:

1) Upload font files (WOFF and WOFF2) to your Wordpress directory (sometimes there is a font folder; but any folder works, you’ll just need to get the link to it)

2) In your style.css (or any other CSS file you may have), add the @font-face code (details in link below) 

3) Assign the font to Html (e.g. the body, or headlines only)

You can find detailed screenshots with examples for the three points above are here:

Questions? Email me at with a link to your site and I can help you with the code.

On design

Elegant fonts for 2024

Check out this collection of elegant fonts in lighter font weights. These five typefaces have a contemporary style that works well for 2024.

Read more
Minimalist fonts for 2024

A list of six minimalist fonts, in what font weights to use them, and for what industries and topics they work well in 2024.

Read more
Font with triangle A

The letter A is a pointy letter by default but you can also swap it with a version that shows a triangle instead of the crossbar, and an outline triangle...

Read more


Your cart is currently empty.

Start Shopping

Select options