How to Use a Custom Font on Your Squarespace Website

Using a custom font on your Squarespace website is a great way to add interest, help you stand out, and infuse your site with personality. Take my cool header font for example - it’s fun and funky and is a huge design element throughout my website. While Squarespace comes with a lot of great free font options, this one was not one of them. With a font license and a little custom code, I uploaded this font and it transformed my look. Wanna know how I did it? read on.

First of all, don’t be scared. You can do this. I’ll walk you through every step!

→ Start by downloading your font.

To purchase a font license I recommend browsing through Creative Market, or you can find other font foundries on Pinterest or Google. Creative Market is just really easy to search, so it’s my go-to. After you pay (most of my favorite fonts cost around $20), you’ll download the font file to your computer.

→ Next you need to upload the font to Squarespace.

1. In your Squarespace website go to Menu > Design > Custom CSS

2. Click “Mange Custom Files” at the bottom of the CSS box

3. Click “Add Images or Fonts,” and select your font file to upload

→ Now copy and paste the following CSS into the Custom CSS area:

@font-face { font-family: FONTNAME; src: url(); }

→ Replace “FONTNAME” with the name of your custom font.

→ Next you need to add your font’s URL between the brackets.

To do this, click your cursor between the two brackets, then click on your font file in the “Manage Custom Files” section to the right. The URL will automatically populate.

→ Last step! Apply Your Font.

Choose which headings/paragraph fonts you want to convert to your custom font and copy and paste the coordinating code below (Once again replace “FONTNAME” with the name of your custom font):

SQUARESPACE 7.0:

Heading One:

h1 { font-family: 'FONTNAME'; }

Heading Two:

h2 { font-family: 'FONTNAME'; }

Heading Three:

h3 { font-family: 'FONTNAME'; }

Paragraph:

p { font-family: 'FONTNAME'; }

SQUARESPACE 7.1:

Heading One:

h1 { font-family: 'FONTNAME'; }

Heading Two:

h2 { font-family: 'FONTNAME'; }

Heading Three:

h3 { font-family: 'FONTNAME'; }

Heading Four:

H4 { font-family: 'FONTNAME'; }

Paragraph One:

.sqsrte-large { font-family: 'FONTNAME'; }

Paragraph Two:

p { font-family: 'FONTNAME'; }

Paragraph Three:

.sqsrte-small { font-family: 'FONTNAME'; }

Click Save and you’re done!