How to Use Custom Fonts on a Squarespace 7.1 Website

May 5

ADDING AND USING CUSTOM FONTS IN SQUARESPACE 7.1

Unleash your inner designer and give your Squarespace 7.1 website a unique edge with custom fonts. I’m here to break this down for you in a way that simplifies the process, helping you enhance your brand personality, improve readability and user experience, and stand out from the crowd.

Navigating the digital landscape can feel like a never-ending game of hide and seek, right? Especially when it comes to maintaining brand consistency. You've burnt the midnight oil selecting just-the-right fonts and colours that reflect your brand's personality (or maybe you’ve enlisted the help of a branding pro), only to hit a roadblock on Squarespace – those carefully chosen fonts are nowhere to be found in the Style Editor!

Before you pull out your hair, take a deep breath. It's all good. Every font under the sun is available for use on Squarespace. All it takes is a bit of CSS magic.

Let me paint a picture using my trusty demo website as an example... Standardly, Squarespace offers three heading styles (sure, you can add more, but let's save that chat for another day) along with body and quote text styles. I've set up H1, H2, H3 and Body (P) on one page here, with clear labels for each.

Now, head on over to WEBSITE >> PAGES >> WEBSITE TOOLS >> CUSTOM CSS

Step 1: Upload Your Chosen Font

Simply click on 'Custom Files'. Then, select the font file you want to upload from your computer and boom... step one complete.

Here is a quick list of a few of my favorite free and paid font resources:

Step Two: Tell Squarespace Where To Find The Font

Next, you need to add a bit of CSS. I recommend giving each CSS section a heading so you can easily locate and modify specific code later. This way, if something stops working or needs adjustment, you won't have to scroll endlessly. For this instance, I'll use the heading //ADDING CUSTOM HEADING FONT// followed by the relevant CSS...

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

Now you need to replace 'NAME' with the name you’d like Squarespace to recognize the font by (keep it simple) and 'FONT URL' by the URL where the font can be found.

Next, we need to find the URL of your font. I recommend deleting the words FONT URL and just having your cursor flashing between the two ' '. That's because, in a moment, Squarespace will insert the URL of your font for you. If your cursor is elsewhere on the page, it'll insert it there instead. 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!!

… now give the font a name and add in the URL.

I cannot stress enough the importance of ensuring your cursor is in the correct position before clicking on your font's name in 'Manage Custom Files.' The URL will appear wherever your cursor is, and this has led me to accidentally insert the URL into invisible CSS. I kept clicking, puzzled as to why nothing was happening, only to realize I was repeatedly overwriting unrelated CSS with the URL. Once I figured it out, 🤦🏻‍♀️, I had to search and fix the mess I created. Learn from my mistakes.

Step Three: Assign Font to the Correct Heading/Style

Now that you have 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 next code you need is:

//assign custom h1 font//

h1 {
font-family: 'NAME';
}

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