fbpx
X

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:

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. 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. Add some CSS to show the fonts

Now for the slightly technical part, you need to add some code to your theme to make sure your font shows up on your website! The best way to use a custom font is for your headings or for your paragraphs.

To add the font to your CSS, head to Appearance > Customize > Additional CSS, where you can add styling without anything breaking your website. It even lets you know if there is an error!

Below are a few options for your CSS and where you can add your font to the website:

Main Headings:

h1 {
	font-family: 'Custom Font Name';
}

Sub-headings:

h2 {
	font-family: 'Custom Font Name';
}

All Headings:

h1, h2, h3 {
	font-family: 'Custom Font Name';
}

Paragraphs:

p {
	font-family: 'Custom Font Name';
}

Want to try out some different options for your custom font? You may like to learn a little bit more about code and CSS! Head to this Introduction to Code by DIY Design School for a bit more information and help with the topic.

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 hello@snugdesigns.co.uk and we’ll help as best as we can!

Pin This Post on Pinterest!