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: https://wordpress.com/support/custom-fonts/#upload-custom-fonts

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: https://www.hostinger.com/tutorials/how-to-add-custom-fonts-to-wordpress#How_to_Manually_Add_Fonts_to_WordPress

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

On design

6 cute bubble fonts for playful, modern designs

Bring a playful, cute feel to your designs with this list of 6 bubble fonts, perfect for branding, packaging, and more.

Read more
Sophisticated Fonts, A Typography Guide

Learn about sophisticated fonts, their characteristics, historical context, applications, and future trends in this comprehensive typography guide.

Read more
How top brands use Futura and Futura-inspired fonts to define their identity

See how 12 brands use Futura and Futura-inspired fonts in their branding, from Nike to The Guggenheim Museum, and learn about Scal, the perfect geometric font for art, fashion, and...

Read more

Cart

Your cart is currently empty.

Start Shopping

Select options