BONUS MODULE: LESSON THREE

Written By Hannah Weathers

Adding a Custom Font to Your Squarespace Site

There are countless things you could do with CSS, but for most authors, diving into complicated styling can easily lead to frustration or accidentally breaking parts of your site. Instead of overwhelming you with advanced code, this lesson focuses on one powerful, safe way to use Custom CSS: adding your own brand font.

If you’ve already chosen a unique font for your book covers, logos, or social media graphics, carrying that same typography onto your website makes your brand feel polished and cohesive. And while Squarespace offers a wide selection of built-in fonts, sometimes the perfect font for your vibe just isn’t there.

This simple guide will show you exactly how to upload your custom font, set it up with CSS, and apply it to your headings or body text, without needing to be a web designer.

Before You Begin: Font Licensing

First, make sure you’re allowed to use your font online. Many fonts purchased from marketplaces like Creative Market include a web license, but double-check the product page or reach out to the seller if you’re unsure. Using fonts without the right license can result in copyright issues.

Step 1: Prepare Your Font Files

You’ll want three versions of your font for maximum compatibility across different browsers:

  • .TTF or .OTF (usually what your font comes in)

  • .WOFF

  • .WOFF2

If you only have the .TTF or .OTF, you can easily generate the other two formats for free at FontSquirrel’s Webfont Generator. Upload your .TTF or .OTF, download the kit, and you’re all set.

Step 2: Upload Your Font Files to Squarespace

  1. In your Squarespace site, go to Design → Custom CSS.

  2. click Manage Custom Files.

  3. Click Add Images or Fonts, then upload your .TTF/.OTF, .WOFF, and .WOFF2 files.

Step 3: Define Your Font in CSS

Now that your font files are uploaded, you’ll create a @font-face rule so your site can use your custom font.

  1. In the Custom CSS editor, paste this block:


@font-face {
  font-family: 'font-name';  
  src: url(fontURL.ttf/.otf), url(fontURL.woff), url(fontURL.woff2);
}


2. Replace 'YourFontName' with a simple name for your font (e.g., Seraphina).

3. Update each fontURL with the exact URLs of your uploaded files:

  • Click each file in Manage Custom Files — Squarespace will automatically paste its URL into your CSS box.

  • Copy each URL into the correct spot in your @font-face rule.

Your final code should look like this:

@font-face {
font-family: 'crafter';  
src: url(https://static1.squarespace.com/static/68531a8a8d4e2277667e1a7b/t/68531e608af02618f8f44a5a/1750277728322/Crafter-Rough.otf), url(https://static1.squarespace.com/static/68531a8a8d4e2277667e1a7b/t/68531de18bdfef450cd3d764/1750277601476/crafter-rough-webfont.woff), url(https://static1.squarespace.com/static/68531a8a8d4e2277667e1a7b/t/68531de1e75ccc405f0b796a/1750277601453/crafter-rough-webfont.woff2);
}

Step 4: Apply Your Custom Font

Uploading alone won’t make your font appear — you need to tell your site where to use it.

To apply it to Heading 1, add this below your @font-face code:

 h1 {
font-family: 'fontname';
}

Customize it:

  • Change h1 to h2, h3, or p if you’d rather use your font on other headings or body text.

  • if you’d like to use a different font for h1, h2, h3, or p, all you need to do is repeat these steps from the beginning to add the fonts you want to use.

  • The !important tag ensures your font overrides Squarespace’s built-in styles.

Final Tips

  • Use clear comments in your CSS (e.g., /* Custom Font */) to stay organized.

  • Back up your font files and CSS somewhere safe.

  • Always preview your site on desktop and mobile to confirm your new font displays correctly.

Action Step:

Follow these steps to upload your custom font, define it in CSS, and apply it to your site’s headings or body text — giving your website a distinctive, on-brand look.

Hannah Weathers
Previous

BONUS MODULE: LESSON FOUR
Next

BONUS MODULE: LESSON TWO