This guide walks you through changing fonts on your Squarespace 5 site, including the font style, size, color, and spacing. Each template comes with default font styles that you can replace in the Style Editor.
Before you begin
- Some fonts may render differently across devices, such as Windows versus Mac.
- Unlike Squarespace 7, it isn't possible to add your own custom fonts in Squarespace 5.
- Using consistent fonts creates a unified look for your site, so these options are intentionally limited. To edit fonts beyond the available tweaks, you can add custom CSS.
- As a general design rule, we recommend you use no more than two fonts throughout your site. Reducing the number of fonts on your site can also help improve loading time.
How fonts work in Squarespace 5
Squarespace 5 provides web safe fonts and Google fonts.
- Web safe fonts - Standard typefaces universal to most computers and operating systems, such as Georgia, Arial, and Times New Roman. These appear in the left column of the fonts field element.
- Google fonts - Open source fonts hosted by Google. These appear in the right column of the fonts field element. Using these fonts can increase page loading times.
Depending on the font, you may see additional options such as Font Weight for bold and Font Style for italics.
Step 1 - Create a custom template
If you aren't already using a custom template, create one following these steps.
Step 2 - Enter style editing mode
- Click the Style editing icon.
- Click the Fonts, Colors & Sizes tab.
Step 3 - Find the font option
There are two ways to select an element for editing:
- Click an element on your site - Click on the page area you want to edit and the system will automatically select the nearest customizable element for editing.
- Select from the drop-down menu - Click the drop-down menu to reveal a list of all customizable elements.
Step 4 - Edit and save
Use the options below the drop-down to customize the font. When you've finished, save the changes for that element before selecting a new element to edit. Once you save, the changes for that element display on your site.
