Eleanor Stones

View Original

How to Add Custom Fonts to Squarespace

Eleanor Stones

Squarespace has such a good selection of fonts available for you to use for free on your website. Call me boring but I could spend some serious hours scrolling through them all in the Site Styles.

But what if you’re after something specific? Perhaps you’ve got your eye on a beautiful custom font from Creative Market, or maybe you’ve got a gorgeous handwritten brand font you’d like to add in. You might be scratching your head thinking how you can add it into your site. Well, my friend. You are in the right place!

Basically, you have 3 options when it comes to adding in a custom font to Squarespace:

  1. Ditch it completely. Well that’s no good is it.

  2. Make images out of your fonts. Fab for adding in your font here and there but not so good for site-wide changes.

  3. Add your font in through custom CSS. Ooh, tell me more.

In this blog, I’m going to take your hand and walk you through adding your own custom font into your Squarespace site using a bit of code. Sounds scary but I promise it’s nothing we can’t handle. Don’t worry, I’ve provided you with copy and paste snippets. Your site will be rocking your gorgeous custom font in no time.

This will work perfectly for 7.0 and 7.1.

1. Download your font

If you’ve already got your font downloaded and good to go, you' can skip this step.

If you’ve not yet got your hands on your custom font, but you fancy the idea of adding a beautiful font to jazz up you site, here is a list of my favourite place to grab a custom font:

*Yup, thats an affiliate link but I only ever promote those sites I really do rave about.

Before you add in your custom font, it’s always a good idea to check that you have the right licensing to use the font on your site. It’s better safe and sorry so reach out to the font creator if you aren’t sure.

2. Upload your custom font

  • Log in to Squarespace and in your sidebar head to Design > Custom CSS

  • Scroll all the way down to the bottom and click Manage Custom Files

  • Click Add Images or Fonts and upload your custom fonts

3. Add in your Code

  • Back in Design > Custom CSS, you’ll now want to paste in your code. 

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

  • Replace ‘YOURFONT’ with the name of your font. It might look something like this:

  • Then replace ‘YOURURL’ with the source URL of your font.

  • Add the source URL where your font is being stored. To do this, highlight the ‘YOURURL’ text. Then click on manage custom files again and then click on the font you just uploaded. As soon as you click on the file the URL will automatically be pasted in the right place. 

  • The result should look something like this:

  • Hit save to save your changes.

Congrats, you’ve successfully told Squarespace where to find your custom code. Now to update your headings to add it to your site.

4. Update your fonts

In this step, we’ll update your headings with your custom font. I’ll show you how to add your custom font in as your main heading, or H1 font first. And then I’ll show you a few copy and paste snippets to help you customise your site.

  • In Design > Custom CSS again, paste in the following CSS snippet: 

h1 {
font-family: 'YOURFONT';
}

  • Then replace ‘YOURFONT’ with the name you’ve given to your font in step 3.

  • So, for my example this would be:

Here you are telling Squarespace to use your custom code rather than the built-in font in the Style Settings.

You can also change the h1 to h2 (heading 2) h3 (heading 3) or p (Paragraph/Body text). Not as bad as you thought, right?

You can add in multiple fonts across your site and target as many different sections using the snippets as you’d like.

optional: Add style settings

If you want to change things like letter spacing and font size, you can actually still do this in the Style Settings.

  • Head to Design > Style Settings

  • Then scroll down to Heading 1 (or Heading 2, Heading 3 or Body Text, depending on which you have used) and edit them from there. All of the settings will still work, apart from the font - we’ve told Squarespace we want our custom font instead.

Optional: Add in Elsewhere

This isn’t limited to header and body text, oh no. I’ll pop here some of my most used custom font updates for where H1, H2, H3 and P just don’t cut it. I’ve used these on countless client websites and they work like a treat.

Squarespace Announcement Bar

.sqs-announcement-bar  p  {
font-family: 'YOURFONT' !important;
}

Blog List Title

.BlogItem-title {
font-family: 'YOURFONT' !important;
}

Primary Navigation

.Header-nav--primary .Header-nav-item {
font-family: 'YOURFONT' !important;
}

Image Card Title & Subtitle

.image-title p {
font-family: 'YOURFONT' !important;
} 
.image-subtitle p {
font-family: 'YOURFONT'!important;
}

Oh wow, look at you! Coding Queen over here. You've officially added your own custom font to your Squarespace site. Your site is looking FABULOUS!

P.S. If you’re reading this blog then I like you. You’re not after something cookie cutter, you like bespoke beauty that’s also functional. Definitely after my own heart. My premium Squarespace Templates could be just the ticket. One click and they’re installed into your Squarespace account ready for you to customise (which by the way, I’m with you every step of the way with guides and video tutorials). Check them out here:

See this content in the original post