explore

branding

web design

photography

warm coffee, sharp pencils, & good reads 

welcome to the blog

business

life

How to Add a Custom Font in Squarespace

Woman holding glasses in front of a colorful wall of magazines

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:

Young couple standing on a mountain posing for photographer

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”

Young couple standing on a mountain posing for photographer

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!

Young couple standing on a mountain posing for photographer

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:

Young couple standing on a mountain posing for photographer

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.

Young couple standing on a mountain posing for photographer

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.

Young couple standing on a mountain posing for photographer

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.

Young couple standing on a mountain posing for photographer

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!

Screenshot of a wedding website showing a couple on a mountain

Stock photo of a keyboard on a desk with clipboard and jewelry

Leave a Reply

Your email address will not be published. Required fields are marked *