Change Fonts

The fonts and colors work by setting a "palette" of styles that are automatically applied throughout your entire website. To make any customizations or adapt this Squarespace design to match your branding, you only need to tweak a handful of options. If you already like the typography, feel free to leave it alone.

How to Change to a Different Squarespace Font

To change the fonts on your site, you will need to navigate to the Site Styles. You can access the Site Styles via the Styles link under the Website tab or by clicking the paintbrush icon in the top right corner of your editing screen.
To change any text group (headings, paragraphs, buttons, etc.), simply select that text group to adjust the settings. Then you will be able to change the following:
- Font Family – the collection of styles that make up a typeface
- Weight – the visual weight or thickness of the letters in the font (400 is considered medium/regular, 600 is bold)
- Style – normal or italic
- Line Height – the vertical space each line occupies
- Letter Spacing – the horizontal space between each letter in a paragraph
- Text Transform – uppercase, lowercase, or capitalize
- Size – the size for that text group (h1, h2, h3, etc.)
Click Save.

How to Add Custom Fonts

Though Squarespace has 600 Google fonts and 1,000 Adobe fonts available for free, you may have a specific font you would like to use that isn’t available. In this instance, you will need to use custom CSS to add your font. Don’t worry—just follow the simple instructions below to add a custom font and apply it to any text group (h1, h2, h3, etc.).

Download the Proper File Type

Once you've settled on a custom font, you'll need to make sure you have the proper file formats to use it as a web font. Your font files will likely come in .otf or .ttf file format. For maximum compatibility and performance, you'll also need the font in web format—.woff and .woff2. Depending on where you acquired your custom fonts, you may be able to download these formats directly from the vendor.

Don’t have the right web formats? You can use Font Squirrel's free generator to convert a .ttf or .otf format to web formats.

Add Your New Font to Your Site

Upload the font files. Click Manage Custom Files to open the file folder. Click Add Images or Fonts and upload your font file.
Now that you have your chosen font in the appropriate formats, you can add it to your site by going to Pages, scrolling down and clicking Website Tools, and then clicking Custom CSS.
Once in Custom CSS, cut and paste the following code snippet. You’ll want to replace “font name” with the name of your font (keep the single quote marks around it). Then, click to place your cursor in between the quotation marks after URL in the code snippet and select your font file in the custom files window. The URL will automatically fill where your cursor is located (keep the single quote marks around it). Your custom web font is now uploaded to Squarespace!

@font-face {
  font-family: 'font name'; src: url(''); 
}

Add CSS to Assign Your Font to a Text Group

To assign this new typeface, you need to use some additional CSS. Add the following code snippet to apply your font family to a text group. The example here shows the font family being assigned to Heading 1, Heading 2, Heading 3, Heading 4, and Paragraph. You’ll want to replace “font name” with the name of your font as you’ve identified it in the CSS above (keep the quote marks around it).
Click Save to save the changes you have made to the custom CSS.

h1 { 
  font-family: 'font name'; 
}

h2 { 
  font-family: 'font name'; 
}

h3 { 
  font-family: 'font name'; 
}

h4 { 
  font-family: 'font name'; 
}

p { 
  font-family: 'font name'; 
}

Change the Font Styling

Once you’ve added your custom font, you can change the weight, style, line height, letter spacing, text transform, and size in the Site Styles, as outlined in the first section of this page.
Click Save to save the changes you have made to the font styling.