Yesterday, I helped a client with uploading her custom font to her website. So, I decided why not make a quick tutorial with some easy steps to level up your branding, right?

We all know that Squarespace has a LOT of free fonts to play around with. They also offer font combinations that can be suited to your website. Kudos to Squarespace for that! BUT if your brand has been established for a while now, I’m sure you have a permanent font you use for your graphics and marketing materials. The chances are, it is not included in Squarespace (Oh no!).

But it’s not a problem because, in just 3 easy steps, I’ll teach you how to upload your custom font; Let’s get it on!

THINGS TO PREPARE

Basic CSS
This tutorial may include some coding, ok wait, don’t panic; it’s easy and definitely for beginners! You just need to copy and paste some code, and that’s it!
Your own font
Of course, you need your own font to start with.
A few reminders:
- If you don’t have a font, you can purchase them from incredible shops like CreativeMarket and Etsy. The good thing is when you buy one from them, you’ll be supporting lots of freelancers and local artists.
- IMPORTANT: Fonts and other elements are creative property - to legally use one, you need to have a license. If you can’t find the license, you can shoot an email to the font creator and ask for the license. Purchased fonts usually have the details on the product page for web usage, if there’s none, just message the seller, and you’ll be fine (better than fined!).
Prepare your font for website use
You’ll basically need 3 file versions to make sure that your font is fit across different browsers.
You’ll need:
- .TTF or .OTF
- .WOFF
- .WOFF2
Usually, the first one is readily available when you download a font. If you can’t find the .WOFF and .WOFF2, you can just pop the .TTF or .OTF file to FontSquirrel and they’ll convert them for you.

How to Add Custom Fonts to Your Squarespace Website

STEP #1: UPLOAD YOUR FONT.

Navigate to Design > Custom CSS and scroll to the bottom, and click the Manage Custom Files. From there, you can upload the 3 files of your font.

STEP #2: ADD YOUR FONT TO CSS CODE.

You can probably see now that the three files of your font are uploaded. Now, you need some magic to be able to use them; this is where the code will take over.

First, copy and paste this code to the CSS box.
@font-face {
font-family: 'font-name';
src: url(fontURL.ttf/.otf), url(fontURL.woff), url(fontURL.woff2);
}

Then, replace the font-name with the name of your font. Just name it whatever you want to; this will serve as your guide and reference.
After, you need to change font URLs. Go back to Manage Custom Files and select one of your font files to modify the font URLs.
When you double-click the file, a URL is instantly pasted into the Custom CSS box.
Then, between the brackets, paste this whole URL into the corresponding section in the code.
Don’t forget to save your progress, and congratulations because you’ve added your custom font by yourself. But we’re not done yet!

STEP #3: CUSTOMIZE IT.

Unlike Squarespace fonts, custom fonts won’t show up as a font option in your Style Settings. But the good news is, you just need some magic from coding again and tweak some settings to make sure you can use it!

Basically, all you have to do now is add a little more code to change one of your current headings to the new font.

First, you can write a sample of each font to see the updates simultaneously while you change the settings.
Like this:

MY AMAZING HEADING FONT 1

My Amazing heading font 2

My Amazing heading font 3

My Amazing normal/paragraph font P

Then, just paste this code below the previous code:
h1 {
font-family: 'font-name';
}
Change the font-name with what you named your font earlier.
This code will make your Heading 1 (H1) font replaced by your new font.
You can use the built-in site style editing options to adjust its size, weight, spacing, and other elements.
Just navigate to Design>fonts and tweak the settings.

You can also modify the h1 to h2, h3, or P. Just repeat the steps above!

Bonus!

WHAT IF I JUST WANT TO ADD A NEW FONT BUT REPLACE MY CURRENT HEADINGS?

You can definitely do that!

Add a code block.
Name the new font formatting option (heading 5 or h5).
Put the name of your new font formatting option between two of these brackets in your code block: <h5>
Type the text you want to appear on the page, for example: <h5> My amazing heading font 5 <h5>
Click save and navigate to the CSS window, design > custom CSS.

Note: The catch is you can’t change its style just like the earlier, but you can use the magic of CSS again to be able to do that.

Just copy and paste this code:
h5 {
font-family: 'font name' !important;
font-size: 60px;
font-weight: 300;
color: #000000;
letter-spacing: 7pt;
line-height: 2.5em; }

With this code, you can make your new font appear the way you want it to be. For example, you can change its size, heaviness, color codes, and spacing.

Voila! Now, you won’t need to change your font by just these simple steps.

My personal take, you can add lots of fonts with this knowledge but don’t overdo it! I suggest limiting your font and following best design practices.

Remember, consistency is the key.

Bonus content!

Learning code seems daunting to many of us, myself included. But don’t let this hold you back from using a little code from time to time.

It can do lots of magic in everything literally. Although Squarespace is a drag-and-drop builder, injecting some code from time to time can up your website’s game. So I suggest that you learn the basics of coding like what I taught you earlier to make sure that you still can maximize your website.

It’s not that hard, right? And it’s definitely worth it!

If you liked this post, Pin it to Pinterest!