How to install custom fonts in WordPress

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 OpenType features. OpenType features are, for example, alternative characters, ligatures, and fractions.

When you purchase a font from Mojomox, you get the same files whatever license you choose: OTF for design software and WOFF/WOFF2 for websites, plus a variable font with the family. The license is what you pick: Desktop for design software (Illustrator, Figma, Canva etc.), Web for a website, or Combo Desktop+Web for both.

For a website only, the Web license is enough.

Unzip font folder

After you purchase a font, you’ll get a link to download a ZIP folder. After downloading, double-click or right-click the folder to unzip. For your website, you need the WOFF and WOFF2 files.

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 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.