How to Add Custom Fonts in Squarespace

Update 2026: Custom fonts can now be set up directly in Squarespace. Go to your font settings and upload your own font there.

---

Squarespace offers a wide selection of fonts to choose from for your paragraph and heading text. But sometimes you've seen a font somewhere that you really want to use, but Squarespace doesn't offer it.

Fortunately, with a little code, you can add fonts to your website yourself.

Here's how to do it:

Uploading font files

• Purchase your font from a website such as CreativeMarket, MyFonts, or DaFont. Before purchasing a font, check to see if it's suitable for web use.

• Make sure you have the following file types for the font:

  • .otf and/or .ttf

  • .woff

  • .woff2

• With this web font generator, you can convert your .otf or .ttf file into a .woff and .woff2 file.

• Make sure each file consists only of the font name followed by the file type (for example: quentin.otf)

• Upload the files below the CSS window using "Manage Custom Files" (Design > Custom CSS) (see image)

View full size

Add CSS:

• Add this code to your CSS panel:

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

• Replace “font name” with the name of your new font. (For example: quentin)

• Once you’ve uploaded a TTF file, delete the text “fontlocation.ttf” and leave your cursor between the parentheses. Next, click “Manage Custom Files” and select the TTF file. The URL for this font will now appear between the parentheses in your CSS panel.

• Do the same for the .otf and .woff files.

• If you don't have a particular file type, you can remove the corresponding line from the code above. Note: Make sure the last URL is always followed by a semicolon, not a comma!

You'll get something like this:

@font-face {    
  font-family: 'quentin';       
  src: url('https://static1.squarespace.com/static/07802/Quentin.otf');
}

Note: If your new font consists of two words, use a hyphen between the words without spaces.

CSS for Headings

• Now add the following code to your CSS panel if you want to use this new font for Headings 1, 2, 3, and/or 4:

/* Font heading 1 tekst */
h1 {
  font-family: fontnaam!important;
}

/* Font heading 2 tekst */
h2 {
  font-family: fontnaam!important;
}

/* Font heading 3 tekst */
h3 {
  font-family: fontnaam!important;
}

/* Font heading 4 tekst */
h4 {
  font-family: fontnaam!important;
}

• If you want to change all heading fonts at once, you can use this code:

/* Font heading teksten */
h1, h2, h3, h4 {
  font-family: fontnaam!important;
}

CSS for Paragraph Text

• For the paragraph text, add this code:

/* Font paragraph 1 tekst */
.sqsrte-large {
  font-family: fontnaam!important;
}

/*Font paragraph 2 tekst */
p {
  font-family: fontnaam!important;
}

/*Font paragraph 3 tekst */
.sqsrte-small {
  font-family: fontnaam!important;
}

In Squarespace 7.0, you only have one paragraph of text, so the middle code (p) is all you need.

CSS for Button Text

• To change the fonts on the buttons, add this code:

/* Medium of Primary button */
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: fontnaam !important;
}

/* Large of Secondary button */
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: fontnaam !important;
}
 
/* Small of Tertiary button */
.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: fontnaam !important;
}

CSS for Navigation

• To change the fonts of the items in the navigation bar at the top of your site, add this code:

.header-nav-item {
  font-family: font-naam!important;
}

💡 Tip: With the Chrome extension "What Font," you can quickly find out which fonts are used on a website. 

Want to read more?