How to Change Font on Squarespace in 2024 (+5 Font Styles)

How to change your font in Squarespace main image

The font you choose for your website can say a lot about your brand’s style and personality. For example, are you fun and quirky, or professional and experienced?

Squarespace has many different fonts to choose from, and the great thing is that you can use different fonts for your headings and paragraphs to create your own unique style.

Here’s how to change the font on Squarespace, as well as five exciting font styles you can use with Spark Plugin.

How to change font on Squarespace in two easy steps

Step 1: Access the font menu

Go to any page on your website and click Edit. Then go to the top right-hand corner of the page and click the paintbrush button to go to the Site Styles menu.

Site styles menu

Then, click on Fonts.

Fonts section in site styles menu

Step 2: Choose your font

You have two options when it comes to changing your font on Squarespace.

You can use a font pack, which selects headings and paragraphs that complement each other well. This is ideal if you want to change your font but you need a little extra inspiration!

Just scroll through the options and choose the one you want. Stick with serif or sans-serif, or a combination of the two that will make your content pop!

Squarespace font packs

You can also change your fonts manually. You can individually amend your headings, paragraphs, button text, and any miscellaneous text on your site, like product prices, menu block navigation, and tags.

Let’s say you want to change your headings. Click Headings to get started.

Headings menu

Click on Family to change the font style.

Family setting in headings menu

Squarespace will show all the fonts you currently use on your site under Fonts in Style Guide. Click Browse all Fonts to view the whole collection.

List of fonts in Squarespace

Here you can access all the Squarespace fonts, either by scrolling or searching – there are over 1,600 to choose from! If you see one you like, click on it, and your content will update in real-time.

(Not sure which font to choose? Here are some of our favorites.)

When you’ve found a font you want to use, click the <Headings arrow in the top-right of the site styles menu to go back to the main headings menu.

If your font has additional styles, you can access these by clicking Style. Depending on the font, you can choose a bold or italicized version.

You can also make extra changes like the thickness (weight), line height, letter spacing, and font size.

If you make a mistake or you don’t like the results, go back to the main fonts menu and click Reset Font Pack at the bottom. Follow the prompts and this will reset your font to the default settings.

When you’re done, leave the site styles menu and enjoy your refreshed font style!

Some things to bear in mind when choosing a font

  • Having lots of different fonts can affect your site speed, which can frustrate web visitors and affect your site’s search engine rankings. Lots of fonts can also look messy! It’s best to stick to two different font styles maximum

  • Your changes will apply site-wide. For example, you’re unable to have different heading 1’s on different pages

  • If a font gets discontinued, Squarespace will replace it with the closest match

  • Some fonts may render differently across devices. A font might look different on an iPhone than on an Android. Always test your font combinations before you commit to them

  • If you want to use a font that Squarespace doesn’t offer, you can upload your own custom font using CSS code

Bonus! Five fantastic text styles to transform your site

We’ve looked at how to change your font from the Squarespace default, but what if you want something extra special?

Spark Plugin offers a range of exciting, vibrant text styles that will get visitors’ attention and drive clicks and conversions to your site. Best of all, they’re code-free – no messing around with custom code!

Here are five text styles you’re sure to love:

1. Animated gradient

Animated gradient text

This subtle animation draws the eye and encourages people to read all of your copy! Why not use your company colors to reinforce your brand’s style and boost awareness?

2. Outline

Clean, fresh, and modern, this customization works across a wide range of different websites. It looks particularly show-stopping in front of a colorful background image!

3. Underlined

Underlined text

Want something simple but understated? This bold and chunky underline is a great way to get your point across.

4. Highlighted

Highlighted text

Are there specific words you want to iterate in your copy? This customization makes it easy to show your website visitors what they should be focusing on.

Choose from a vivid color or a more subtle tone; the choice is yours.

5. Animated stripes

Animated stripes text

This one makes me think of candy canes and Christmas! Draw your visitor’s attention to your most important content with this stunning, stripy, scrolling animated text.

(You can change the color if red and white aren’t your thing!)

Plus, you get over one hundred more awesome customizations to add to your site, all for one monthly price. Spark Plugin is the perfect way to make your site stand out from the crowd.


There you have it, how to change your font in Squarespace! Which font pairings do you use on your website?

Kate Ingham-Smith

Spark Plugin’s resident copywriter, Kate has over 15 years of digital marketing experience, specializing in web design, UX, and UI.

https://sparkplugin.com
Previous
Previous

How to Change the Color of an Image in Canva (1-Min Guide)

Next
Next

How to Password-Protect a Single Page in Squarespace (2024)