How to use custom fonts in Squarespace

Squarespace has quite a large font selection built-in for your to choose from when designing your website.

But, if you're looking for a particular custom font as a part of your branding, or you're trying to achieve a specific effect with your font selection, then this article will go through four easy steps to explain how to use custom fonts on Squarespace.

Step One - Finding a font file

First up, you're going to need to find a font file in an .otf file format.

You need to double-check that you have the right files, as some OTF files will contain the regular font; others italicized or bold fonts. Just make sure you have the right file to upload to Squarespace.

We will sometimes use resources (just be aware that if you use these fonts, you don’t necessarily have the right to use them):

Step Two - Uploading the font to Squarespace

To add the font to Squarespace, from the dashboard, head to 'Design' and then 'Custom CSS'.

Right down the bottom of the panel, there is a button called 'Manage Custom Files'.

You can click on that and upload your file or drag and drop a file into that area which will then upload to the Squarespace server.

Step Three - Getting your font to work on Squarespace

In order to get your font to work on Squarespace, you need to add in some CSS code that tells Squarespace which elements you want to use this particular font on.

For example, if you want all the headings in the site to be one custom font type, and all the paragraph tags to be a different font, you need to declare that in the custom CSS.

This is in example of how we’d upload “Neris-Light” and use it to target all the paragraphs throughout the site.

/*This code links the file to a usable name that we can target*/
@font-face {
  font-family: 'Neris-Light';
  src: url('https://static1.squarespace.com/static/62554a379dc7e96b0ee4c256/t/62554be23d00774b3bb6c9ed/1649757155240/Neris-Light.otf');
}

/*This code changes the font on the site to "Neris-Light"*/
p{
  font-family: Neris-Light;
}

Step Four - Further customization

After your font is uploaded and working, you can further customize your font.

Within the same CSS code, you can specify different properties to tailor your font to your own specifications.

You’re not limited in ways to customize your font, and you can include options to make your font italicized, increasing the font size, changing the letter spacing, transforming the text into uppercase, and changing the line-height.

/*Here is an example of how you can tailor your font*/
p{
  font-family: Neris-Light;
  font-size: 20px;
  color: #182239;
  letter-spacing: .5px;
}

That's all for this time! We hope you enjoy adding and customizing your fonts on Squarespace so that you can make your Squarespace site more bespoke and get out of the Squarespace box.