How to upload and use custom fonts on your website

Fonts are such an important aspect of a website’s design.

But to use a font on a website you need to ensure that is “web safe”. This means the fonts will work online on a number of systems and devices, regardless of whether the user has the font installed on their computer or not.

We’ve already looked at adding custom fonts using Google Fonts in a previous post, but in this post I want to show you how you can upload any font to use on your website.

In this post I’ll show you how to upload and use custom fonts on your website. I’ll also show you how to convert your fonts into different formats.

1 | Choose and download the font you want to use

First of all you need to choose the custom font you want to use on your website, and then download it on to your computer.

There are lots of websites where you can download fonts for free, but a few of my favourites include:

• DaFont
• Font Squirrel
• FontSpace

It’s important to remember that not all fonts are free to use! Make sure you choose fonts that are free for commercial use or else you could landed yourself in big trouble! Many of the font websites I have listed above allow you to filter the fonts to only show those that are free for commercial use.

In this tutorial I’m going to walk you through the process of downloading a font from DaFont. On the DaFont website you will see the filtering options that look like this:

Click More options to reveal the filtering for. Select Public domain / GPL / OFL and 100% Free to find fonts that are free for commercial use.

The font I’m going to be using in this tutorial is called “Caviar Dreams”. As you can see this font says “100% free” next to it which means I can use it on my website. Click Download to download this font to your computer.

Make a note of where this file has been downloaded to as you are going to need it in the next step.

2 | Convert your font into different formats

Did you know that fonts come in a variety of file formats?

Just like there are different file formats for images (e.g. PNG, JPEG, GIF) there are different file formats for fonts too.

But the thing is, not all browsers support all font formats. The table below (from W3Schools) shows you which font formats are compatibility with each browser version.

So, to ensure that all users of your website can see the fonts you have chosen, it’s best practice to have your font in a variety of different formats.

Now, if you were to take a look at the font you just downloaded to use on your website you will probably see that it is only in one format. For example, when I downloaded “Caviar Dreams” from DaFont I only received it in the TrueType Font (TTF) format.

The good news is you can easily convert your font into a range of different formats using an online converter. The website I use to generate different font formats is called Transfonter.

Once you are on the Transfonter website, click Add fonts and then select the font you would like to upload and convert.

Then, once the font has uploaded, you can select the font formats that you would like to generate. Click Convert when you are ready.

Note: TrueType Font (TTF) and OpenType Font (OTF) have the same browser compatibility so you only need one or the other, not both.

This will then convert your font, and once it’s ready to download you will see a link that says Download. Click on this to download a folder containing the different formats of your font.

Once the download is complete, open up the folder and you will see your font in various formats. As you will see they are different file types with different extensions.

You will also see a CSS file in this folder called “stylesheet”. If you open this up you will see the @font-face CSS rule that is used to pull in the fonts on your website. This is a very helpful resource, but don’t worry about it for now as we will cover this later in the tutorial.

3 | Upload your font files to your website

Now that you have your font files it’s time to upload them to your website. You can do this via FTP, or if you have a cPanel account you can upload the files via the File Manager.

If your website is powered by WordPress then I recommend creating a directory (folder) in your theme directory called “fonts” and then uploading your fonts to this directory.

4 | Use the @font-face CSS rule to call in your font files

Once you have uploaded your font files to your website its time to call in this files so that you can use them.

To do this, you need to add @font-face CSS rule to your website’s external stylesheet. If you are a WordPress user, this is your style.css file.

If you used Transfonter to convert your fonts you can just copy the whole @font-face rule from the file called “stylesheet” file that was in the folder you downloaded and paste this into your external stylesheet. And that’s all you have to do to call in your font files!

But, because I like to explain how things work, I’m going to show you how to set this up manually as well.

So, start by creating a new CSS rule using the @font-face selector like so:

@font-face {

}

Within the curly brackets we need to specify the font family. This can actually be what ever you want it to be, but I recommend just using the name of the font! Remember, if you use multiple words make sure you place then within quotes.

So this is what my CSS rule looks like so far:

@font-face {
    font-family: 'Caviar Dreams';
}

Now we need to call in the specific font files that we just uploaded to our website. To do this we use the src property, and the value is the file name.

@font-face { 
    font-family: 'Caviar Dreams'; 
    src: url('CaviarDreams.ttf'); 
}

Make sure that if you have put your font within a file that you include the rest of the file path. So for example, if you are using WordPress and you placed your font files within a directory called “fonts” within your theme directory, you would need to include the file path like so:

@font-face { 
    font-family: 'Caviar Dreams';  
    src: url('fonts/CaviarDreams.ttf'); 
}

The next step isn’t actually required but it’s good practice to specify the format of your font after the name of your font file. So as the font format I have called in is TrueType I would just use ‘truetype’ as the format like this:

@font-face { 
    font-family: 'Caviar Dreams';  
    src: url('CaviarDreams.ttf') format('truetype'); 
}

Now, as know we uploaded multiple formats of our font to our website and so we need to call all these different files in as well.

To call in multiple font format files, add in your additional src values. It’s a good idea to put them on separate lines, and make sure you separate each of these with a comma and add in a semi-colon after the final value.

@font-face { 
    font-family: 'Caviar Dreams';  
    src: url('CaviarDreams.ttf') format('truetype'), 
         url('CaviarDreams.woff') format('woff'),
         url('CaviarDreams.woff2') format('woff2');
}

If you want to include any extra styling to this particular font such as font-weight or font-style you can do so within this @font-face rule.

If you want to use multiple custom fonts on your website then you will need to create a new @font-face rule for each font.

5 | Start using your font

Once you have called in your font files you can start using your font. This would not be simpler.

All you have to do is use the font-family property (or font if you are writing it shorthand) and use the font-family value that you declared in the @font-face CSS rule. For example, my font-family value was ‘Caviar Dreams’, so if I wanted to make all my h1 HTML elements use this font my CSS rule would look like this:

h1 {
    font-family: 'Caviar Dreams';
}

Make sure you test your websites in different browsers to make sure the font is working as expected.

Pin for later?