Typography makes or breaks a website. You could have the best photos and copy in the world, but if your fonts feel off, the whole thing falls flat. The good news? Squarespace makes it surprisingly easy to change fonts — and if you want to go beyond the built-in options, you can load any Google Font with a few lines of code.
This guide covers everything: the built-in font picker, loading custom Google Fonts, font pairing strategies, and the mistakes that trip up most people.
Method 1: Using the Built-in Font Picker
Squarespace ships with hundreds of Google Fonts and Adobe Fonts already built in. For most sites, this is all you need.
- Open your site editor and click Design → Fonts
- You will see font packs (curated pairs) or you can choose individual fonts
- Click on any heading or body text to assign a specific font
- Adjust weight, size, letter spacing, and line height in the panel
Pro tip: Squarespace font packs are actually pretty well curated. Before going custom, try a few — you might find a combination you love without writing any code.
Method 2: Adding Custom Google Fonts via Code Injection
Want a font that is not in the Squarespace library? No problem. Google Fonts has 1,500+ free families, and you can load any of them.
Go to fonts.google.com, pick your font, and grab the embed code. Then go to Settings → Advanced → Code Injection → Header and paste this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">Then add CSS to apply it. In Design → Custom CSS, paste:
/* Apply custom font to headings */
h1, h2, h3, h4 {
font-family: 'Outfit', sans-serif !important;
}
/* Apply to body text */
body, p, li, a {
font-family: 'Outfit', sans-serif !important;
}Replace Outfit with whatever font you chose.
Font Pairing Best Practices
The secret to good typography is contrast. You want your heading font and body font to feel like they belong together, but they should not look the same.
- Pair a serif with a sans-serif. Classic combo. Example: Playfair Display for headings, Inter for body text.
- Match the mood. A playful script font looks weird with a corporate sans-serif. Keep the vibe consistent.
- Stick to 2 fonts max. Every extra font adds load time and visual noise. Two is almost always enough.
- Check the x-height. Fonts with similar x-heights (the height of lowercase letters) tend to pair better.
Common Font Mistakes to Avoid
Loading too many font weights. Every weight (300, 400, 500, 600, 700) is a separate file download. If you only use regular and bold, only load those two. Your page speed will thank you.
<!-- BAD: Loading everything -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- GOOD: Load only what you need -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap" rel="stylesheet">Forgetting display=swap. Without it, text can be invisible while the font loads. The swap parameter tells the browser to show fallback text immediately, then swap in your custom font once it loads.
Not adding preconnect. Those two preconnect lines above are not optional. They tell the browser to start connecting to Google Fonts early, which can shave 100-300ms off your load time.
Using !important everywhere without understanding specificity. Squarespace has its own styles, so you do need !important in most cases. But if you start stacking importance on everything, debugging becomes a nightmare. Target specific selectors when you can.
Quick Reference: Popular Font Pairings
Not sure which fonts work together? Our Font Pairing Tool lets you preview combinations side by side, with live Squarespace-style previews. Way faster than guessing.
