Squarespace offers 1,600+ fonts. Sometimes that’s still not enough.
Learning how to add fonts to Squarespace lets you upload custom typefaces that match your brand identity exactly.
Maybe your designer handed you specific font files. Or you purchased a premium typeface that sets your site apart.
Either way, the built-in font library won’t cut it.
This guide walks through three methods: direct upload in Squarespace 7.1, custom CSS for both versions, and Adobe Fonts integration for 7.0 users.
You’ll learn exact paths, code snippets, and troubleshooting fixes.
Total time: 5-15 minutes depending on your approach.
Introduction
Adding fonts to Squarespace is the process of uploading and applying custom typography to your website through Site Styles or CSS code.
Users need this when brand guidelines require specific typefaces not available in Squarespace’s built-in font library.
This guide covers 3 methods requiring 5-15 minutes and basic familiarity with the Squarespace editor.
Is Squarespace still gaining ground?
Explore the newest Squarespace statistics: market size, user demographics, revenue insights, and design trends powering the platform.
Check the Numbers →Prerequisites
Gather these before you start:
- Active Squarespace subscription (any plan)
- Squarespace version: 7.0 or 7.1
- Font file formats: OTF, TTF, WOFF, or WOFF2
- Valid font licensing for web use
- Access to Site Styles panel
Optional: Adobe Creative Cloud subscription for Adobe Fonts integration in version 7.0.
Step One: How Do You Access the Font Settings in Squarespace?
Open your Squarespace dashboard and navigate to Website > Site Styles > Fonts to access all typography controls for headings and paragraphs.
Action
- Website menu (left sidebar): Click to expand options
- Site Styles: Select from dropdown
- Fonts panel: Click to view typography settings
Alternatively, click the paintbrush icon in the top-right corner of the editor.
Purpose
This panel controls all font family, font weight, and letter spacing settings across your entire site.
Step Two: How Do You Use Squarespace’s Built-in Font Library?
Select from 600+ Google Fonts and 1,000 Adobe Fonts directly in the Fonts panel without uploading files or writing code.
Action
- Headings or Paragraphs section: Click to expand
- Family dropdown: Click to browse fonts
- Search field: Type font name to filter results
The font preview updates in real-time as you browse.
Purpose
Built-in web fonts load faster and require no licensing verification from you.
Step Three: How Do You Upload a Custom Font File Through the Fonts Panel?
Click the upload icon within any font selector to drag and drop OTF, TTF, or WOFF files directly into Squarespace 7.1.
Action
- Current font name: Click to open font picker
- Upload icon (arrow symbol): Click to reveal upload area
- Font files: Drag and drop, or click plus icon to browse your computer
Uploaded fonts appear in your font list immediately after processing.
Purpose
Direct upload through the Fonts panel is the fastest method for adding brand fonts in version 7.1.
No custom CSS required with this approach.
If you need to change fonts on Squarespace for specific heading levels individually, the CSS method in later steps gives you that control.
Step Four: How Do You Add Custom Fonts Using CSS Code?
Navigate to Website > Website Tools > Custom CSS to upload font files and write code that applies custom typography across your Squarespace site.
Action
- Website Tools (under Utilities): Click to expand
- Custom CSS: Select to open code editor
- Manage Custom Files: Scroll down and click
- Add Images or Fonts: Upload your font file
Purpose
The CSS method works for both Squarespace 7.0 and 7.1 when you need granular control over typography settings.
Step Five: How Do You Write the @font-face CSS Code?
Declare your custom font using the @font-face rule, then click your uploaded file in Manage Custom Files to auto-insert the URL.
Action
Paste this code into the Custom CSS box:
“ @font-face { font-family: 'FONTNAME'; src: url(); } `
- FONTNAME: Replace with any name you want to reference later
- url() parentheses: Click between them, then select your font from Manage Custom Files
Purpose
The @font-face declaration tells browsers where to find and load your custom typeface.
Step Six: How Do You Apply Custom Fonts to Specific Text Elements?
Target HTML heading and paragraph selectors with the font-family property to apply your uploaded font exactly where you want it.
Action
Add this code below your @font-face declaration:
` h1 { font-family: 'FONTNAME'; } h2 { font-family: 'FONTNAME'; } h3 { font-family: 'FONTNAME'; } p { font-family: 'FONTNAME'; } `
Squarespace 7.1 selectors:
- Paragraph 1: .sqsrte-large
- Paragraph 2: p
- Paragraph 3: .sqsrte-small
- Headings: h1
,h2,h3,h4
Purpose
Selectors give you independent control over each heading style and body text element.
Step Seven: How Do You Add Multiple Custom Fonts?
Duplicate the @font-face block for each font file, using unique names, then assign different fonts to different selectors.
Action
` @font-face { font-family: 'HeadingFont'; src: url(); }
@font-face { font-family: ‘BodyFont’; src: url(); }
h1, h2, h3 { font-family: ‘HeadingFont’; } p { font-family: ‘BodyFont’; } `
Purpose
Brand guidelines typically require separate fonts for headings and body text.
Step Eight: How Do You Customize Font Styling with CSS?
Add properties like font-weight, letter-spacing, line-height, and text-transform to fine-tune your custom typography appearance.
Action
` h1 { font-family: 'FONTNAME'; font-weight: 700; font-size: 48px; letter-spacing: 2px; line-height: 1.2; text-transform: uppercase; } `
Purpose
These text formatting options let you match exact brand specifications beyond basic font selection.
Verification
Confirm your fonts display correctly across browsers and devices:
- Open your site in an incognito browser window
- Check multiple pages where fonts appear
- Test on mobile devices (iOS and Android)
- Verify in Chrome, Safari, and Firefox for cross-browser compatibility
- Clear browser cache if fonts do not render
Troubleshooting
Custom font not displaying after upload
Solution: Check file format (OTF, TTF, WOFF, WOFF2 only), clear cache, verify no typos in CSS font-family name.
Font looks different on mobile
Solution: Test responsive typography behavior; add media queries for mobile-specific font sizes.
Font only appears on some text elements
Solution: Verify selector matches exactly (h1 not H1), check for missing declarations in your CSS.
Adobe Fonts not syncing in version 7.0
Solution: Verify embed code placement in Code Injection header, confirm Adobe web project is published.
Alternative Methods Comparison
Method A: Direct Upload (Squarespace 7.1)
- Time: 2-3 minutes
- Complexity: Beginner
- Best for: Single custom font, no code experience
Method B: Custom CSS Files
- Time: 5-10 minutes
- Complexity: Intermediate
- Best for: Multiple fonts, targeting specific selectors
Method C: Adobe Fonts Integration (7.0)
- Time: 10-15 minutes
- Complexity: Intermediate
- Best for: Adobe Creative Cloud subscribers needing Typekit fonts
Related Processes
After adding fonts, you might want to:
- Change button colors in Squarespace to match your new typography
- Change your favicon on Squarespace for consistent branding
- Create a landing page on Squarespace showcasing your custom design
- Edit your Squarespace website with updated visual styles
FAQ on How To Add Fonts To Squarespace
What font file formats does Squarespace support?
Squarespace accepts OTF, TTF, WOFF, and WOFF2 font formats.
WOFF and WOFF2 files load faster on websites. TTF and OTF work but create larger file sizes that may slow page rendering.
Can I add custom fonts to Squarespace 7.0?
Yes, but only through Custom CSS or Adobe Fonts integration.
Version 7.0 lacks the direct upload feature available in 7.1. You’ll need to write @font-face declarations manually in the Custom CSS panel.
How many custom fonts can I upload to Squarespace?
Squarespace has no official limit on custom font uploads.
However, each font file increases page load time. Stick to 2-3 typefaces maximum for optimal site performance and visual consistency.
Why is my custom font not showing on my Squarespace site?
Common causes: incorrect font-family name in CSS, unsupported file format, or browser cache displaying old styles.
Clear your cache, verify the @font-face declaration syntax, and check that the font URL matches your uploaded file.
Do I need a font license to use custom fonts on Squarespace?
Yes. Most fonts require a web license for website use.
Desktop licenses typically don’t cover web embedding. Check your font provider’s terms before uploading to avoid licensing violations.
Can I use Google Fonts on Squarespace without uploading files?
Absolutely. Squarespace includes 600+ Google Fonts in the built-in font library.
Access them through Site Styles > Fonts. No upload or code required. They load directly from Google’s servers.
How do I apply different fonts to different heading levels?
Use CSS selectors to target specific headings: h1, h2, h3, h4.
Each selector can have a different font-family property. This method works in both Squarespace 7.0 and 7.1.
What is the difference between Squarespace 7.0 and 7.1 for fonts?
Version 7.1 offers direct font upload through the Fonts panel. No code needed.
Squarespace 7.0 requires Custom CSS or Adobe Fonts web projects. Check your version in Settings > Site Availability.
Can I change fonts for mobile only on Squarespace?
Yes, using CSS with viewport-based rules.
Target smaller screens with specific breakpoints in your Custom CSS. This lets you set different font sizes or even typefaces for mobile visitors.
How do I add Adobe Fonts to Squarespace?
Create a web project in your Adobe Creative Cloud account. Copy the embed code provided.
Paste it into Squarespace’s Code Injection header section. Your Adobe Fonts then appear in Site Styles.
Conclusion
You now know how to add fonts to Squarespace using three different approaches.
Direct upload through Site Styles works fastest for version 7.1 users. The @font-face method in Custom CSS gives you precise control over typography settings and text element targeting.
Adobe Fonts integration remains the go-to option for 7.0 sites with Creative Cloud access.
Whichever method you choose, keep font licensing in mind. Verify your OTF, TTF, or WOFF files have proper web usage rights.
Limit yourself to 2-3 typefaces for clean design consistency and faster page loads.
Test your font rendering across Chrome, Safari, and Firefox. Check mobile displays too.
Custom typography transforms a generic template into a branded website that visitors remember.
