This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

Typography is one of the most critical aspects of web design, influencing user experience, brand perception, and even SEO.

If your fonts are too small, difficult to read, or inconsistent, visitors may leave your site before engaging with your content.

As a Squarespace website strategist and designer,

I’ve helped numerous businesses create high-converting websites with a strong focus on readability, design consistency, and user experience.

In this step-by-step guide,

I’ll show you:

How to change fonts globally across your entire Squarespace website.
How to customize fonts for specific elements, such as page headings, paragraphs, and sections.
How to adjust font sizes for various key elements, including:

Headers & Headings

Announcement Bar

Menu Block

Newsletter Block

Quote Block

Form Block

Blog & Blog Posts

Portfolio

Product Listings & Detail Pages

Events

List Sections

Videos

Courses

I will walk you through both built-in Squarespace settings and custom CSS methods, ensuring you have full control over your typography.

Quick Fix

How to Change Font Size on Squarespace:

Log into your Squarespace account and navigate to the desired page.
Click on the text you want to modify and select the text you want to change.
In the text editor, click on the font size options (e.g., Heading 1, Paragraph) to adjust the size.
For advanced customization, use custom CSS by going to Settings > Advanced > Custom CSS and adding code to target specific text.
Save your changes and test the font size in the Squarespace preview.

How to Change Fonts Globally in Squarespace

If you want to change the font across your entire website, follow these steps:

Log into your Squarespace website.
Go to Design > Site Styles.
Click on "Fonts".
Select a Font Pack (Pre-made font combinations for headings, paragraphs, and buttons).
Click “Assign Styles” to choose fonts for different text types (Headings, Body, etc.).
Customize Font Size, Line Height, and Spacing.
Save your changes.

🚀 Pro Tip: Stick to a maximum of two complementary fonts for a clean and professional look.

How to Change Fonts for Specific Page Headings or Paragraphs

For more control, apply custom CSS. Here’s an example:

Go to Pages > Website Tools > Custom CSS.
Add the following CSS code to target the specific text you want to change:


#collection-ID h1 {
  font-family: 'Playfair Display', serif;
  font-size:5rem;
}

#collection-ID p {
  font-family: 'Roboto', sans-serif; 
  font-size:5rem;
}

Replace #collection-ID with the actual ID of your page or section, and 16px with your desired font size.

NOTE: Use This Tool To Find Your Collection ID:

Squarespace ID Finder