There are lots of free fonts you can use on your WordPress website. Take Google Fonts for example. Most popular themes come with Google Fonts included in the theme, so you can easily select from the CMS which font you’d like to use and where.
However, sometimes the free Google Fonts don’t cut it. So what do you do then? Well, you use @Font-Face and a little bit of CSS3.
@Font-Face allows you to specify a font and declare where it is used on your website. Using this CSS3 rule, you can upload and use a custom font on your WordPress website.
Find a custom font
If you already have a custom font you want to upload, you can skip this section.
There are free custom fonts, and premium custom fonts that you have to pay for.
Font Squirrel is a great place to start for a free custom font, or if you don’t spending a bit of money you can check out places like Adobe Typekits
Pro tip
Have you ever seen a gorgeous font an another website and wondered what it was? Well now you can stop wondering!
Simply download and install the WhatFont Google Chrome extension and you can hover over text on a website to find out what font it’s using. You can then track down and download a version of this font for your website.
Font types
Now that you’ve stepped outside the familiarity of Google Fonts, it’s time to learn about the different font types that exist. Each font type has a different extension and different compatibility with a range of browsers.
- TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
- OpenType Font (OTF) – Has the same browser compatibility as TrueType Font
- Web Open Font Format (WOFF) – Works with Internet Explorer version 9.0 and above, Chrome 5.0+, Firefox 3.6+, Safari 5.1+ and Opera from 11.1
- Web Open Font Format 2.0 (WOFF2) – Works with Google Chrome since version 36.0, Firefox from 35.0 and Opera from 26.0.
- Embedded OpenType Font (EOT) – Only works with Internet Explorer version 6+
Web Open Font Format has become the industry standard best practice font type as it contains extra meta data and uses less bandwith to render. However, it’s often hard to find WOFF versions of all fonts and it is a font type used on modern browsers.
TTF and OTF fonts are easier to find and may be available if you can’t find a WOFF version of your chosen font.
Once you find the font you want to use, download it in a zip file and extract the contents so its ready for upload to your website.
Uploading your font file
Because we’re not using Google Fonts, which is made available to your website via a script embedded in your head, we will need to upload our font file to our website so we can reference and use it.
With Google Fonts, these fonts are stored at Google, with a custom font we’re going to have to upload it and host it ourselves. Don’t worry though, font files are usually tiny!
Uploading via file manager
To upload your font using file manager, follow these steps:
- Access your website cPanel
- Navigate to file manager
- Navigate to wp-content/themes/your-theme/fonts (or create a fonts folder if one doesn’t exist)
- Upload the custom font zip file
5. Unzip the font within the folder
6. Make a note of the file path as you will need to reference it in your CSS
Adding the font to your theme
The next step is to add your custom font to your theme. This requires that you reference it in your styles.css document and specify where you want it to apply.
If you haven’t already, make sure you are using a child theme so that your custom CSS is not lost through any theme updates.
For more background on using custom CSS on your site, you could check out our other post How To Use Custom CSS On WordPress Pages.
You can add custom CSS to your website to reference your new font in one of two ways:
Using the WordPress Editor
The WordPress editor is a code editor that can be accessed from the WordPress CMS. To access it, go to Appearance > Theme Editor.
Within the Theme Editor click into your themes style.css file and write a @font-face query to reference your custom font.
2. Using file manager
You can also use file manager to write directly to your style.css file (the same method you used to upload your file). Simply click ‘Code edit’ to access the editor necessary to do this.
Writing a @font-face query
Now we come to the good bit, the actual code! As we discussed earlier, @font-face is a CSS query used to tell your website about a custom font and where it is located.
So let’s look at how you write this query for your custom font, and then how you determine which parts of your website use the new font.
@font-face {
font-family: CustomFont;
src: url(public_html/cpanel-username/wp-content/themes/your-theme/fonts/CustomFont-Regular.ttf);
font-weight: normal;
}
Let’s break this down so you understand it and can reuse the code on your site.
font-family: CustomFont;
CustomFont can be replaced with any name you like.
src: url(public_html/cpanel-username/wp-content/themes/your-theme/fonts/CustomFont-Regular.ttf);
This tells your website where your custom font is. It’s important when specifying the file path that you know what your cPanel username is, as that is what you need to write in place of ‘cpanel-username’.
font-weight: normal;
Font-weight determines if the font is bold, normal, or light (thin text). You can set it to normal, bold, light, or use a numerical value from 100-900 to control boldness.
Specifying where your custom font is used
The final step is to specify where your custom font will be used. This requires another small CSS snippet, that I will show you how to construct below.
Custom font for entire website
To use your custom font on your entire website, you would write a snippet like this:
body {
font-family: "CustomFont";
}
Custom font for your buttons
button {
font-family: "CustomFont";
}
If you wanted to use custom font for another global element, like all your paragraphs for example, you would just replace ‘body’ or ‘button’ with ‘paragraph.
If you’re still not sure, leave a comment and we will help you resolve your @font-face query.
