How to Add Custom Fonts to Squarespace Like a Pro

Want to add custom fonts to Squarespace?

If you’re a Squarespace user, you already know that the platform comes with some solid font options. But there are lots of reasons to add fonts to Squarespace websites!

Usually, it’s a brand font, or even a bespoke one you have had made.

Maybe it’s more about a particular look you want to create for elements within your website.

Whatever the reason, it’s easy to add custom fonts to Squarespace – just follow this process!

How to add a custom font to your Squarespace website

Adding a font you choose to your Squarespace website is pretty simple, but there’s a little CSS to add.

Make sure you’re okay with doing that before you start, or grab someone who is.

Step 1. Choose your font

If you’ve already chosen the font you want to use, then skip to the next step. Otherwise, make sure you chose a font that you can legally use on your blog.

There are loads of places to find free and paid fonts, such as Creative Market. But check licensing before you add one to your website.

Step 2. Prepare your web font files

To add a font to the website, you’ll need three font file formats:

1. .ttf or .otf
2. .woff
3. .woff2

Sometimes you might have a web font file type and if you do, skip this step. You can use just that.

Otherwise, have the three file types ready to add.

Step 3. Upload your font files to Squarespace

Go to Design > Custom CSS > Manage Custom Files

Here you’ll add fonts via the upload button.

Repeat this for all three files, or for the web font file if that’s what you have.

Step 4. Name your custom font in Squarespace

Once the font is uploaded, you need to tell Squarespace where and what it is with the CSS Editor.

Use the following code:

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

Take this and add the relevant information for your font:

• Font name: replace this with the name of your font based on the file name or something you’ll remember.
• Font URLs: replace this with the URL(s) of the fonts you just uploaded. Grab the URL from your uploads area (in the same way you would for an image URL) and add this in place.

Step 5. Define where & how the custom font should be used

Finally, you just need to tell Squarespace where to use the different fonts on your website.

This can be in places such as your headers or site header, buttons, or even something like the newsletter block.

How to use your font in common places

Once you have uploaded your font, then you can start giving Squarespace specific information about where to use it.

Here are a few popular examples and how to do it.

How to Change the Site Header Fonts

The site header is the area at the top of the navigation bar.

You might have lots of links here, a text logo and maybe an announcement.

The font of all of these can be changed using the following CSS snippet:

// Site Title //
.header-title-text a {
font-family: YOURNAME !important;
}
 
// Site Navigation //
.header-nav-item a {
font-family: YOURNAME !important;
}
 
// Button //
.header-actions-action .btn {
font-family: YOURNAME !important;
}
 
// Announcement Bar //
.sqs-announcement-bar-url a {
font-family: YOURNAME !important;
}

Remember to replace YOURNAME with the name of your font.

How to Change the Button Fonts

Another popular place to use custom fonts is on the buttons of your website.

There are three button blocks: Small, Medium, and Large. You can change one or all of them with the following code:

// Small Button //
.sqs-block-button-element--small {
font-family: YOURNAME !important;
}
 
// Medium Button //
.sqs-block-button-element--medium {
font-family: YOURNAME !important;
}
 
// Large Button //
.sqs-block-button-element--large {
font-family: YOURNAME !important;
}
 
// Image Block Button //
.image-button a {
font-family: YOURNAME !important;
}

Remember to replace YOURNAME with the name of your font.

Pin it to Pinterest so you can come back later!

(More custom font tips and troubleshooting after the graphic).

How to Change the Newsletter Block Fonts

The Newsletter block allows people to sign up for your email list. Many people use different plugins for this.

But if you use the block within Squarespace, the following code will let you add a custom font.

// Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important;
} 

// Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important;
} 

// Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important;
} 

// Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important;
} 

// Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important;
}

Remember to replace YOURNAME with the name of your font.

How to Change the Blog Post Fonts

One of the most popular things to do with a font is to use it for blog posts.

You need to consider the page title, descriptions and post titles on article pages when doing this.

You’ll probably want them all to be the same.

// Blog Page Post Title //.blog-title { font-family: YOURNAME !important;
} 

// Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important;
} 

// Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important;
} 

// Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important;
}

Remember to replace YOURNAME with the name of your font.

How to Change the Quote Block Fonts

The last example is to change the Quote Block to a different font.

This is used for quotes in posts but also things like customer testimonials or reviews.

// Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important;
} 

// Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important;
}

Remember to replace YOURNAME with the name of your font.

You might also like my Squarespace image size guide.

Custom font problems

Adding fonts is an easy job once you have a handle on a little CSS. But there are a few common errors that are reported.

“Unsupported Fonts” message in site styles

Occasionally, you might see an ‘unsupported font’ message on your site. This happens when an Adobe Font is used and then Adobe retires it.

Most of the time, Squarespace will substitute it for the closest alternative. But if not, you might need to upload another font to replace it.

My font looks different when I’m logged in

Sometimes people notice their fonts look different when logged in and when viewing the live site. Usually, this is because of font readers and how they view the site.

If you notice this, contact Squarespace support and they can look at settings to see what needs to be adjusted.

I can’t set my font to a specific size

Problems with setting a specific size for a font is usually to do with the backend of your website. It can be due to the version of Squarespace you’re using.

So, reach out to support to get their assistance with what might be wrong.

Add your custom fonts to Squarespace

With a touch of CSS, you can quickly add custom font files to Squarespace.

You can use them in different places with a bit of code and adjust everything from size to letter spacing.

The Style Editor made it easy to customize your website beyond the built-in font options.

So how could you use custom fonts to make your website look even smarter?