How to Add Custom Fonts in Squarespace (Without Breaking Anything)

How Custom Fonts Work in Squarespace

Squarespace has a built-in font library with hundreds of Google Fonts and curated typefaces available through the Design panel. But squarespace custom fonts go one step further - they let you upload font files directly to your site so you can use typefaces that are not in the standard library. This is essential for brands with licensed fonts, unique display type, or specific typography requirements baked into their style guide.

Custom font support is available on Squarespace's Business and Commerce plans. If you are on a Personal plan, you will need to upgrade before the upload font to squarespace option becomes available. Once you are on an eligible plan, the upload process uses CSS and the Custom CSS panel - no third-party plugins required.

What Font Formats Does Squarespace Accept?

Squarespace supports the following web font formats for upload: WOFF, WOFF2, TTF, and OTF. WOFF2 is the recommended format for web use because it offers the best compression and browser compatibility. If your font file came as a TTF or OTF (common with purchased or downloaded fonts), you can convert it to WOFF2 using a free tool like Font Squirrel's Webfont Generator before uploading.

Make sure you have the appropriate license to use the font on a web property. Many fonts are free for personal use but require a commercial web license for business sites. Check the license terms before uploading any font to your Squarespace site.

How to Upload a Custom Font to Squarespace (Step by Step)

The method for how to add font to Squarespace involves uploading the font file as a site asset and then referencing it with a @font-face CSS declaration. Here is the full process.

Step 1: Upload Your Font File to Squarespace

Log in to your Squarespace site and go to Pages in the left sidebar. Scroll to the bottom and click Not Linked, then add a blank page. This temporary page is used only to trigger the file upload - you can delete it afterward. Open the page editor, click the plus icon to add a block, and choose File. Upload your font file (WOFF, WOFF2, TTF, or OTF) from your computer.

Once the file is uploaded, click on it in the editor to view its URL. Copy that URL - it will look something like https://static1.squarespace.com/static//t/.woff2. This is the direct URL to your font asset on Squarespace's CDN, and you will use it in the next step. For more on adding custom code to your Squarespace site, see our guide to how to add custom code to Squarespace.

Step 2: Declare Your Font with @font-face CSS

Go to Design in the left sidebar, then click Custom CSS. In the CSS editor, add the following code, replacing the URL with the one you copied in Step 1:

@font-face { font-family: 'YourFontName'; src: url('https://static1.squarespace.com/your-font-url.woff2') format('woff2'); font-weight: normal; font-style: normal; }

Replace YourFontName with whatever name you want to use when calling this font in CSS - this is the internal reference name, not the official font name, though matching them makes things easier. If you are uploading multiple weights (Regular, Bold, Italic), add a separate @font-face block for each, adjusting the font-weight value accordingly. Our full guide to how to add custom CSS to Squarespace walks through the Custom CSS panel in detail.

Step 3: Apply the Font to Your Squarespace Elements

Once the @font-face declaration is in place, you can apply your squarespace custom font to any element using standard CSS selectors. For example, to apply it to all headings:

h1, h2, h3 { font-family: 'YourFontName', sans-serif; }

To apply it to body text: body, p { font-family: 'YourFontName', sans-serif; }

Always include a fallback font (like sans-serif or a Google Font) after your custom font name, separated by a comma. This ensures your text still displays cleanly if the custom font fails to load for any reason. Click Save in the CSS panel and refresh your live site to see the change take effect.

Step 4: Check Rendering Across Devices

After applying your squarespace font upload, test it on desktop, tablet, and mobile. Some fonts render cleanly at large sizes but become hard to read at body text sizes - especially on mobile screens. Check readability, line spacing, and letter spacing. If the font feels cramped or loose, adjust the letter-spacing and line-height properties in your CSS until it reads comfortably. For broader design advice, our Squarespace design tips guide covers typography as part of a complete site-wide approach.

Squarespace Typography: Best Practices for Custom Fonts

Uploading a font is the technical step. Using it well is the design step. A few principles of squarespace typography that apply whether you are using a custom font or the built-in library:

Limit Your Font Choices

Two fonts are almost always enough - one for headings, one for body text. Three is the maximum before things start to look inconsistent. Resist the temptation to use your custom font everywhere. A strong heading font paired with a clean, readable body font creates contrast without chaos. If your brand uses a distinctive display font, reserve it for headlines and let a neutral sans-serif do the heavy lifting in paragraphs.

Prioritize Readability Over Style

Body text should be immediately readable at 16px–18px on mobile. Decorative fonts, script fonts, and condensed typefaces can be striking in a heading but exhausting to read in long paragraphs. If your custom font is a display or decorative typeface, use it sparingly - hero headlines, section titles, pull quotes - and pair it with something legible for everything else. For more on getting the most out of your site's visual design, see our guide to how to customize your Squarespace website.

Watch Load Times

Custom fonts add HTTP requests and file weight to your page. WOFF2 files are typically small (20–100KB), but if you upload multiple weights and styles, those requests add up. Only upload the font weights you actually use on the site - there is no reason to include a Heavy Italic weight if you never call it in your CSS. Lean font loading keeps your site fast, which matters for both user experience and search rankings.

Troubleshooting: Font Not Showing Up in Squarespace

If your custom font is not appearing after following the steps above, here are the most common causes: the font file URL in your @font-face declaration has a typo or has changed; the font-family name in the CSS selector does not exactly match the name declared in @font-face (case-sensitive); the browser is serving a cached version of the page - try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R); or the Squarespace CSS editor has unsaved changes. Check each of these before assuming the upload failed. If the issue persists, revisit the file upload step and re-copy the CDN URL directly from the file block in the page editor.

Your Brand Deserves Its Own Voice - Starting With the Font

Typography is not decoration. It is communication. The moment a visitor lands on your Squarespace site, the fonts on the screen are already doing work - shaping perception, setting tone, and signaling whether this is a brand worth trusting. Default fonts are not wrong, but they are shared. Your custom font is yours alone.

Adding a squarespace custom font takes less than fifteen minutes once you know the method. The @font-face approach gives you complete control over squarespace typography with no plugins, no workarounds, and no dependencies on third-party services. Upload once, apply everywhere, and watch how much sharper your site suddenly feels.

The technical part is straightforward. The payoff is a Squarespace site that looks and feels unmistakably like your brand - not a template, not a theme, not a starting point. A destination.