Upload a Custom Font to Squarespace
Love your Squarespace template but wish it had that perfect font to match your brand? Typography can drastically change the vibe of your site. And here’s the good news: you can upload your own custom font to Squarespace, even if it’s not part of their built-in font library.
Whether you’re a coach wanting a soft, elegant serif, or a consultant looking for something bold and modern, this guide walks you through everything — step by step — no coding degree required.
Step 1: Pick the Right Font File
Before you start, you’ll need the actual font file(s). Most professional fonts are available in .woff, .woff2, .ttf, or .otf formats.
Here’s what to do: If you purchased a font from Creative Market, Adobe Fonts, or Google Fonts, check the licensing and download the webfont files. Stick with .woff or .woff2 formats if possible — they load faster and are supported by most browsers.
Pro tip: Make sure your license covers web use. Desktop-only licenses aren’t legal for website uploads.
Step 2: Upload Your Font to Squarespace
Squarespace lets you store your font files directly in your site’s Custom Files section. Here’s how:
Open your Squarespace dashboard and click Design → Custom CSS.
In the CSS editor, scroll down and click Manage Custom Files.
Click Upload File and select your font files from your computer.
Once uploaded, your font files will show up in the “Custom Files” list, ready to be linked in your CSS.
Step 3: Add the CSS Code
Now, let’s tell your site to use your new font. Copy and paste this code into Design → Custom CSS:
@font-face {
font-family: 'YourFontName';
src: url('your-font-file.woff2') format('woff2'),
url('your-font-file.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'YourFontName', sans-serif;
}
Replace these parts:
YourFontName → with the name of your font (no spaces).
your-font-file.woff2 → click Manage Custom Files, select your uploaded file, and Squarespace will insert the correct URL automatically.
Step 4: Apply Your Font to Specific Elements
If you don’t want the custom font everywhere, you can target specific elements. Here are a few examples:
Headings only:
h1, h2, h3, h4 {
font-family: 'YourFontName', serif;
}
Buttons:
.sqs-block-button-element {
font-family: 'YourFontName', sans-serif;
}
Step 5: Preview, Test and Save
Click Preview to check how your font looks across desktop and mobile. Once you’re happy, click Save.
Make sure your font loads quickly — large files can slow down your site. Test your site in Chrome, Safari, and Firefox to ensure compatibility.
Check mobile view for readability — smaller screens need legible, clean fonts.
Troubleshooting Common Issues
Font not showing up? Double-check that the font name in your CSS matches exactly, including capitalization.
File format errors? Convert your font to .woff or .woff2 using a free tool like Transfonter.
Licensing issues? If you see a warning or error, check that you’re using a properly licensed version of the font.
———
Need help with your site set up? We also do that! Contact us to request help.