How to Upload Custom Fonts in Squarespace (No Code Needed)
Want your Squarespace site to feel more on brand? With Squarespace's new update, you can now upload custom fonts right inside the Fonts panel. No code needed!
Make Sure You Have the Right License
Before uploading, double-check that:
You purchased the font from a font foundry or licensed source
You have a web license, not a desktop license
Desktop fonts are meant for programs like Photoshop or Figma. For your website, you need the web version of the font.
Pick the Right Font File Type
Squarespace accepts common web font formats:
TTF
WOFF
WOFF2
OTF
You only need to upload one file per style. If your font foundry gives you several formats, the web versions like OTF, WOFF or WOFF2 are usually best for websites. TTF is more common for desktop use.
If your foundry gives you a full font family with many weights (like 100, 200, 300, 400, and so on), only upload what you'll actually use.
How Squarespace handles font weights and styles
Squarespace looks at the font files you uploaded and offers only the weights it knows you have. For example, if you uploaded:
400 regular
700 bold
You can choose between those weights in the style panel. This is why it helps to upload just the weights you plan to use.
If you upload an italic style font file, Squarespace will know it’s italics and any text that's set to italic will use the proper italic style for that font. The same applies if you upload a bold version of a font file.
Step 1: Open the Site Styles Panel
To get to Site Styles, you can use either option:
Click the Styles link
Click the paintbrush
Both options open the same Site Styles panel, where you control your fonts.
Step 2: Go to the Fonts Section
Inside Site Styles, click on Fonts.
You'll see different font groups, such as:
Headings
Paragraphs
Buttons
Miscellaneous
Step 3: Upload a Custom Font for Headings
In the Headings section, open the font dropdown. You'll see an arrow icon that lets you upload a custom font file.
Activate the Uploaded Font on Your Headings
After the font uploads, go back to the Headings font dropdown. You'll now see your custom font listed under uploaded fonts.
Select it, and your headings in the preview will switch to the new font right away.
From there, you can adjust:
Line height
Letter spacing
Text transform (like uppercase)
Font size
Your custom heading font is now active across the site wherever heading styles are used.
Add Italic Styles for Headings
If your font family includes italics, you can upload those too so Squarespace uses the proper italic style.
Click Manage.
Upload the italic version of the same font with the same weight.
Squarespace automatically recognizes that this is the italic version of the heading font you already uploaded. Any italic heading text will use that proper italic style.
Upload a Custom Font for Paragraphs, Buttons, and Miscellaneous
The upload process is the same for all font sections. Simply:
Go to the Paragraphs, Buttons, or Miscellaneous section
Open the font dropdown and click the upload arrow
Upload your font file
Select your uploaded font from the dropdown
If you've already uploaded a font file in another section, you don't need to upload it again, just select it from the dropdown in whichever section you want to use it.
Target Fonts to Specific Elements with Assign Styles
Want to use different fonts for specific areas of your site? The Assign Styles feature lets you override your global font settings for individual elements.
Here's how:
Open Site Styles and go to Fonts
Click Assign styles
Browse through the list to find the specific element (like Portfolio Grid titles, Blog post titles, or Product names)
Select a different font for that element
This is perfect for making certain sections stand out or matching specific page layouts to your brand style. For example, you could use your heading font site-wide but switch to your body font just for portfolio grid titles.
Final Thoughts
Custom fonts are one of the easiest ways to make your Squarespace site feel uniquely yours. What used to require custom CSS is now just a few clicks in the editor. Upload your brand fonts once, apply them across your site, and every new page automatically reflects your style—no code knowledge required.
