Upload and use custom fonts in Squarespace - Squarespace 7.1

Squarespace offers a great variety on fonts. The library of fonts to use on your template or website is pretty extensive. But it doesn’t contain all fonts (obviously) and you might have a custom font that you want to use on your website that fits with your logo or brand style. This tutorial will guide you through how to upload the custom font and to use it throughout your website.

Instructions

1. Choose your custom font(s) and prepare them to use on the web. Your font should either come in a .TTF or .OTF format. If you have more font files such as WOFF or WOFF2 for the same font, this is even better to use these as well. If you use all three font files, you make sure that your font is compatible with different browsers. If you don’t have multiple web files for your font, you can use this webfont generator to create them.

2. Time to add your font files to your Squarespace website. Navigate to the the Custom CSS editor of your Squarespace site. Go to Website > Website Tools > Custom CSS and click on the button ‘Custom Files’. This is the area where you can upload any images or fonts. Upload your (3) custom font files here.

3. Time to add some CSS to your CSS editor to get the files that you just uploaded to work and use on your website. Copy and paste the code below into the Custom CSS box:

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

4. Change font-name to the name of your font. For example I would change mine to MECHANIC LOVE. This is just so you can reference it later.

5. Now we need to update the font URL’s. To change the font URL's, remove all the text between the brackets and add your cursor between the two first brackets. Then click on ‘Custom Files’ again, and then click on one of your font files. As soon as you click on the file you will see a URL automatically pasted in the Custom CSS editor (between the brackets) (see video for how to add these URL’s). 
Repeat this for the other 2 files. I’ve uploaded a OTF, WOFF and WOFF2 file to the custom files. For me it looks like this in the editor:

Hit ‘Save’ , because you've just added your custom font. Now we need to add some more code, to display the font on our website.

6. To actually see your custom font on your website displayed, we need to add some code that changes one of your current Headings to your new font. For example: H1, H2, H3 or a P (paragraph/body font).

Just paste the code below into the Custom CSS editor below the last code:

h1 {
font-family: 'font-name';
}

By pasting this piece of code into your Custom CSS box, this will change your H1 (Heading 1) to your custom font. This code will overwrite your Style Settings from Squarespace, with your custom font. Remember to change the “font-name” to the same as the font name you added in the last code.

You can also change the h1 to h2, h3 or P (heading 1, heading 2, heading 3 or Paragraph/Body text).

• h1 : Heading 1

• h2 : Heading 2

• h3 : Heading 3

• h4 : Heading 4

• p : All Paragraph fonts

• p.sqsrte-large : Paragraph 1 / Large Paragraph

• p.sqsrte-small : Paragraph 3 / Small Paragraph

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

Make sure to save your changes, and if you don’t see anything changing, refresh your page after saving.

If you want to change things like font size or the spacing between letters, you can still do this within the Site Styles. Just navigate to Heading 1 (or whichever heading you have used) and edit them from there. All of the settings will still work, but with your custom font.

That’s it! Your custom font will show up on your website directly!