Change Website Fonts in Squarespace: A Complete Guide

Change Website Fonts in Squarespace: A Complete Guide

By Michael Chen

December 6, 2024 at 05:05 AM

Here's the concise rewrite, focused on valuable information about changing fonts in Squarespace:

Squarespace allows you to customize your site's text style, size, color, and spacing through the Site Styles panel. The platform offers over 600 Google fonts and 1,000 Adobe fonts for your use.

Font Basics

  • Font changes typically apply site-wide within categories (Headings, Paragraphs, etc.)
  • Text scaling automatically adjusts to fit different screen sizes
  • Some fonts may display differently across devices and browsers
  • Recently used and popular fonts appear first in selection menus

Changing Fonts in Version 7.1

  1. Open Site Styles and click the Fonts option
  2. Select "Switch" to view available font packs
  3. Choose between Sans-serif, Serif, or Mixed styles
  4. Set the Base Size (all other text scales relative to this)
  5. Click Save to apply changes

Changing Fonts in Version 7.0

  1. Open Site Styles
  2. Select the specific font tweak you want to modify
  3. Choose from available font options in the dropdown menu
  4. Adjust additional settings like size, spacing, and weight
  5. Click Save to apply changes

Squarespace website editor interface

Squarespace website editor interface

Styling Options Include:

  • Weight (thickness)
  • Line height (spacing between lines)
  • Letter spacing
  • Text transform (capitalization)
  • Size
  • Font family
  • Text decoration
  • Text alignment

Adding Custom Adobe Fonts (Version 7.0 only)

  1. Create a web project in Adobe Fonts
  2. Copy the Project ID
  3. Add ID to Squarespace's Developer Tools under External API keys

HTML font embed code

HTML font embed code

Troubleshooting Tips

  • Use Ctrl/Cmd + Shift + V to paste text without formatting
  • Keep font weights above 100 for better mobile readability
  • Check domain settings if fonts look different when logged in
  • Remove any conflicting JavaScript if custom Adobe fonts aren't displaying

System Fonts Option For faster loading, choose built-in font packs:

  • Sans-serif: Helvetica Neue
  • Serif: Georgia
  • Mixed: Verdana

This selection prevents loading external Google or Adobe fonts.

Related Articles

Previous Articles