Fonts are fundamental design elements that affect your website's readability and style. Here's how to effectively customize fonts in Squarespace:

Font Basics

The platform offers over 600 Google Fonts and 1,000 Adobe Fonts. Recently used and popular fonts appear first in menus for convenience. Font changes typically apply website-wide by category (headings, paragraphs, etc.).

Text Scaling

Version 7.1: Scales based on font base size, allowing independent text block scaling Version 7.0: Scales based on browser size, with template-specific scaling options

Changing Fonts

To modify site-wide fonts (Version 7.1):

• Open Website Styles > Fonts
• Click Switch to view available font packages
• Select Sans-Serif, Serif, or Mixed styles
• Choose a font package
• Set base font size
• Click Save

For specific font changes:

• Select "Assign Styles" in Fonts menu
• Choose text group (Title, Button, etc.)
• Select font style from dropdown
• Customize additional options if needed

Font Formatting Options

• Weight: Controls boldness
• Line Height: Adjusts line spacing
• Letter Spacing: Modifies character spacing
• Style: Sets text format (normal, bold, italic)
• Text Transformation: Controls capitalization
• Size: Adjusts text dimensions

Custom Adobe Fonts (Version 7.0 only)

To add custom Adobe Fonts:

1. Create web project in Adobe Fonts
2. Copy project ID
3. Add ID to Squarespace Developer Tools
4. Use fonts in Website Styles

Troubleshooting Tips

• Remove formatting when copying text using Ctrl/⌘ + Shift + V
• Ensure font weights above 100 for mobile readability
• Check domain forwarding if fonts display differently when logged in
• Use appropriate size values (rem for 7.1, em/px for 7.0)

For system-only fonts, choose:

• Helvetica Neue (Sans Serif)
• Georgia (Serif)
• Verdana (Mixed)

Related Articles

Previous Articles