Squarespace makes changing fonts on your website easy, straightforward, and quick using their built-in font settings and curated font packs in Site Styles. Typography—the way fonts are styled and used across your site—is essential for making your content easy to read and navigate.

Before we dive into how to change fonts on Squarespace, let’s quickly define what we mean by “fonts” and “typography.” Fonts refer to the specific styles of text you use on your site. Typography, on the other hand, is how those fonts are applied to create a cohesive look and feel. The way fonts are used across elements like paragraphs, headings, buttons, and links is all part of your site’s typography. It influences not just appearance, but hierarchy and user experience, too.

Fortunately, the font settings in your Squarespace Site Styles give you a clear structure for maintaining consistency. You just need to ensure that each font style is used intentionally and consistently across your site, so visitors know what to expect and can engage with your content with ease.

Getting Started with Squarespace Font & Style Adjustments

In Squarespace 7.1, font settings live in Site Styles. To access this, click the paintbrush icon in the top-right corner of any editing window. Once inside Site Styles, navigate to Fonts, where you’ll see the following setting categories:

All Font Packs – If you don’t already have brand fonts or aren’t sure where to start, Squarespace’s Font Packs are a great starting point. These are hand-selected combinations from their design team to give your site a polished and cohesive feel right away. You can choose from Sans-Serif, Serif, or Mixed font packs (more on those in the next section).
Base Size – The Base Size sets the foundational font size for your site, which all other text sizes scale from. Squarespace’s default is 16px. When adjusting font sizes later—like headings or buttons—you’ll often see the unit rem, short for “root em.” This means the size is relative to your Base Size. For example, if your Base Size is 16px, a font set to 1.5rem would display at 24px. Adjusting the Base Size helps control the overall scale of your site’s typography in a consistent way.
Headings – Squarespace offers a range of settings for headings. Any changes here apply consistently across all headings, except for size. You’ll first select a base heading style, and then set sizes for Heading 1 through Heading 4. When adding text blocks, you can then choose from these pre-set heading styles to keep things consistent—no manual formatting required. Settings available include:
- Font Family – the collection of styles that make up a typeface
- Weight – the visual weight or thickness of the letters (400 is considered regular, 600 is bold)
- Style – normal or italic
- Line Height – the vertical space each line occupies
- Letter Spacing – the horizontal space between letters in a line
- Text Transform – uppercase, lowercase, or capitalize
- Size – the size for each heading level (h1, h2, h3, h4)
Paragraphs – These settings mirror those for Headings, but with three size options instead of four.
Buttons – Font settings for buttons are edited within the Fonts panel, while button colors and spacing are found in the main Site Styles menu. You can customize font settings for your Primary, Secondary, and Tertiary button styles individually.
Miscellaneous – Fonts used in smaller or system areas of your site (like tags and prices) can be adjusted here.
Assign Styles – This section allows you to apply the heading and paragraph styles you’ve just configured to specific parts of your site: Headers, Blog Posts, Forms, Announcement Bars, and more. You can also create custom font styles for individual areas. For example, if you want the title of your Newsletter Block to look different than other headings, scroll to Newsletter Block, select Title, then choose Custom from the Style dropdown and adjust as needed. You can do the same for font size as well.

Different Types of Fonts

Serif – Serif fonts have small decorative lines or “feet” at the ends of each letter. They give off a more classic, traditional feel and are often used for more formal or editorial-style websites.
Sans-Serif – Sans-serif fonts don’t have those little feet, which gives them a cleaner and more modern appearance. They’re commonly used for minimalist or contemporary designs.
Script – Script fonts are styled to mimic cursive handwriting. They can add personality or elegance but should be used sparingly to maintain readability.

Step-by-Step Guide to Changing Fonts in Squarespace 7.1

Since Squarespace launched version 7.1 back in January 2020—and stopped allowing new sites to be created in version 7.0 in mid-2021—we’re assuming most of you reading this are working on a 7.1 site. If you’re still using version 7.0, you can visit Squarespace’s help center and navigate to version 7.0 when prompted for version-specific instructions.

1. Choose & Apply a Font Pack

As mentioned above, Squarespace offers over 60 pre-selected font packs to help give your site a polished, cohesive look. To choose and apply a font pack:

Go to Site Styles > Fonts
Click on All Font Packs
Choose from Sans-serif, Serif, or Mixed
Select a font pack

