How to use custom fonts in Squarespace

Why This Matters

Picture this: you’ve painstakingly crafted your brand—logo, palette, voice, the lot. Yet your website still looks like it could belong to any number of other ambitious businesses. The culprit? That default font staring blandly out at your visitors. It’s frustrating and, honestly, risks cheapening all your hard work. Just one misaligned typeface can make your website feel like someone else’s living room, which is familiar but not personal or connected to your brand.

Default fonts can do the job, but they rarely do your job. These fonts often can’t convey the nuance, personality, or professionalism your brand deserves. When a website doesn’t look “designed,” credibility takes a hit. That all-important first impression for your visitor drops away.

Fortunately, it only takes a bit of legwork to bring your own typefaces to Squarespace. Those who want every pixel to feel intentional can use custom fonts to achieve this. When done well, your digital presence stands out as uniquely yours and communicates your story down to the last character.

Common Pitfalls

There are a few ways people get tangled up with custom fonts in Squarespace. First, many assume that their chosen font will be accepted with open arms, regardless of format or licence. They upload a handy TTF from a forgotten corner of the cloud, slap some CSS in, and expect it to pop up like magic. It never does.

Others trip over file uploads, hunting for a “font” field that doesn’t actually exist. Some upload their font files as images, then wonder why the font won’t appear in their menus. More than a few have pasted bold font code into the wrong boxes, promptly scrambling the look of their site faster than a toddler with a paintbrush.

Licensing is another hidden trap. Downloading that tempting typeface off a freebie site might look easy, but business use can land you in a legal pickle if you haven’t checked the permissions.

A persistent pitfall comes from forgetting to assign the font to the right elements. For example, you might set all headings to use your new typeface but leave the body text in a default font, resulting in a mismatched and clumsy look. Or you might make the font so custom that only you can see it, because it failed to load for your website visitors.

In most cases, trying to add a custom font by guesswork doesn’t lead to good results.

Step-by-Step Fix

Here’s the process, each bit split out plainly. No faff. Just steps you can follow in the same time it takes to make a cup of tea (or multiple, if you hit a licensing snag).

Step 1: Secure the Right Font File

Not all font files are created equal, especially on Squarespace.

Start by confirming what file format you need. Squarespace currently works best with OTF (OpenType Font) or WOFF/WOFF2 file formats. TTF sometimes works, but OTF is least likely to cause issues.

Check, double-check and triple-check your font licences. You’ll need explicit permission for web embedding if your website isn’t just for family eyes. If you’re buying a font, look for “web licence”, “commercial use”, or similar phrases. If you’re using Google Fonts or Adobe Fonts, those are generally safe for most use cases, but always have a glance over their guidelines.

If your designer has delivered a bundle to you, root around for the OTF version. Downloaded from a third-party website? Give it a scan with antivirus, too, for peace of mind.

Tip: Some fonts come with multiple files for weight and style such as regular, bold, italic, and so on. Keep these organised so you can upload and reference each style specifically if needed.

Pixelhaze Tip
Always store your legal documentation for third-party fonts somewhere obvious. Licensing confusion is common and may bite you years down the line. If you’re ever unsure, reach out to the original font creator for clarification. Most are responsive and helpful.

Step 2: Upload the Font to Squarespace

With your shiny, above-board OTF or WOFF font on deck, it’s time to introduce it to Squarespace.

Open your Squarespace dashboard and navigate to Design > Custom CSS. Now look right down at the bottom of the left-hand panel. You’ll spot a button called “Manage Custom Files”.

Click this. The upload dialogue appears. Either drag your font file right onto this panel or click to browse your computer and select the file. When it uploads, you’ll see the file name appear in the panel and be available to reference in your code.

Tip: Repeat this process for each separate font weight or style you want to use, such as regular, bold, or italic. Each one counts as a different file.

Pixelhaze Tip
Rename your font files to make sense before uploading. “BrandFont-Regular.otf” is far better than “bfntr1.otf” when you’re knee-deep in code later. Neatness now saves confusion (and headaches) next month.

Step 3: Tell Squarespace About Your Font via the @font-face Declaration

Font file uploaded? Now you move on to CSS.

With the “Custom CSS” panel still open, you’ll need to create an @font-face rule. This instructs Squarespace to recognise the font and assign it a name you can call on when targeting elements.

A standard @font-face declaration takes this form:

@font-face {
    font-family: 'YourFontName';
    src: url('URL_OF_YOUR_FONT_FILE');
    font-weight: normal;
    font-style: normal;
}

To get the URL of your uploaded font:

1. In the Custom CSS panel, click on “Manage Custom Files”.
2. Click your uploaded font file. Squarespace will generate a long URL in the CSS, like this:

url('https://static1.squarespace.com/static/.../YourFontFile.otf')

Replace 'YourFontName' with a short name you’ll actually remember. If you’re uploading multiple styles (like “BrandFont-Bold”), change font-weight and font-style as needed.

Example for a sleek, light font:

