How to add a custom font to your website

Reading Time: 3 minutes

This blog post contains affiliate links. This means that I may receive a commission – at no extra cost to you – if you click on a link and make a purchase. I only recommend products and services that I use & love - whether an affiliate relationship is in place or not.

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="[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";}


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


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.


I'm Anouska

I help you create & sell digital products, so your business keeps working even when you rest.

I’m here to handle the design and tech while you focus on your passion.

Canva Template Shop

Create stunning digital products and promotional materials with my easy-to-use Canva templates.

Work With Me

Need personalized design and tech support? Let me handle everything from lead magnets to full launch support.

Course Launch Planner & Checklist

Get the free
Course Launch Planner & Checklist

It'll help you create a plan, stop wasting time googling and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch!

What my clients are saying:

"I'm now able to focus on what I love, coaching and teaching. Thanks to Anouska, I had a smooth course launch!" — Rebecca Tolin

"I LOVE my new sales page. I’m really, really proud and happy with it! I raised my price and more people joined." — Erika Vieira

Get in touch
Have questions or need more info? I’m here to help!

Contact me

Leave a Comment

Course Launch Planner & Checklist

Everything you need to do for a launch – without burning yourself out before enrollment opens

Prepare for your course launch using my free Course Launch Planner & Checklist.

It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.