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

Fonts for Independence Day: 10 Contemporary Typefaces to Boost Your Celebration Graphics

Explore ten stylish fonts perfect for creating impactful and standout Independence Day graphics.

Read more
Bold sans-serifs: Not just loud, but profoundly expressive

Bold sans-serif fonts break stereotypes, revealing depth and personality through design nuances that make each character stand out.

Read more
Font fundamentals: What fonts are best for email marketing?

This article shares the best system fonts for email marketing, balancing brand identity with the technical limitations of popular email clients to improve readability and engagement.

Read more

Cart

Your cart is currently empty.

Start Shopping

Select options