Add custom fonts to your website in 4 easy steps

Business

Jan 28

Showing up consistently with your brand is one of the key factors in building brand recognition. Maybe you decided to DIY your website, or maybe you’ve changed up your brand and now you need to spruce up your website. Did you get all the way to the design tab and realize your font isn’t there?

No worries, I’ve got your back.

First, navigate your way to the Custom CSS Tab.

Design > Custom CSS

Step 1: Uploading Your Font

At the bottom of the page, click Manage Custom Files. From there, you will upload your font. I save all of my font files on an external hard drive, but yours may live inside of the applications or font files on your desktop.

If you don’t have your font files, you can find them for free at www.dafont.com or paid licenses on Creative Market. I am on the Creative Market e-mail list and take advantage of their freebies every Monday. I can tell you it is my favorite part of Monday morning (that’s actually where my H1 font is from!)

Rather have it done for you?

1:1 Website Strategy

Step 2: Custom Code Snippets

After your font is uploaded, you’ll need to add a few code snippets to your CSS window. It’s easier than you think, just follow along.

Add this snippet to the next available line:

@font-face {    
font-family: 'NAME';       
src: url('FONT URL');  }

If you are new to working with code, it is important to keep most of the snippet as-is. Change NAME to the name of your font, and remove FONT URL.

I suggest keeping your cursor between (‘ ‘) for this next step. This will ensure that the URL is placed in the correct part of the code.

While your cursor is there, click on Manage Custom Fonts again. Then, choose the font you would like to add. When you click your font, the URL will appear! **This may be hidden if you have many lines of code, so do not keep clicking if you are unsure. That is a good way to mess up a whole string of code.

Step 3: Assigning the Font

Now that you have your font coded, you have to assign it to somewhere on your site. Here is the code you need:

h1 {font-family: 'NAME';}

Again, you change the NAME to the name of the font that you used in the first code snippet.

And, voila! Your font should have changed!

Step 4: Editing your text

At this point, maybe you wanted that font to be used on one of your other headings, simple change the h1 in your code snippet to the heading you desire. Try modifying the code to h2 or h3 and see how the code changes your site.

If you have your custom font on the heading you would like but it’s not looking quite right, head to the Site Styles tab under Design.

DESIGN > SITE STYLES > HEADING > FONT

Once you are there, you can click the item on your site that you would like to change. This will automatically open the correct dialog box. When you click on the dropdown under CONTENT: FONTS, you can change the color, font size, kerning, letter height etc. **Note: your font title will not change here, it will likely say the name of the previous font you had in this category.

I hope you were able to change up your site, making it even more unique to your brand. If this was helpful, I hope you will share it with your friends! Leave a comment below so we can see your site with your branded fonts.

Happy designing!

This post contains affiliate links, which means if you purchase an item with my code, I get a small kick-back as well. But be assured, I am only sharing these products because I use them every day and love them just as well!

I’m Brenna - and I can’t wait to chat with you about all things business and rural life. Thanks for reading!

Find more blogs like this

A few of my favorite things

Dubsado

Dubsado is the tool I use for client relations. I house all of my contracts, proposals, invoices, and deadlines there. It’s a lifesaver - used code bCreative20 for 20% off your first month or year!

FloDesk

I use FloDesk to run email campaigns and create beautiful monthly newsletters. Use my code for 50% off your FloDesk Subscription!

Squarespace

If you’re looking to build your own website, but still want a robust system, I cannot recommend Squarespace enough. Check out all of the templates they have to get you started!