How to Add Custom Fonts to Squarespace

Heads up: this post contains affiliate links. This means that I will earn a small commission if you decide to make a purchase using one of those links. This comes at no extra cost to you. My chips and salsa fund thanks you from the bottom of my heart… err.. stomach?

Fonts are a great way to add a touch of personality to your Squarespace website. One of the things that’s great about Squarespace is that it comes with Adobe Fonts and Google Fonts. In other words, there are literally thousands of fonts to choose from.

But, sometimes you want to use a custom font that isn't available through Adobe or Google. So, where can you find custom fonts and how can you upload custom fonts to your Squarespace website? That’s what this week's tutorial is all about.

Adding custom fonts to Squarespace is not difficult. All it takes is the right font files and a little bit of code magic. Read the full tutorial over on Ley Design Studio blog.

Where to Find Custom Fonts for Squarespace?

If none of the available font options in Squarespace tickle your fancy, all is not lost. There are several places where you can purchase unique and gorgeous fonts for your website.

Creative Market — this is one of my favorite places to find and buy stunning script, handwritten, and regular serif and sans-serif fonts. A few of my favorite ones include Roxborough CF, Printed Moments, and The Seasons.
Font Squirrel — you can find great fonts here and some of them are even free for commercial use.
MyFonts — they have thousands of premium fonts that you can purchase a license for.

Once you’ve found and purchased a font you want to use, adding it to Squarespace is pretty easy. However, keep in mind that this will require you to add and modify CSS code. Still, the process is pretty straightforward and easy enough even if you’re a complete beginner.

So with that said, let’s move on to the tutorial portion.

SUBSCRIBE ON YOUTUBE

Step 1: Choose And Prepare Your Custom Fonts

Before we actually add a custom font to your Squarespace website, you’ll need to make sure that you have the correct files. Rather, the font needs to be in the correct format. More specifically, you’ll need either an .otf or a .ttf font file and also .woff and .woff2 font files.

To make sure that you have those file formats, be sure to purchase the webfont license. This will make sure that your fonts are in the web-friendly format and ensure that all the web browsers can correctly render them.

Step 2: Upload Your Custom Fonts to Squarespace

So, once you’ve made sure that your fonts are in the correct format, it’s time to upload them to Squarespace. To do this, go to Design > Custom CSS. Click on Manage Custom Files and then click the arrow that says Add images or fonts.

Then, upload the .ttf, .woff, and .woff2 font files one by one. Once you’ve done that, we need to tell Squarespace that you want to use those font files.

Step 3: Use Custom Fonts in Squarespace

So first, we have to tell Squarespace to use those fonts instead of the built-in ones. So add this bit of code first:

@font-face {   
font-family: 'font-name';   
src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2);}

Within this code, you’ll need to modify the second and third line. For the font name, you can enter the font name as it is or you can give it a name such as custom which is what I’ve done to keep it simple.

Next, you need to update the urls of the fonts in brackets. The easiest way to do this is to select everything in the bracket (the URL.ttf/otf part) and then delete it. Make sure that your cursor is between the brackets and click Manage Custom Files . Then click on the URL of the font you’re replacing. So first, click on the URL for the ttf font file or the otf font file. Then, repeat this process for the woff font files.

Next, let’s tell Squarespace where exactly to use those custom fonts. Add the following line of code:

h3{
font-family: 'custom';}

This will basically tell Squarespace that you want to use this font for all headings 3 on your website. If you want to use it for all headings, you can do so with the following code:

h1, h2, h3, h4{
font-family: ‘font-name’;}

If you want to use a custom font for your paragraphs, then the code would look like this:

p{
font-family: ‘font-name’;}

Step 4: Style Your Custom Fonts

Once you’ve done that, the custom fonts will use the styles that you’ve specified in your Style Settings. Any changes you make there will be reflected on those custom fonts.

But what if you want to style them differently? Well, you can with a little bit of code magic!

Let’s say you want to change the color to one that’s not in your Style Editor. Or maybe, you want to increase the size of the font. You could do this:

h3{
font-family: 'font-name';
color: #ba1157;
font-size: 4em;}

When you’re done customizing your fonts, click Save and you’re essentially done.

Using Custom Fonts For Specific Elements in Squarespace

But what if you want to apply a custom font to a specific element on your website? Maybe you want to style the quote block?

Well, for that, you’ll need to right-click on the element you want to customize and select Inspect. Your browser will then popup a window where you can see the CSS element and class name that you need to use in your CSS. For example, to style the text in your quote block, you can use this code:

.sqs-block-quote blockquote{
font-family: 'font-name';}

Using Custom Fonts in Squarespace

And that's how you can add custom fonts to Squarespace. As you can see, it's not too difficult and there isn't a lot of code involved. If you follow the steps that I outlined in this tutorial, you'll be able to do it yourself pretty quickly.

And if you want to learn more about using Squarespace, stick around and read these tutorials next:

BLOG