Custom fonts are one of the most effective ways to infuse personality into your brand and create a memorable experience for your website visitors. If you’re using Squarespace and want to implement your own unique typography, this comprehensive guide will walk you through everything you need to know - from uploading a font to writing custom CSS and testing across browsers.

Why Use Custom Fonts on Squarespace?

Squarespace offers a wide library of built-in fonts, including Google Fonts and some premium typefaces - but sometimes your brand calls for something more specific. Here’s why custom fonts are worth the effort:

Brand Consistency:
Custom fonts ensure your website typography matches your brand’s visual identity. This is particularly important if your branding includes a signature typeface not available in Squarespace’s default font library.
Unique Visual Identity:
Many Squarespace websites rely on the same set of fonts, making it harder to stand out. A custom font helps distinguish your site from others.
Emotional Tone and User Experience:
Typography plays a major role in how users emotionally connect with your brand. Whether it’s romantic and whimsical or bold and modern, the right font can speak volumes.

Step 1: Upload the Font File to Squarespace

Alright, it’s time to upload your font file to your Squarespace site. This step is *obviously* essential because you need your font hosted somewhere on your website in order to reference it with CSS - and Squarespace actually makes this pretty straightforward.

Squarespace doesn’t actually have a dedicated font upload area like it does for images or products. Instead, we use the Custom CSS editor, which has a handy little tool where you can upload a font file, and Squarespace hosts it on its servers and generates a code for you to reference in your custom CSS.

This means no external hosting, fast and reliable access to your font file, and it will automatically be available across your entire site. Groovy, right? Okay, let’s talk through the process.

Log Into Your Squarespace Account
Go to squarespace.com and log into the backend of the website you’re working on.
Navigate to the Custom CSS Panel
From your main site dashboard:
- Click ‘Pages’ under ‘Website’ in the left-hand navigation.
- Scroll down to ‘Custom Code’, and click on ‘Custom CSS’.
Upload the Font File
Click the arrow next to ‘Custom Files’, and select ‘Add 'Images or Fonts’. Now, select the font file you are wanting to upload from your computer. Your file will start uploading right away, and once it’s done, you’ll see it appear in the list of managed files. Squarespace is now hosting this file on their servers.
PS. If you need a copy of a font file, I recommend 1001 Fonts (free for commercial use) or Creative Market which has an abundance of fonts available for low cost! In this tutorial I’m using the font Blosta because I am OBSESSED with it.

Navigate to ‘Custom CSS’, and select the arrow beside ‘Custom Files’.

Click on ‘Add images or fonts’ and upload the font file from your computer.

Step 2: Telling Squarespace: “Here’s My Font, Use It!”

Now that your custom font is uploaded, it’s time to let Squarespace (and your website) know, “Hey - this is the font I want to use.” This is where we sprinkle some CSS magic.

We’re going to use the @font-face rule, which tells Squarespace, “Here’s the name I’ll be calling this font, and here’s the file you’ll use for it.”

But first - a tip to keep things neat and manageable… if you’re planning to add more custom fonts down the track (and let’s be real, you probably are), it helps to break your CSS into sections using comment headings. These don’t affect the code, they’re just for you to keep things organised. In this case, I would use //UPLOAD AND ASSIGN BLOSTA FONT FILE//. Of course, you can replace “Blosta” with whatever your font is called. The point is: clear section headings in CSS save your future self a LOT of scrolling (obviously depending on how much CSS you include).

Under your comment heading, you’ll paste the following code:

@font-face {
  font-family: 'YourFontName';
  src: url('YourFontURL');
}

Once you’ve pasted the above code, you need to tell Squarespace what font you are referencing, but keep it simple. I’m using the example of Blosta, but it’ll look like this:

@font-face {
  font-family: 'BLOSTA';
  src: url('YourFontURL');
}

Now that you have updated the name of the font file, you need to include the URL for Squarespace to register that yes, this is the font you are wanting to use. Leave the ‘ ‘, but remove YourFontURL. With your cursor between ‘ ‘, select the font file from the uploaded fonts. It will then look like this:

@font-face {
  font-family: 'BLOSTA';
  src: url('https://static1.squarespace.com/static/682539083576db349ca901e1/t/68253e4c9f7c2323c2645d18/1747271245352/BLOSTA.otf');
}

Step 3: Applying the Custom Font to Your Website

You’ve uploaded your font. You’ve told Squarespace where to find it. Now it’s time for the fun part - actually putting your custom font to work across your site.

This is where you decide which elements on your site will use the new font. Headings? Paragraphs? You’re in control. All we need to do is target those elements using a bit of CSS (don’t eyeroll, I’m making it easy for you!) I’ll use h1 as an example, as this is the largest font on your site and in most cases, where you will have your custom font.

The basic CSS you need is:

h1 {
font-family: 'NAME';
}

Now, you need to tell Squarespace what font you want to use for h1. You’ve already told Squarespace the name of the font and the URL for the font. So you don’t need to continue including the URL in your code, only the name of the font. In this example:

h1 {
font-family: 'BLOSTA';
}

You’ll now see that by assigning the custom font to h1, Heading 1 has changed (which is **exactly** what we want!)

You’ve now successfully uploaded & assigned your custom font to your website!

Step 4: Add Some Extra Personality (Optional)

So, you’ve uploaded your custom font and applied it to your site - amazing! But why stop there? If you want to elevate your typography and bring in even more brand personality, this optional step is all about adding variety and polish by using different font weights or styles (like bold, light, italic, etc.).

For example:

@font-face {
  font-family: 'BLOSTA';
  letter-spacing:'1px';
  font-weight: 400;
  font-style: italic;
}

You may be asking, “What’s going on here?”. Let’s break it down:

font-family: ‘BLOSTA’;
You’re using the same font-family name for each variation so that Squarespace recognises these as part of a font family. This way, when you set font-weight: bold in your styling, it knows which file to use.
letter-spacing: ‘1px’;
You are telling Squarespace the size of the spacing you want between each letter!
font-weight: 400;
These values tell the browser which file to use for which weight:
- 400 = regular (normal)
- 700 = bold

You can also use:
- 100-300 for light or thin fonts
- 500-600 for medium weights
- 800-900 for extra bold or heavy fonts
font-style: italic;
You are telling Squarespace what style you want the font to appear as (bold, italic, light, etc.).

Wrapping Up: You Did It!

And just like that - you’ve successfully uploaded and applied a custom font to your Squarespace website. Whether you’re working with a bold display serif or a delicate handwritten script, taking control of your typography is one of the most powerful ways to infuse your website with personality.

Now, instead of being limited to Squarespace’s default fonts (no hate Squarespace), your site can reflect your brand’s true vibe - from the elegance of your logo to the tone of your body copy. Thoughtful typography can elevate how your brand is perceived, communicate mood and intention, and guide your visitors through your content with intention and clarity.

If you’ve followed each step in this tutorial, from uploading and referencing your font, to styling your font, you now have the skills to bring a beautifully custom look to your website that aligns perfectly with your visual identity.

Need Help Customising Your Squarespace Site?

If you’re feeling a little overwhelmed with all the tech or would rather hand this off to a pro, you’re in the right place. At Valiant Design Studio, I offer elevated, strategic, and beautifully bespoke Squarespace Website Design Services tailored to creative businesses and passionate entrepreneurs like you.

Whether you’re launching a new brand, refreshing your current site, or simply want a site that looks and feels more aligned with your brand’s aesthetic, I’d love to help bring it to life - with custom touches (like typography!) that make all the difference.

How to Upload & Use Custom Fonts in Squarespace