How to Add Custom Fonts to Squarespace
Squarespace offers a ton of awesome font selections right out of the box — including hundreds of fonts from the Google Font and Adobe Font libraries. For many sites, that’s more than enough. But sometimes you want your typography to do a little more heavy lifting, especially if you’re creating a brand-forward website that truly stands out.
Whether you’re using a hand-lettered typeface from an independent designer or simply want to maintain consistency with your existing brand identity, adding custom fonts is a fantastic way to elevate your Squarespace site. And with Squarespace’s newest update (Fall 2025), it’s now easier than ever to upload and use your own fonts — no CSS required.
This guide walks you through the new method (as of Fall 2025) and the legacy method (still helpful for advanced use cases).
Finding the Right Font
Our favorite place for custom fonts is Creative Market — you’ll find thousands of beautifully crafted styles, including favorites from Nicky Laatz, Sam Parrett, and Jen Wagner.
MyFonts is another excellent choice for high-quality, commercially licensed typefaces with straightforward licensing options.
For free-for-commercial-use fonts, Font Squirrel is a classic. The quality varies, but if you’re willing to sift through a large library, there are some gems in there.
And if you’re looking for inspiration rather than downloads, Typewolf is a dream. It's a curated directory packed with font pairings, real-world examples, and endless design ideas.
Getting the Legal Things Covered
Before you upload any custom font, make sure your license covers:
Commercial use
Font-face embedding (for web use)
Most reputable font marketplaces outline this clearly, but always double-check. Better safe than sorry.
Downloading the Proper File Type
Most downloadable fonts come in .otf or .ttf formats. For best compatibility and performance, you’ll also want .woff and .woff2 versions.
Many vendors include these web-ready formats automatically. If not, you can convert them using Font Squirrel’s Webfont Generator — a free, reputable option used by designers everywhere.
How to Add Custom Fonts in Squarespace (New Built-In Method)
Squarespace’s recent update makes this easier than ever. Here’s how:
Go to Pages > click Site Styles (paintbrush icon in top right corner) > then click the > icon next to Fonts.
Choose from one of the available font formats (Headings, Paragraph, Buttons, etc.).
Click the font dropdown menu next to the font that is currently being used > click the upload icon next to the Search Fonts search bar.
Drag and drop your font file into the designated box or select the + icon and choose your file from your computer to upload your font file.
Once you have uploaded your font file, you can find the custom font in the font dropdown menu under Uploaded. You can apply that font to headings, paragraph text, buttons, navigation—anywhere that Squarespace allows you to change a font.
Using the Legacy Method to Add Custom Fonts
If you need fine-grained control, want to load fonts in specific weights, or prefer manual setup, the legacy method still works.
Go to Pages > scroll down and click Custom CSS.
Click Manage Custom Files
Upload all your font files (.otf or .ttf + .woff + .woff2)
Add the following @font-face code. Replace
'font name'with the actual name of your font.
@font-face { font-family: 'font name'; src: url(''), url(''), url(''); }
5. Assign your font with CSS like this:
h2 { font-family: 'font name', sans-serif; }
Or get more specific with your selectors, like targeting blog post titles only:
h1.blog-title a { font-family: 'font name', sans-serif; }
This method remains powerful for designers who want full control and customization beyond Site Styles.
Final Thoughts
Adding custom fonts to your Squarespace site is one of the simplest ways to elevate your brand and create a polished, cohesive experience for your visitors. With Squarespace’s updated Custom Fonts feature, you now have more flexibility than ever — whether you prefer a quick, code-free setup or enjoy the extra control that comes with CSS. We hope this guide helps you take your typography to the next level and build a site that feels unmistakably you. If you’re looking for more ways to refine your Squarespace design, be sure to explore our other tutorials, resources, and templates to keep your site looking its best.
FAQ: Custom Fonts in Squarespace
Do I still need CSS to use custom fonts?
Not anymore! Squarespace’s new Custom Fonts panel lets you upload and apply fonts without touching code. CSS is only needed for advanced targeting.
Which file formats should I upload?
At minimum: .otf or .ttf. Ideally: .woff and .woff2 for best web performance.
Can I use Adobe Fonts?
Yes — Adobe Fonts (TypeKit) is supported natively in Squarespace and doesn’t require file uploads. However, not all Adobe Fonts are included in Squarespace, so if you have one that isn’t included that you want to use, follow the steps above to do so.
Will custom fonts affect my site speed?
Any additional font files can increase load time slightly. To minimize this:
Upload only the weights/styles you need
Use .woff2 whenever possible
Avoid large decorative fonts for body text
Can I use different custom fonts on different pages?
Yes — with CSS selectors, you can assign your custom font to specific pages or sections.