As soon as you make a selection, the font styles will be automatically applied to your headings, paragraphs, buttons, miscellaneous areas, and more within the Assign Styles section. From there, you can continue customizing styles for each section as needed.

2. Assign & Customize Font Styles

If you already have brand fonts or specific fonts in mind, skip the font pack and instead:

Go to Site Styles > Fonts
Navigate through each section: Headings, Paragraphs, Buttons, Miscellaneous, and Assign Styles
Choose your font families, weights, styles, and spacing for each

This approach gives you full control over your site’s typography, helping you stay consistent with your brand identity.

3. Adjust Font Sizes

Once your font settings have been selected, you can then adjust the size for each heading and paragraph style—Heading 1 through Heading 4, and Paragraph 1 through Paragraph 3—to create the right visual hierarchy and improve readability across your site. Adjusting font sizes using rem units ensures that all text scales consistently based on your site's Base Size.

Available Free Fonts in Squarespace

Squarespace offers an extensive selection of free fonts, including over 600 Google Fonts and 1,000 Adobe Fonts. These options are built right into the platform, ensuring that your fonts are not only beautiful but optimized for web performance. While the collection doesn't include every font available from Google or Adobe, you can easily browse through the library or use the search field to find specific fonts that match your vision.

To access these fonts, go to Site Styles > Fonts, and you’ll be able to choose from a wide variety of sans-serif, serif, and decorative fonts for your website. Squarespace’s curated selection ensures that each font is web-safe and loads quickly across all devices, so your site will look professional and function seamlessly.

How to Change Font Colors in Squarespace 7.1

Colors in Squarespace are controlled by a site-wide palette, which is applied to predesigned color themes throughout your site. Your palette includes five core colors, but each theme allows for additional customizations—meaning you can use as many colors as you’d like within different sections and blocks. Once customized, these color choices will automatically apply wherever that theme is used across your site.

How to Change Site-Wide Colors

If you don’t already know how to do so, below are the steps to change the colors throughout your site:

Go to Site Styles > Colors
Click Edit Palette
Input your five base colors by clicking the color square at the top of the palette window. You can either use the color picker or enter a specific Hex, RGB, or HSL code.

How to Change Font Colors on Specific Blocks & Sections

Squarespace’s color themes automatically apply different colors to various block types based on your palette. To customize how these colors show up on specific blocks or sections:

Go to Site Styles > Colors
Choose the color theme you want to edit
Scroll down to the block or section type you’d like to change
Click the color circle next to that section and choose a new color from your palette—or click Custom to choose any other color

Changing the Color of Individual Words or Text Segments Within a Text Block

For times when you want to manually highlight a single word or phrase with a unique color:

Click into the text block you want to edit
Highlight the word(s) you would like to change
Choose a color from your palette or a custom color

Advanced Font & Style Customization Techniques

Now that you know how to adjust fonts and colors on your Squarespace site, let’s dive into some advanced customization techniques that will help you refine your website’s typography even further. These techniques allow you to fine-tune specific elements and bring in more personalized design touches.

How to Format Text in Specific Sections

If you want to make text stand out in certain sections of your site—such as on call-to-action buttons, quotes, or headings—you can apply custom formatting. To do so:

Go to Site Styles > Fonts
Select the section where you’d like to apply specific text formatting
Adjust the font style, size, weight, and color based on your design preferences
Use Assign Styles to apply these customizations across multiple blocks or sections

This allows you to maintain visual consistency while giving certain areas more prominence, such as creating contrast with your main body text or emphasizing key information.

Customizing Fonts for Squarespace Buttons

Buttons are an essential part of your site’s user experience, and customizing their font can help them stand out even more. To change button fonts:

Go to Site Styles > Fonts
Scroll down to the Buttons section
Choose a different font, size, weight, or color for your primary, secondary, or tertiary button styles
Ensure that your button fonts align with your site’s overall typography for consistency

This simple adjustment can make a big impact on your site’s usability and visual appeal, giving your calls to action more attention.

Using Custom Fonts in Squarespace

As we mentioned above, Squarespace gives you access to over 600 Google Fonts and 1,000 Adobe Fonts, but if you have a specific font you’d like to use that isn’t included, you can still add it to your site using custom CSS.

Rather than walk through every technical step here, we’ve created a dedicated blog post that walks you through everything you need—from prepping your font files to applying them across your site and fine-tuning the styling.

👉 Click here to learn how to add custom fonts to Squarespace.

