YOUR PROFESSIONAL WEBSITE FOR $100

How to Add Custom Fonts to Your Squarespace Site (Step-by-Step CSS)

Squarespace is known for its beautiful design templates and curated font library. But what happens when your brand's unique identity is tied to a specific font that isn't on their list? To create a truly custom and professional website, using your own brand's typography is non-negotiable.

Many users assume they are stuck with the default options. The good news is that with a Squarespace Business plan (or higher) and a little bit of custom code, you can easily upload and use any licensed font you want. It's one of the most powerful ways to elevate your site from a template to a bespoke brand experience.

This step-by-step guide will walk you through the entire process, providing the exact CSS code you need to make your website's typography uniquely yours.

Before You Begin: What You'll Need

A Squarespace Business Plan or Higher: Adding custom code is a feature available on the Business, Commerce Basic, and Commerce Advanced plans.
Your Web Font Files: You'll need the actual font files. For the best performance and compatibility on the web, you should use the .woff or .woff2 file formats. If you only have .ttf or .otf files, you can use a free online tool like Font Squirrel's Webfont Generator to convert them.
Proper Font Licensing: Ensure you have the correct license to use your font on a website. When you purchase a font, it will typically come with different licenses for desktop, web, and app use.

Step 1: Upload Your Font Files to Squarespace

First, we need to add the font files to your website's asset library so Squarespace can access them.

Log in to your Squarespace account and go to the Website panel.
Navigate to Website Tools, and then click on Custom CSS.
At the bottom of the Custom CSS window, you will see a button that says Manage Custom Files. Click it.
A small pop-up window will appear. Click Add images or fonts and upload each of your font files (e.g., MyBrandFont-Regular.woff2, MyBrandFont-Bold.woff2).

You have now successfully uploaded the raw font files to your website's backend.

Step 2: Define Your Font with the @font-face Rule

Now we need to tell the website's code what to call your new font. We do this in the Custom CSS window using a rule called @font-face. This rule essentially "installs" the font so your website can use it.

Copy the CSS code below and paste it into your Custom CSS window:

@font-face {

font-family: 'My Brand Font';

src: url(PASTE_FONT_URL_HERE);

font-weight: normal;

font-style: normal;

}

Now, we need to replace PASTE_FONT_URL_HERE with the actual location of the font file you just uploaded.

Delete the PASTE_FONT_URL_HERE placeholder text, but leave your cursor in its place between the parentheses ()
In the Manage Custom Files window, simply click on the font file you uploaded (e.g., MyBrandFont-Regular.woff2).
Squarespace will automatically paste the correct, unique URL for that file directly into your code.

Pro Tip: If you have multiple font weights (like Regular and Bold), you need to repeat this process for each one, adjusting the font-weight and src URL accordingly. For a bold font, the code would be:

@font-face {

font-family: 'My Brand Font';

src: url(URL_FOR_BOLD_FONT_FILE);

font-weight: bold;

font-style: normal;

}

Step 3: Assign Your Custom Font to Website Elements

You've installed the font. The final step is to tell Squarespace where to use it. You do this by targeting specific elements on your site (like headings or paragraphs) and assigning your new font-family.

Here are some of the most common examples. You can copy and paste these directly into your Custom CSS window, below your @font-face rules.

To change all headings (H1, H2, H3, H4):

h1, h2, h3, h4 {

font-family: 'My Brand Font';

}

To change only the main page title (H1):

h1 {

font-family: 'My Brand Font';

}

To change all your paragraph/body text:

p {

font-family: 'My Brand Font';

}

To change your main navigation links:

.header-nav-item a {

font-family: 'My Brand Font';

}

Click Save at the top left of the CSS window, and your website will instantly update to display your new, custom font!

Conclusion: A Simple Step for a Truly Custom Brand

Adding a custom font is one of the most impactful ways to align your Squarespace website with your professional brand identity. By following these three steps—upload, define, and assign—you can move beyond the templates and create a truly bespoke online presence.

If custom code feels intimidating, or if you're looking for a website that is professionally designed and strategically built from the ground up, you don't have to go it alone. My entire business is built on handling these technical details so you can focus on what you do best.

For a free, no-pressure consultation to discuss your project, call me directly at (608) 888-3735.