How to add a custom font to your Squarespace site

Even though Squarespace has a majillion (well, close enough) fonts that you can choose from, you may find that your chosen brand font isn’t one of them. But fear not, there is some simple coding that you can do to upload your own font into Squarespace.

We don’t recommend using a stylised font for the main Body Text, but it’s definitely a cool idea to add it as one of your Headers (usually H3 or H2) so that you have the option to use that font sporadically on your website.

Here’s how you do it.

• Download the .OTF or .TTF file of your font. Make sure that you have the legal rights to use it.

• In your Squarespace site, go to Pages, then Website Tools (down the bottom) and then Custom CSS.

• Click the arrow in Custom Files and upload your OTF/TTF file.

• Click on Open in New Window and then click on your uploaded file.

• Now you should see a url appear in the box on the left - e.g. https://static1.squarespace.com/static/5eec6b575db2c27a5d6a37fa/t/5eec6e376d480d66694aafeb/1592553016529/proxima-nova.ttf

• Copy this into a Word doc, email, notes etc for later.

• Now, delete that text from the box on the left and instead copy the following code (that’s in bold) into the box, and click Save.

  @font-face {

  font-family: 'FontTitle';

  src: url('FontURL'); }

  h2 {font-family: 'FontTitle';}

• Replace FontTitle with the name of the font, such as ProximaNova.

• Replace FontURL with the https:// url that you copied in step 6.

• Make sure that you’ve still got the ‘ around FontTitle etc - exactly as above.

• This will now change all your Header 2 text across the site, but you can also copy and paste that last line and change h2 to h1, h3 and/or h4 if you’d prefer this font to be assigned to a different Heading or to all Headings.

• Click Save.

• Once you’ve done this, refresh your site (close your browser then go back in again), and this should now work. You may not need to do this step.