Add Custom Font to your Squarespace Website

Adding a custom font to your Squarespace website is a great way to set your brand up for success.

It’s simple when you follow the steps below.

Good branding goes far beyond picking out fonts, colors, and a logo.

That said, typography is the secret to a KILLER website.

And if you’ve worked in Squarespace, you also know there are serious limitations when it comes to font options.

Adding custom font to your Squarespace website is a breeze when you follow these steps.

1. Download Font Files to your computer

Already have your custom font files? Great! If not, head on over to DaFont or FontSquirrel and pick out a font that compliments your brand.

2. Upload Font Files to Squarespace

Navigate to PAGES → WEBSITE TOOLS → CUSTOM CSS → CUSTOM FILES then click ADD IMAGES OR FONTS.

Upload the font files you’d like to use on your site.

Note: Font files generally come with various styles (bold, italic, etc.) so be sure to upload all the styles you’d like to use on your site.

3. Custom Code Part I

Copy the code below into your Custom CSS (DESIGN –> CUSTOM CSS)

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

Change the fontName in the code to the name of your font (i.e. ours is TiffanyScript).

4. Custom Code Part II

Don’t freak out but the next step is more in depth.

Delete the fontFile.woff in your code and while your cursor is in the middle of the ( ) where fontFile.woff use to be, click on MANAGE CUSTOM FILES and select the font you want to use.

This automatically inserts a url into your code for your font file.

5. Custom Code Part III

Now we’re going to target the elements you want to change.

Heading 1 = h1, Heading 2 = h2, Heading 3 = h3, body text = p.

Copy and paste the code below (be sure to change the fontFamily name) using only the elements you want to change.

h1, h2, h3, p {
    font-family: fontName !important;
}

6. Do a Happy Dance

That’s it! Coding doesn’t have to be overwhelming. Don’t hesitate to reach out if you need extra support.

---

Need help creating a Custom Website?

We’d love to be of service!