Squarespace offers a variety of built-in font options, but sometimes you need more flexibility to match your brand’s unique aesthetic. Custom CSS allows you to modify your website’s typography in ways that aren’t possible through the standard settings. In this guide, we’ll walk you through how to change fonts in Squarespace using CSS, including:

✔️ How to target specific text elements
✔️ The best way to upload and use custom fonts
✔️ Troubleshooting font changes

By the end of this tutorial, you’ll have full control over your Squarespace typography.

Why Use Custom CSS to Change Fonts in Squarespace?

Squarespace’s design panel provides a great selection of fonts, but if you’re looking for complete creative control, CSS is the way to go. With custom CSS, you can:

Use Google Fonts or other custom fonts not available in Squarespace
Change fonts for specific sections (like blog titles or navigation menus)
Fine-tune font styles, sizes, and weights for a more cohesive brand identity

How to Change Fonts in Squarespace Using CSS

Step 1: Access the Custom CSS Editor

Log in to your Squarespace account.
Navigate to Website > Design > Custom CSS
Paste your CSS code in the editor box.

Step 2: Target the Right Text Elements

To change a font using CSS, you need to know which element to target. Below are some common text elements and their CSS selectors:

Headings (H1, H2, H3, etc.)
h1 { font-family: 'Open Sans', sans-serif; }
Paragraph Text
p { font-family: 'Lora', serif; }
Navigation Menu
.header-nav-item { font-family: 'Poppins', sans-serif; }

Step 3: Upload & Use Custom Fonts

If you want to use a font that isn’t available in Squarespace or Google Fonts, you can upload your own.

Upload the Font File
- Go to Settings > Files and upload your font file (OTF or TTF).
- Copy the font file URL.
Add Custom CSS to Load the Font
- @font-face { font-family: 'MyCustomFont'; src: url('YOUR_FONT_FILE_URL') format('woff2'); } body { font-family: 'MyCustomFont', sans-serif; }

Step 4: Customize Font Styles Further

Once your new font is applied, you can adjust styles like size, weight, letter spacing, and color to match your branding.

Change Font Size, Weight, and Spacing

Modify the appearance of your text with the following CSS:

h1 { font-size: 36px; /* Adjusts the size of the text */ font-weight: 700; /* Makes the text bold */ letter-spacing: 2px; /* Increases spacing between letters */ }

Change the Color of Text

To change the color of your text, use the color property in CSS. You can specify a color using hex codes, RGB values, or color names:

h1 { color: #ff6600; /* Changes the text color to orange */ } p { color: rgb(34, 34, 34); /* Changes paragraph text to dark gray */ }

If you want different colors for hover effects, like changing the navigation link color when hovered over, use this:

.header-nav-item a:hover { color: #ffcc00; /* Changes text color to yellow when hovered */ }

Troubleshooting Font Changes

If your new font isn’t appearing correctly, try these fixes:

Clear your browser cache
Check for conflicting CSS rules
Ensure your font file is properly uploaded and linked

Free Resources for Customizing Your Website

To make the most of your Squarespace site, grab these freebies:

📝 Website Essentials Audit Checklist – Ensure your site is well-optimized.
🖋 Home Page Copy Formula – Write compelling homepage content.

Want More Website Tips?

Join our Passport Club Email List and get access to:

Explore More Blogs from The Growth Passport

Blog

How to Add Custom CSS to Your Squarespace Website (Beginner’s Guide)

Want to customize your Squarespace website but don’t know how to code? This beginner-friendly guide will show you how to add custom CSS in Squarespace to tweak fonts, colors, layouts, and more. Learn step-by-step instructions, best practices, and tips to avoid common mistakes while keeping your site optimized for performance.

How to Change Fonts in Squarespace Using Custom CSS

Why Use Custom CSS to Change Fonts in Squarespace?