How to Add Custom Fonts to Your WordPress Theme
Having a WordPress theme that you can completely customise with colour, layout and design is great, but what about when it comes to the more technical bits, like adding your very own branded font?
Most people who have created a brand themselves will have also created a font system to go along with it and maybe you didn’t want to use the same Google Fonts that everyone else uses?
Well, we have a great solution for you which will help you add your very own custom fonts to your WordPress theme without getting too technical!
Why would you want to use a custom font? Custom fonts can be a great way to make your brand completely stand out from others as you most likely won’t be using the same fonts as everyone else. They also help you build a brand image that completely fits your business as you don’t have any boundaries set with some free fonts or fonts attached to your theme.
Some great ways to use a custom font are:
- Adding personal accents to your design with a handwritten font
- Keeping your image up to date and modern with the latest font styles
- Standing out from other people with the same theme as you
Let’s jump in to a step by step guide to adding your own fonts to your theme!
1. Choose your fonts
The first step seems like the easiest but can be super hard as there are thousands and thousands of beautiful fonts out there. Some amazing places to find premium fonts are Creative Market & MyFonts or head to DaFont or Behance for some free font goodness.
Just make sure that whichever font you use is licensed for website use as well as anywhere else you want to use it!
2. Get your font files
As soon as you purchase or download your font, you will be given some files (probably with the file type .ttf or .otf). To make sure your font is right to use on your website, you need to make sure you have all the right file types for a web font. Each file type is used to show your font on a different browser or in a different scenario.
You may already have the right file types in your folder! The main ones you need are TTF, OTF, WOFF, WOFF2 and SVG. Your font may work with fewer file types but to make sure it works in as many places as possible, it’s best to upload as many file types as you can.
If you haven’t got these file types for your font, go to a Web Font Generator such as Transfonter and upload the font file you have in there. The generator will create the correct file types from that and allow you to download them.
3. Download the Custom Fonts plugin
The best way to add your custom font to your theme without worrying about too much code and technical bits is by using a plugin. One we have used and recommend is Custom Fonts (however there are many available!).
Using a plugin means you don’t have to dive into your WordPress files or use a File Transfer system and risk anything going wrong!
4. Add your files to the plugin
Whichever plugin you use will offer you a way to upload the file types you have and name your font.
If you are using the Custom Fonts plugin we recommend you can do this by going to Appearance then Custom Fonts in your admin area.
Make sure you are uploading as many file types as you have to make sure your font is visible in as many places as possible and then you shouldn’t have any problems with it showing up.
5. Select your fonts in the site editor
Once you’ve added your fonts via the Custom Fonts plugin you’ll be able to select your fonts within the site editor.
To do this, got Appearance then Editor, and once you are in the site editor click on Styles. Then click Typography and select the website element you would like to change the font of (e.g. Text, Links, Headings, Captions or Buttons).
You’ll now be able to select the font you’ve just uploaded to your website from the Font dropdown list:
Want to see a custom font in action on a Snug theme? Check out this amazing example from Anabelle from Wellspring Nutrition!
We hope this has helped you understand a little more about adding a new font to your WordPress theme! Got a little stuck? Drop us an email at firstname.lastname@example.org and we’ll help as best as we can!