How to Add a Font to Squarespace (Upload, Formats and CSS)

How to add a font to Squarespace: open Site Styles, click the arrow next to Fonts, click a category (Headings, Paragraphs or Buttons), open the font dropdown and click the upload icon, then drag in your .woff2, .woff, .ttf or .otf file. The font appears under “Uploaded” in every font dropdown from then on, and you assign it like any built-in font. That native upload replaced the old @font-face-in-Custom-CSS method, which most tutorials still describe and which still works. Below: the upload steps for 7.1 and 7.0, the licence and format rules, the CSS method for the cases the panel cannot handle, and how to keep a custom font from slowing the site down.

How to add a font to Squarespace 7.1

1. Edit any page and click the paintbrush to open Site Styles.
2. Click the > next to Fonts.
3. Click the category the font is for: Headings, Paragraphs or Buttons (Miscellaneous for labels and metadata).
4. Click the current font name to open the dropdown, then click the upload icon.
5. Drag the font file into the upload area, or click + and choose it.
6. Select the uploaded font, adjust weight, size and spacing, and Save. Repeat for other categories; the file is uploaded once and reused.

Squarespace’s custom font guide lists the accepted files (.otf, .ttf, .woff, .woff2) and one rule that trips people: a file with multiple weights (a variable font) works, but a file with multiple styles does not, so regular and italic are two uploads, and bold is a third unless the variable file carries it.

How do you add a font on Squarespace 7.0?

Design, Site Styles, click any font tweak, open the dropdown and click the upload icon; the rest is the same. 7.0 also has a custom Adobe Fonts project integration, which swaps Squarespace’s Adobe list for your own Adobe project; it is 7.0-only and rarely worth it now that uploads work. On 7.0 templates the same font may need selecting in several tweaks (heading, body, navigation), because each area has its own font setting.

Which format should you upload?

Free converters (Transfonter, CloudConvert) turn a .ttf into .woff2 in seconds. Upload only the weights you use: regular and bold for body text, one or two for headings. Each file is a download for every visitor, and fonts are the second-largest speed cost on Squarespace after images, as covered in changing fonts on Squarespace.

Do you have the right to use the font?

A font bought or downloaded for desktop use usually does not include a web licence. Check before uploading: Google Fonts are free for web use (and mostly already in Squarespace’s list); Adobe Fonts are licensed through Creative Cloud and are available in Squarespace’s font picker without uploading; foundry fonts (Klim, Pangram Pangram, Colophon, MyFonts and so on) sell a separate webfont licence, often priced by monthly page views. Squarespace’s guide puts the responsibility on you. The practical test: if the font came as a .woff2 with a licence PDF mentioning web use, you are fine; if it came as a .ttf from a free-fonts site, read the licence file.

When do you still need the CSS method?

Three cases: you want the font on a specific block or section rather than a whole category, the font has a style the uploader rejects, or you are on a plan or version where the upload icon does not appear. The steps:

1. Upload the font file through the Custom Files button inside the Custom CSS panel (it accepts .woff, .ttf and .otf) or, for a .woff2, through any link editor’s File option, then copy the file’s URL.
2. In Custom CSS, declare it and apply it:

@font-face {
  font-family: 'MyBrandFont';
  src: url('https://static1.squarespace.com/.../MyBrandFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
h1, h2 { font-family: 'MyBrandFont', serif !important; }
#block-YOUR-ID p { font-family: 'MyBrandFont', serif; }

Add a second @font-face block per weight or style, each pointing at its own file. font-display: swap shows fallback text until the font loads instead of blank space (MDN explains the options). Block and section IDs come from the block ID guide, and the selectors for headings, buttons and one-section overrides are in the CSS cheat sheet.

Why is the uploaded font not showing?

A custom font is one of the quickest ways to make a template site look like a brand, and one of the few Squarespace settings where a file format choice affects every page’s speed; on Squarespace projects I upload .woff2 only, two weights for headings and two for body, and the best Squarespace font pairings post covers what to choose when the brand does not dictate it.

Frequently asked questions