How to add custom fonts to Squarespace

How to add custom fonts to Squarespace

When you create your website with Squarespace you have access to a lot of Squarespace fonts. But maybe you have your own font or you found a font that is not available on Squarespace. That’s no problem at all. You can definitely add custom fonts to Squarespace. You just have to add some code and voila. Luckily I’m here to give you that code.

So how do we add custom font to Squarespace websites?

Download the font on your computer. Most of the time it’s a ZIP file. Go into it and drag the type you want to your download section. The extension should be .TTF, .OTF, or .WOFF. 

Go to Design - Custom CSS and scroll down to Manage Custom Files. Click on that and upload the file. 

Now we have to tell Squarespace you want to use the Squarespace custom fonts. Paste this first code into the CSS Editor window.

@font-face

{ font-family: 'thename'; src: url(theURLgoeshere); }

You can give the font the name you want. As long as you use that name consistently. That can be helpful if the font you chose has a very long name. 

What do you have to do next on your Squarespace website?

So now we have to change the name and the URL goes here. You have to leave the ‘’ and the (). 

Giving it a name isn’t that hard but what about the URL. Where do you find that?

Go back to Manage Custom Files and click on the font. The URL will show.

Now you’ve let Squarespace know how you want to call the custom font and where they can find it. The next step is to let Squarespace know when you want to use it. Do you want to use it for your body text, for (all) your headers, or both? 

Copy the code you want to use and paste it in the CSS Editor Window and you’ll see that it overrides the font you already set. This is the second code you have to paste into the CSS Editor.

// Heading 1 //

h1 {font-family: 'thename';}

// Heading 2 //

h2 {font-family: 'thename';}

// Heading 3 //

h3 {font-family: 'thename';}

// Heading 4 //

h4 {font-family: 'thename';}

// Paragraph 1 //

.sqsrte-large {font-family: 'thename';}

// Paragraph 2 //

p {font-family: 'thename';}

// Paragraph 3 //

.sqsrte-small {font-family: 'thename';}


See, you have some work to do but you can add custom fonts to Squarespace is fairly easily. But if you don't want to do this you can choose one or more of the Squarespace fonts already has available for you.

Squarespace custom font cheat sheet

  1. Download font in ZIP file
  2. Drag the file out of the ZIP file
  3. Upload the file in Manage Custom Files
  4. Add the first code in the CSS Editor window
  5. Click on the font in Manage Custom Files and the right URL wil show up in CSS Editor
  6. Add the second code in the CSS Editor window

And now you added a new Squarespace font. By the way: you can add as many custom fonts as you want. But I wouldn't work with too many different fonts.

10 ways
you can make money
using Squarespace

  • 4 June, 2021

Marit Verlaat

I'm an introverted online business owner with wanderlust. I believe that being an introvert is one of the best assets a business owner can have. Introverts are excellent at working alone. They can work towards a goal without getting distracted. Plus, introverts are amazing at learning new things. I'm here to empower you to make your own website as awesome as you are. From the comfort of your own home. In your own time. So you can live the life of your dreams.

>