How to Upload a Custom Font to Squarespace

Fonts are an important part of brand identity. Sometimes you or possibly a client would like to use a custom font that isn’t available in the Squarespace “Style Editor“, well you’ve come to the right place to learn how to add that special font to your site!

How+to+Upload+a+Custom+Font+to+Squarespace.jpg

let’s get started

Screen Shot 2019-08-15 at 4.41.12 PM.png

Step 1

Head to Design > Custom CSS and inject the code below.

Repeat the code for each unique font you would like to use.

 
//ADDING CUSTOM FONT //

@font-face {

    font-family: 'NAME';

       src: url('FONT URL');

  }

//ASSIGN CUSTOM FONT//
h1 {font-'NAME';}
Screen Shot 2019-08-15 at 4.22.14 PM.png

Step 2

Now upload the font(s) you would like to use for your new text styles.

Note: You can use unique fonts for H1, H2, H3 and Body (P).

Screen Shot 2019-08-15 at 4.36.50 PM.png

Step 3

Now you can tell Squarespace what to do.

Replace 'NAME' with the font name you’d like Squarespace to recognize.

For this example, the font I am using is called “SAMPLETEXT“ and I’ve gone ahead and replaced ‘NAME‘ with is.

I am only using this font to replace Header 1 (h1), but you can replace any header or body text you would like

Screen Shot 2019-08-15 at 4.22.14 PM.png

FONT URL HELP

To replace the FONT URL, I recommend deleting the words FONT URL and just having your cursor flashing between the two ' '(The yellow | in the image is your cursor). Then go down to MANAGE CUSTOM FILES and select the font you would like. Squarespace will automatically insert the URL of your font for you.

Screen Shot 2019-08-15 at 4.57.37 PM.png

THE END

Your final code will look something like this but with your font title replacing “SAMPLETEXT”

Now go on and assign a custom font to your headers or your body text; the process is exactly the same, just replace 'h1' with whatever you'd like.

H1, H2, H3 and Body (P).

 
 

RELATED POSTS