How to Add Custom Fonts to Squarespace in 3 Easy Steps [2025]

Squarespace comes with 600 Google fonts and 1,000 Adobe fonts for you to choose from. You can check out some of our favorite Squarespace font pairings for inspiration.

Let's say you don't want to use one of the fonts included in the Squarespace font library. Maybe you bought a font from Creative Market, MyFonts, or another third-party source. You'll need to upload your font file to Squarespace and add CSS code to apply your custom font to the various text styles on your website.

If that sounds complicated, don't worry! I'll show you how to properly install a custom font in Squarespace and give you copy-and-paste code to make it easy. Watch the tutorial below or scroll down to read the written version and grab the code.

FYI, this tutorial will work on Squarespace 7.1 and 7.0.

[EMBED YOUTUBE VIDEO]

Step 1: Upload your font files.

First, you'll need to collect your font files. You may have multiple font file types to choose from. The WOFF format is preferable for use on the web because it loads faster than TTF or OTF files. Any file format will work fine, so don't worry if your chosen font only comes with TTF or OTF files.

You will need to upload all font styles that you plan to use on your website. That means you'll need to upload normal and italic versions of the font, along with any font weight variations you plan to use (light, regular, bold, etc.). Squarespace will try to bold or italicize text even if you don't upload all the different styles, but it likely won't look the same as the intended bold and italicized versions of a font.

Now that your font files are ready to go, it's time to upload them to Squarespace. In your Squarespace dashboard, under Website, click on Pages. Scroll down to the bottom and click Website Tools → Custom CSS → Custom Files.

Click the + icon and select your font files, or drag and drop them directly into the upload window. When the file has been successfully uploaded, it will be listed under the upload box.

How to Add Adobe Fonts

This process is a bit different if you're using an Adobe font. Instead of uploading the font file, you'll need to link an external style sheet.

To do this, find the font you want to install on fonts.adobe.com. Click Add to Web Project. Deselect any font variables you don't plan to use on your website and create a new project or select one from the dropdown menu. Then, click Save.

Copy the HTML code at the top of the popup window. On your Squarespace website, go to Pages (under Website). Scroll down to the bottom and click on Website Tools → Code Injection. Paste the code in the Header section.

Step 2: Add the CSS Code.

Copy and paste the following code into the custom CSS box:

@font-face {
  font-family: YOURFONT;
  src: url();
}

You will need to paste this once for each font file you just uploaded.

Replace YOURFONT with the font family name. Then, click between the two parentheses after src: url and select the correct font from the drop-down menu that pops up. Alternatively, you can click Custom Files and select the file name from there. The font URL will automatically copy and paste.

We've just installed the custom font, but it hasn't been applied to any text styles yet. That's what we're going to do next. To apply the font to headings, copy and paste the following code:

h1, h2, h3, h4 {
  font-family: 'YOURFONT';
}

Next, let's set the font for italicized headings.

h1 em, h2 em, h3 em, h4 em {
  font-family: 'YOURFONT';
}

And let's do the same for bold headings.

h1 strong, h2 strong, h3 strong, h4 strong {
  font-family: 'YOURFONT';
}

Let's say you only want to use this font for headings 1, 3, and 4. You can simply remove h2 from the list, like this:

h1, h3, h4 {
  font-family: 'YOURFONT';
}

To set the font for body text, use this code:

.sqsrte-large, p, .sqsrte-small {
  font-family: 'YOURFONT';
}

You can set the font for the bold and italic paragraph text just like I showed you above with headers, by adding em for italics and strong for bold, like this:

.sqsrte-large em, p em, .sqsrte-small em {
  font-family: 'YOURFONT';
}

There are other types of text you can customize on your website. This is not an exhaustive list, but rather a selection of some of the most common items users want to adjust.

This is the code for changing the site title font:

.header-title-text a {
  font-family: 'YOURFONT';
}

Use this code to change the font of your navigation links:

.header-nav-item {
  font-family: 'YOURFONT';
}

Here is the code for changing the font of summary block links:

.summary-title-link {
  font-family: 'YOURFONT;
}

This code will change the font of a blog post title:

.blog-item-wrapper .blog-item-title h1.entry-title {
  font-family: 'YOURFONT';
}

To change the button text font, add this code to the CSS box:

.sqs-button-element--primary, .sqs-button-element--secondary, .sqs-button-element--tertiary {
  font-family: 'YOURFONT';
}

If you want to apply a custom font to any other text style in Squarespace, check out our beginner's guide to Squarespace CSS code. This will show you how to find the correct selector to target for any element on your website!

Step 3: Adjust the Site Styles.

You may want to adjust the font size, letter spacing, line height, and capitalization. This is best done in the font settings within site styles panel.

To open the site styles panel, click on the paintbrush icon in the upper right corner. Then, click the arrow next to Fonts to view the Squarespace font settings.

Select the font style you want to adjust. From here, you can change the font size, line height, letter spacing, and text transform properties without using custom code.

That's it! Adding custom fonts on Squarespace websites may take a little CSS code know-how, but once you understand how it works, it's not too difficult.

Some of our Squarespace website templates include custom fonts and come with the code needed to apply your own custom font to different text styles pre-installed, which makes this process even easier! For example, we use a custom font for headers on our Salem template, which is pictured in this tutorial.