Squarespace Code Hack - Add a Custom Font To Squarespace
So, you’ve nailed your brand identity—now it’s time to bring your website to life!
You’ve built out your pages, added your content, and you're ready to add those finishing style touches… but suddenly realize your go-to brand font isn’t available in Squarespace. Frustrating, right?
If you’re still in the early stages and haven’t built your website yet, take a moment to check out this great article from the team at Texas Web Design: “5 Reasons Why Web Design Matters for Your Business.” It's a must-read before you dive in!
Why Typography Matters
Typography is a huge part of your brand’s visual identity, and consistency with elements like fonts, color palettes, and imagery is key. So when your must-have font isn’t available in Squarespace, it can definitely throw a wrench in your design plans.
Good news: there's a simple CSS hack that allows you to upload and use any font you like—and it’s one of my most-used tricks. Here’s a step-by-step guide to help you add custom fonts to your Squarespace site.
Step 1: Find Your Font
Start by choosing a font. Here are a few of my favorite free font websites—just make sure to check their licensing terms, especially for commercial use:
Once downloaded, store your font files in a dedicated folder so they’re easy to find.
Step 2: Open Your Squarespace Site
In your site’s left-hand menu, click Design > Custom CSS.
Open the editor in a new window for better visibility.
This is where you’ll paste your custom CSS code.
Step 3: Upload Font Files
Drag and drop each font file (e.g., .woff, .ttf) into the Custom CSS editor window. Once uploaded, click Save.
Step 4: Add the Font Code
Start by adding this CSS (replacing “BLACKJACK” with your font’s name):
// ADDING BLACKJACK FONT // @font-face { font-family: 'BLACKJACK'; src: url('FONT URL'); }
Next, remove the 'FONT URL' and place your cursor between the two single quotes. Then click your uploaded font file from the list on the right—it’ll automatically insert the correct file path.
⚠️ Pro tip: Make sure your cursor is precisely placed, or the URL might drop in the wrong spot and break your code. (Learned that the hard way. 😅)
Step 5: Assign the Font
Now apply your custom font to a specific element. For example:
// ASSIGN BLACKJACK FONT // h3 { font-family: 'BLACKJACK'; font-size: 65px; letter-spacing: 15px; text-shadow: 1px 2px #BCC6CC; transform-origin: 0 6; transform: rotate(-5deg); }
You can change h3 to any tag you want: h1, h2, p, etc. Customize font size, letter spacing, shadow, rotation—whatever fits your vibe. Even better: you’ll see changes in real time!
Bonus Tip:
Create a separate Squarespace trial site just for experimenting with custom code. That way, you can test all your ideas without the fear of breaking your live site.
Happy coding!
Got questions? Feel free to reach out—and don’t forget to subscribe to my blog for more CSS tips, tricks, and web design inspo.
