If you’re looking to have a CONSISTENT brand (and I know you are, because I taught you all about it right here!), then that means you definitely need to know how to add your custom brand fonts to your Squarespace website!

Today I’m sharing a step by step walkthrough and a little code to help you add your brand fonts to Squarespace!

Video – How to add a custom font in Squarespace

If you’re all about watching step-by-step tutorial videos, just click below and I’ll walk you through it all!

Step by Step – Written Instructions

If you love reading through the steps and taking a peek at screenshots, keep on reading!

Step #1

First, click “Design” in the left hand menu, and then “Custom CSS”. You’ll arrive at a screen that looks like this:

Even though we are adding code through this tutorial, I promise it’s not scary! It’s as easy as copying and pasting and will not mess anything up, I promise!

Step #2

Second, copy the code I’ve written out for you below:

 

@font-face{

font-family: ‘Quentin’;

src: url (‘ ‘);

font-weight: regular;

}

 

h2 {

font-family: ‘Quentin’;

}

 

Step #3

Next, paste the code in the Custom CSS box on Squarespace site next to the number “1”

Uploading Your Custom Brand Font File to Squarespace

Next, we’re going to be uploading that custom brand font file, so be sure to locate it on your computer and head on to Step #4.

Step #4

Click “Manage Custom Files” and then click “Add images or fonts”. Navigate to your file, click on it, and then click “Open”. You’ll now see your font file in Squarespace just like shown below!

Inserting the Custom Brand Font File URL

Step #5

Look at the code and then move your cursor in between the two apostrophes shown after “url” and click. See below for reference:

Step #6

Click “Manage Custom Files” and then click on your custom brand font. This will automatically add the custom brand font url in between those two apostrophes.

Changing the Custom Brand Font Name

Step #7

In both places where you see “Quentin” referenced, simply replace that with your custom brand font name. You’ll want to make sure it is spelled the exact same way that it is written in the font file you uploaded.

Optional – Changing which Heading the Font will Become

Step #8

If you’d like your custom brand font to become a Heading 1 or Heading 3 font, simply erase the “2” and replace it with the heading number you’d like your font to show as.

You’re Almost Done!

Step #9

Finally, click “Save” in the top, left hand corner and you’ve officially added your custom brand font to your Squarespace website! Congrats!