How To Upload And Use A Custom Font In Squarespace

 How To Upload and Use A Custom Font in Squarespace | Squarespace Tips and Video Tutorial
 

headingstylessquarespace

If you've spent more than five minutes in the 'online girlboss' world, you'll know already how important it is to use fonts and colours consistently when marketing your brand. So, what are you supposed to do when you spend hours, days, maybe even weeks choosing the fonts that are just-so-perfect for you and your brand (or invest a chunk of change in a brand designer to do it for you) and then get on Squarespace only to find that those fonts are not an option in the Style Editor?

Don't panic. It's fine. You can use any font on Squarespace. It just takes a little CSS tweaking.

UPLOADING AND USING CUSTOM FONTS iN SQUARESPACE

To demonstrate, I've gone back to my faithful dummy website... Squarespace has three heading styles as standard (you can add more, but that's for another post, another day!) plus your body and quote text styles. I've used H1, H2, H3 and Body (P) all on the same page here, and labelled each to make it really clear. 

Now, head on over in DESIGN >> CUSTOM CSS. 

STEP ONE: UPLOAD YOUR CHOSEN FONT

Simply scroll down to just below the CSS window and click 'Manage Custom Files'. Then, select the font file you want to upload from your computer and boom... step one complete. If you need to get a copy of the font file, or are still choosing your fonts, FontSquirrel.com is a great source of fonts that are free for commercial use or if you would like a more premium/unique font, I use Creative Market – super affordable (usually >$20USD) – but just a little bit, more, unique. The font I'm using in this tutorial, Manhattan, was purchase on Creative Market. $18. FYI. I bought it because it was a much more refined version of Playfair Display in Caps... but also because, Manhattan has my heart and that just sealed the deal for me. There a coordinating font called Brooklyn, which so far I've managed to resist.

 Scroll down to 'Manage Custom Files'

Scroll down to 'Manage Custom Files'

 And upload the font file from your computer.

And upload the font file from your computer.

 

STEP TWO: TELL SQUARESPACE WHERE TO FIND THE FONT

The next step is to add in a simple bit of CSS. I like to give each section of CSS a heading so that if something stops working or I want to make a change, I'm not scrolling forever trying to find the code I need. I can just glance at the headings until I get to the right place. So In this case, I'll go with... //ADDING MANHATTAN FONT// then the basic CSS underneath...

@font-face {
    font-family: 'NAME';
       src: url('FONT URL');
  }

I'll need to replace 'NAME' with the name I'd like Squarespace to recognise the font by and 'FONT URL' by the URL where the font can be found. I'm going to keep it simple, and call my font MANHATTAN. Let's not overcomplicate things.

@font-face {
    font-family: 'MANHATTAN';
       src: url('FONT URL');
  }

Next, we need to find the URL of your font. I recommend deleteing the words FONT URL and just having your cursor flashing between the two '  '. That's because in a moment, Squarespace is going to insert the URL of your font for you. If your cursor is elsewhere on the page, it'll insert it there instead. Simply click back on 'Manage Custom Files', click on your font file in the list of uploaded files and BOOM. The URL has been automatically inserted!!

 The basic CSS...

The basic CSS...

 ...then give the font a name and add in the URL.

...then give the font a name and add in the URL.

Again, I stress the importance of making sure your cursor is in the right place before you click on your font's name in 'Manage Custom Files' ... the URL will end up wherever your cursor is and this has, on more than one occasion, caused me to insert the URL into some CSS that I couldn't see. I kept clicking wondering why nothing was happening, meanwhile CSS that was for something totally unrelated was getting obliterated by me inserting this URL over and over again and when I realised what I was doing **facepalm** I had to go searching and tidy up the mess I'd made. Learn from my mistakes.

 

STEP THREE: ASSIGN THE FONT TO A HEADING/TEXT STYLE

Finally, having told Squarespace "Hey, this is where the font is and this is what I'd like to call it", we can now say "Oh, and here is how I want to use it". 

Decide which heading or text style you'd like to use the custom font for. In most cases, this is a large heading so I'm going to use H1 as an example. You may well want to assign a custom font to h2, h3 or your body or paragraph text, and the process is exactly the same, just replace 'h1' with whatever you'd like.

The code you need is:

h1 {font-family: 'NAME';}

i.e. h1 {font-family: 'MANHATTAN';}

Here you're telling Squarespace I'd like to use Manhattan for my H1 please. You already told Squarespace where to find the font called Manhattan in the step above, so you should see any H1 on your website change automatically! Congrats!

squarespacecustomfontcss
 Having assigned the font to H1, you can see the 'ABOUT H1' has changed font automatically. All H1 font on your site will change too. :)

Having assigned the font to H1, you can see the 'ABOUT H1' has changed font automatically. All H1 font on your site will change too. :)

You've uploaded and used a custom font in Squarespace! Yay!

 

(OPTIONAL) STEP FOUR: ADDING EXTRA STYLING

You might want to tweak the appearance of your font a little. You can do that right here too. And if you're starting to feel more confident using CSS, it might be a nice little chance to 'play around'. You can easily delete anything you don't like. For example, you could add:

h1 {font-family: 'MANHATTAN';

letter-spacing:'2px';   

font-size:55px;   

text-shadow: 1px 1px purple;  

}

There are a ton of changes you can make to text using CSS, you can find more of them at W3Schools Text CSS page. NOTE TO BRITS: You need to spell colour as color. Like, the American version. FYI, I've been making this mistake and wondering why my code isn't working at least once a week for the last decade. 

addingtextstylessquarespace
 With the addition of some space between the letters, a bigger font size and a purple drop shadow.

With the addition of some space between the letters, a bigger font size and a purple drop shadow.

video step-by-step

Check out this video walkthrough of the process. You can also see more clearly how some of the extra style changes affect the text in realtime!

 
 

GOT A SQUARESPACE SOS?

If you have a Squarespace SOS you'd like me to answer on the blog, or with a how-to video, drop me a message using the form below. You'll also be subscribed to my mailing list for notifications of new blog posts, products or services. However, you can easily unsubscribe at any time. I try to reply to as many SOS messages as I can, even if I don't answer them as a blog post or video.

blogsignature.jpg