A great font can make a strong design, and a strong brand. When creating a brand or a logo, choosing a font is one of the most important steps. So, it only makes sense that when people start customizing the design of their website, adding a custom font is one of the first things they want to do. Adding a custom font is the easiest and most impactful way to take your brand and translate it to over to your website.
The only problem is that most people don’t know how to add a custom font to their website. Though there are plugins that make it possible to add some fonts, adding fonts manually is the best way to add a truly custom font. Luckily, adding font options to your WordPress theme is quick and fairly simple, and there are a couple different ways to do it.
In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost. Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial.
There are a few different ways you can add fonts to your theme. One way is through Google Fonts. If you browser there and find a font you like, you can visit my post on How to Use Google Fonts on WordPress.
If you don’t like any of the fonts available through Google Fonts, you can read my post here on Where to Find Free Fonts for Commercial Use or you can purchase a font. Then you’ll have to download that font and install it to your site manually.
The only downside of using Google Fonts or finding a free font is that the font will likely be more common and more widely used, while purchasing a font means less people will have it and it will be more unique to your brand.
If you select a free font, you first have to make sure its license allows you to embed the font on a website with CSS. If you purchase the font, you need to make sure you purchase the license for that specific purpose.
Once you know you have the right license, you need to download the font onto your computer.
Next you have to make sure you have the right type of font files for online use, which will end in WOFF or WOFF2 Depending on where you got your font, you could have the correct files already, and if you don’t you have to convert them. To do this, you can use Font Squirrels Font Kit Generator. This will turn your font files into web ready font files. Then, download them onto your computer.
The next step is to upload the font files onto your website so they’re there and ready for use. Go into your FTP and import the font files into your theme folder. You can do this by just dragging the font files over the FTP window, or right clicking on the open white space and selecting upload, then choosing your font files.
You can see in this image below that I have my font ‘Bebas’ in my theme file in a few different formats.
Now that the font files are in your theme folder, you need to call them in your stylesheet so they are loaded by your website. When you download your font from Font Squirrel or if you already had web ready fonts, there should be stylesheet file that lists the code you need.
For each font, there is a piece of code that starts with @font-face that imports that font into your style sheet. Copy that code, and paste it into your style sheet file at the top under the initial header information. For example, if I was importing a font called Bebas, it might look like this:
Now that the fonts are registered in your style file, you need to actually use them. For each font that you registered at the top of your style sheet, there is a line that starts with font-family. You copy that line and use it later in your stylesheet to apply that font. For example, you if you wanted to make your header 2 a certain font, you would write:
Now when you save your stylesheet file, you should see the fonts change on your site! But, there is one more step that is very important. You need to create a font stack. If you just use the one font like above, then if that font doesn’t work, your text is going to default to a standard ugly computer font.
So, to avoid this, we need to give the computer some more options, so that if the first one doesn’t work it can try some others. You want to add a few more font familys, which get more and more generic as the list goes on (so that the computer is more likely to recognize them), and then add serif or sans serif at the end, so at the very least the computer knows which one you were going for. So you can try a font stack, like this:
font-family: ‘bebasregular’, Georgia, Times, ‘Times New Roman’, serif;
And that’s that! Once you add these fonts in and get the hang of using them you can easily change any font on your site to whatever font you like! This is a great way to customize your design to make your site look exactly as you want it to.