If you're using one of our templates, a step-by-step version of this guide is included in your Template Guide—no guesswork required.

What is Text Scaling & How to Use it?

Text scaling refers to how your fonts adjust for different screen sizes, making your site more responsive and improving the user experience on mobile devices. Here’s how to use text scaling effectively:

Navigate to Site Styles > Fonts
Adjust the Base Size for your fonts to control the overall scale of your site’s typography
Ensure that heading sizes, paragraph sizes, and button text all scale proportionally by using rem units (relative to the base font size)

Text scaling ensures that your typography remains legible and visually balanced no matter what device your visitors are using.

Best Practices for Text Scaling in Different Font Sizes

When applying text scaling, it’s important to maintain readability and consistency across different screen sizes. Here are a few best practices to keep in mind:

Use relative units like rem or em for font sizes so they scale proportionally to the base font size
Avoid using pixel-based sizes for body text, as this can lead to inconsistency across devices
Ensure adequate contrast between text and background colors, especially on smaller screens, to maintain legibility
Test your site’s typography on mobile devices to ensure that text is readable and the layout looks balanced

By following these practices, your typography will adjust seamlessly across devices, ensuring an optimal user experience for all visitors.

Conclusion

In conclusion, Squarespace offers a wide range of font customization options, from selecting font packs to adjusting individual text styles and colors. With the flexibility to fine-tune your typography, you can create a site that truly reflects your brand’s identity. Whether you’re looking to change font sizes, modify color schemes, or experiment with custom fonts, the process is simple and effective—especially when you follow the steps outlined here.

If you’re ready to take your website to the next level, consider purchasing one of our Squarespace templates for an easy, professional start, or hire us at Station Seven to create a semi-custom or fully custom design tailored specifically to your business needs. Your website journey starts here!

FAQs

How do I format text in only one section in Squarespace?

To format text in only one section, follow these steps:

Navigate to the section you want to modify.
Use Site Styles > Fonts to adjust the font, size, and color for that specific section.
If you need even more control, you can also use the Text Block Settings within the editor to make text bold, italic, or underlined, or apply different sizes and weights for that specific block.

This ensures that only the selected text in that section is affected, giving you more design flexibility.

How do I change the font on my custom Squarespace button?

Changing the font on your custom Squarespace button is easy. Here’s how:

Go to Site Styles > Fonts.
Scroll down to the Buttons section.
Choose the font, size, weight, and color for the button text.
You can customize buttons for different actions, such as primary and secondary buttons, by selecting the appropriate style.

This helps ensure your buttons are on-brand and match the typography of your website.

Can you use custom fonts on Squarespace?

Yes, you can use custom fonts on Squarespace. To do this, follow these steps:

Go to Site Styles > Fonts.
Scroll down to the Font Family dropdown.
Click Add Custom Font to upload the font files in .woff, .woff2, .ttf, or .otf format.
Once uploaded, you can apply the custom font to headings, paragraphs, or any other text element on your site.

Custom fonts give your website a unique look and feel that aligns with your brand.

How do I change the font color on a particular block in Squarespace?

To change the font color on a specific block:

Go to Site Styles > Colors.
Find the color theme you want to customize.
Scroll to the section or block (like a text block or heading).
Click the color circle next to the description and select a color from your palette or create a custom color.

This allows you to apply different colors to different blocks while maintaining consistency with your overall site design.

Can I change the color of one word in Squarespace?

Yes, you can change the color of just one word in a text block. To do this:

Click into the Text Block where the word is located.
Highlight the word or phrase you want to change.
Use the Text Formatting options to select a color from your site palette or enter a custom color.

This is great for emphasizing certain words or phrases without changing the entire text block's color.

How do I change the font size on my Squarespace site?

To change font sizes on your site:

Navigate to Site Styles > Fonts.
Under each section (headings, paragraphs, etc.), you can adjust the size using the slider or enter a specific size manually.
You can also adjust font sizes for mobile and tablet views to ensure a responsive design.

This is essential for creating the right visual hierarchy and ensuring readability across devices.

Can I use Google Fonts on Squarespace?

Yes, Squarespace supports Google Fonts, which are automatically available in the Site Styles > Fonts section. You can easily choose from the wide range of fonts in Google’s library and apply them to different text elements on your site.

This allows you to incorporate a vast selection of fonts and personalize your site even further.

How to Change Fonts on Squarespace: A Step-by-Step Guide