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.
