Using Custom Fonts on Squarespace

Table of Contents

Squarespace already has TONS of fonts for us to use, but sometimes we find something special we REALLY want to use. In this post, we'll talk about using custom fonts on Squarespace.

Step 1 - Finding a Font

The first thing you need to do is download or find a font you like. If you already have one downloaded, feel free to move on. If not, head on over to some of our favorite websites to find a font you like. (DaFont | FontSquirrel)

Step 2 - Uploading Our Font to Squarespace

Now we need to upload the font to Squarespace so we can use it. You may have received more than one file when you downloaded your font, feel free to upload as little or as many as you'd like. Some fonts come with the regular version, the bolded version, the extra bolded version, the italic version, etc. So upload any of these that you need. You can upload fonts by going to DESIGN → CUSTOM CSS. Then scroll to the very bottom and click on MANAGE CUSTOM FILES.

Step 3 - Code to Enable the Font

Now for the code. Go ahead and copy the following code and paste it into DESIGN → CUSTOM CSS. Change "fontName" to whatever you want to call your font (don’t use spaces or special characters in the font name), it doesn't have to be the actual font name, you can give it a unique name so people visiting your website won't be able to tell what the font is called. (If you want to hide the actual font name, make sure you change the font's filename as well, otherwise, people will see the filename in the code and know the font's actual name.)

@font-face {
    font-family: fontName;
    src: url(fontFile.woff);
}

In the code above, delete the "fontFile.woff" and put your cursor between the opening and closing brackets where "fontFile.woff" used to be. Then click on MANAGE CUSTOM FILES in the bottom (where you uploaded your font) and click on the font you want to use. This will automatically fill in the URL of the font you uploaded.

Step 4 - Code to Use the Font

Now that we have the font set up to use, we can go ahead and start targeting things and changing their font. You can target multiple items and separate them with a comma, the code for targetting also goes into DESIGN → CUSTOM CSS. So heading 1 will be h1, heading 2 will be h2, regular text (paragraph) will be p, etc. Feel free to check out w3schools for a complete list of what you can target. Here's some code that will target almost everything on a Squarespace website. The "!important" part is just to make sure that this code for the font is given preference over Squarespace's default fonts, the code should work without it but we usually put it in for good measure.

h1, h2, h3, p, div, span, label, input {
    font-family: fontName !important;
}

---

Video Instructions