How to add a custom font to your website

When I recently asked my readers what they were struggling with on their website, one of them answered:

I’ve tried to integrate a new font into my existing website and I still haven’t been able to do it – I end up using the available fonts.

In this post, I walk you through how to add a custom webfont to your site.

What is a custom font?

Any font that isn’t a default font is a custom font in my book. A small set of fonts is available on all computers (no matter if it’s Windows, Mac, or Linux) and many years ago these were the so-called “web-safe” fonts. Websites would only use these fonts, because you could be sure that everyone would have the same font, so the website would look the same for everyone. Now, you can load custom fonts into your website and use any font you like.

Where do you get custom fonts?

A lot of themes already include some custom fonts for you to choose from, usually from Google Fonts. You can also buy fonts from sites like MyFonts and Creative Market. Another option is Typekit, which has a limited amount of their amazing fonts also available on the free plan.

If you want to add a Google font that’s not available in your theme to your site, I have a post on How to add Google Fonts to your website over here.

How to add a custom font to your site with Typekit

Once you’ve chosen a font, click the Add To Kit button and create your webfont kit. You get a code similar to this:

 <link rel="stylesheet" href="https://use.typekit.net/[random].css">

Copy this code and use the Insert Headers and Footers plugin to paste it into the header of your site. That’s all. Now you can use the font in your CSS like this:

h1 {font-family: "Your Font Name Here";}

How to add a downloaded custom webfont to your site

Once you’ve downloaded a font from a place like MyFonts or Creative Market, you get a zip file with font files, and sometimes with the CSS code ready for you to include. If you only get ttf and otf files, but the font you bought is allowed to be used on the web (check the license before you buy!), you can use the FontSquirrel Webfont Generator to generate more font files, which you need to make sure it’ll work in all browsers (Chrome, Firefox, Internet Explorer, Safari, etc.).

You can upload the font files (the files ending in ttf, otf, woff, eot and/or svg) to your site with FTP or in your hosting control panel (usually cPanel).

Once the font files are in a folder on your website (I’d put them in a folder called fonts inside your child theme), you need to include the files in your CSS like this:

@font-face {
	font-family: 'Your Font Name Here';
	src: url('fonts/filename.eot');
	src: url('fonts/filename.eot?#iefix') format('embedded-opentype'),
	url('fonts/filename.woff2') format('woff2'),
	url('fonts/filename.woff') format('woff'),
	url('fonts/filename.ttf') format('truetype');
}

If the CSS code is included with your font download, you can just copy it from there.

Including multiple styles of the same font on your site

If you have multiple versions of the font (bold, italic) to include, you can do that like this:

@font-face {
	font-family: 'Your Font Name Here';
	(src stuff here pointing to the Normal/Regular files);
	font-weight: normal;
}
@font-face {
	font-family: 'Your Font Name Here';
	(src stuff here pointing to the Italic files);
	font-style: italic;
}
@font-face {
	font-family: 'Your Font Name Here';
	(src stuff here pointing to the Bold files);
	font-weight: bold;
}

Note how the font-family is the same with each @font-face. Sometimes, people use different font names for different styles of the same font.

@font-face {
font-family: 'Your Font Name Bold';
(src stuff here pointing to the Bold files)
}

The problem with this, is that the browser thinks this is a Regular version of Your Font Name Bold. If you then by accident use font-weight: bold on an element already using the bold version, the browser makes it faux-bold. Faux-bold means it doesn’t have files to use for the bold version so it just uses a bit of calculation to make it bolder than the “regular” version. This usually doesn’t look very good. This issue can be prevented by using the code I gave above, using the same font-family name for each version and using font-style: italic or font-weight: bold to assign the right styles to the right files.

Now you can use the font in your CSS like this:

h1 {font-family: "Your Font Name Here";}

or

h1 {font-family: "Your Font Name Here"; font-style: italic;}

or

h1 {font-family: "Your Font Name Here"; font-weight: bold;}

That’s all there is to it! I hope this helped you add custom fonts to your website.