@font-face {
    font-family: 'BrandFont-Light';
    src: url('https://static1.squarespace.com/static/62554a379dc7e96b0ee4c256/t/62554be23d00774b3bb6c9ed/1649757155240/BrandFont-Light.otf');
    font-weight: 300;
    font-style: normal;
}

Pixelhaze Tip
If you’re adding several weights or styles, give each its own unique @font-face with the right font-weight and font-style. That way, normal, italic, bold, and light can all be properly targeted in CSS.

Step 4: Assign Your Font to Website Elements

Telling Squarespace about your font is only part of the job. Now specify which parts of your site get the special treatment.

To make every heading (h1, h2, h3) use your custom font, add this to your Custom CSS panel:

h1, h2, h3 {
    font-family: 'BrandFont-Light', Arial, sans-serif;
}

For all paragraphs:

p {
    font-family: 'BrandFont-Light', Arial, sans-serif;
}

The format font-family: 'CustomFont', Arial, sans-serif; tells browsers to fall back to Arial or a generic sans-serif if your custom font fails to load (rare, but it happens).

If you want to style only certain sections, use unique Squarespace class names, which you can grab using your browser’s “Inspect Element” tool.

Pixelhaze Tip
Test on multiple devices. Fonts can display oddly on certain browsers, especially Safari. If your new font looks off on mobile, check that your OTF is properly formatted and try converting it to WOFF/WOFF2 for better compatibility.

Step 5: Fine-Tune Your Typography in CSS

Making a font change does not guarantee beautiful typography. Other properties often need adjustment for a refined look:

p {
    font-family: 'BrandFont-Light', Arial, sans-serif;
    font-size: 19px;
    color: #182239;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

h1 {
    font-family: 'BrandFont-Bold', Arial, sans-serif;
    font-size: 42px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #221e20;
}

Consider tweaking:

• font-size: Adjusts size
• font-weight: Enables subtle boldness (if your font supports it)
• letter-spacing: Widens or condenses space between letters
• text-transform: Converts to uppercase if you want emphasis
• line-height: Increases readability

After each change, check your site at various screen sizes. Small tweaks can unexpectedly affect your layout.

Pixelhaze Tip
If you go too far and something breaks, just hit “Undo” in the Custom CSS panel or remove the code and start again. CSS is forgiving, and minor mistakes won’t crash your website.

Step 6 (Optional): Troubleshooting & Testing

Even with careful work, fonts sometimes don’t display as expected. Try these checks if your font isn’t showing:

• File Format Issues: If OTF isn’t working in all browsers, convert your font to WOFF or WOFF2 using a free tool like Transfonter. These formats are lighter and designed for web use.
• Incorrect URL: A typo in your URL will break the connection. Ensure you copy the full string as provided by Squarespace.
• Browser Cache: Sometimes your browser stubbornly shows old styles. Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the cache.
• Licensing Blocks: Some fonts are blocked from web usage and simply won’t load cross-domain. Double-check your permissions.
• Selector Mistakes: Inspect the element to check that your CSS selectors are correct. Use unique class names if you need to target a specific bit.

If you can’t figure out what’s gone wrong, revert to a built-in Squarespace font temporarily. Then, reintroduce your custom font settings one step at a time to track down the issue.

Pixelhaze Tip
Keep a plain-text backup of your CSS code elsewhere. If you ever need to roll back, it’s a cut-and-paste away. If in doubt, email your CSS to a more technical friend or post a question in our forum.

What Most People Miss

Custom fonts play a bigger role than decoration; they affect the foundations of your website. Many rush the visual part and overlook performance and accessibility.

Custom fonts add to file size, which can slow down loading times. If you upload every variation, your site slows even more. Focus only on the weights and styles you truly need. For many sites, regular and bold are enough.

Use sensible fallback fonts in your CSS. Error-proofing isn’t the only purpose. Some devices or connections may not load your custom font the first time, so your site remains legible with a backup font until the custom font displays.

Readable typography matters, too. Not every beautiful display font suits long paragraphs, and some trendy fonts come with poor kerning. Test your site on desktop and mobile, under different lighting, before finalizing your choice.

The Bigger Picture

When you make custom fonts work, you show clients and customers that you value detail, polish, and trustworthiness. Even if visitors can’t name the typeface, they’ll sense the difference when your brand looks consistent and intentional.

Matching your website with your wider branding supports your goals. Whether pitching to new clients, applying for awards, or wanting a site that reflects your real strengths, this investment pays off for years by saving countless tweaks down the line.

Learning to work with Squarespace’s customisation quirks gives you tools for future improvements. You’ll be more prepared for tasks like editing buttons, refining layouts, or adding plugins. As you develop your site, it becomes a true asset for your business.

Wrap-Up

By taking time to handle custom fonts properly, you can change a standard Squarespace website into a professional and unique home for your brand. You have more control than a default template offers. Secure the right files, check your permissions, add the necessary CSS, and adjust until everything feels right for your brand.

Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.