How to use a custom font in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Squarespace has a ton of font options available in it’s design menu, but there are so many unique and fun fonts out there that I wanted to teach you how you can use your very own!

This tutorial will show you how to install your own custom font file in a Squarespace website.

There are three main steps we’ll cover in this tutorial:

1. How to upload the file to your site

2. How to name your font

3. How to assign it to a specific thing in Squarespace.

To upload the file, navigate to your website menu, then website tools, and then click on custom CSS.
These instructions were updated in August 2023 while the video below still shows the old menu.

Click on the button that says manage custom files and drag your font file from your computer to that spot so it will upload to your site.

After that, use the codes below to name your new font and assign it to something on your site.

Here are the codes:

@font-face {
font-family: Name;
src: url (click on the file to place the url here)
}

Assign that font to paragraph text:

p {font-family: Name!important}

Assign that font to heading two text:

h2 {font-family: Name!important}

Assign that font to all small, medium, and large buttons:

.sqs-block-button-element {font-family: Name!important}

Assign that font to any text on a form:

.form-block * {font-family: Name!important}

Here are some common text types you can assign your new font to:

Heading 1 = h1

Heading 2 = h2

Heading 3 = h3

Heading 4 = h4

Paragraph 1 = .sqsrte-large

Paragraph 2 = p

Paragraph 3 = .sqsrte-small