Change your Fonts in Squarespace

How to Add Custom CSS to Your Squarespace Website for Easy Branding Upgrades and Ultimate Consistency

Introduction

Don't worry if you're not tech-savvy! Customizing your Squarespace website with CSS is easier than you think. This guide will show you how to add custom CSS for quick and easy branding upgrades, even if Squarespace doesn't have your specific font.

What You'll Need:

• Access to your Squarespace account with at least a Business Plan that allow for custom CSS
• The CSS code below
• Your Commercial Use font for your branding upgrade

Step 1: Log In to Your Squarespace Account

1. Log into your Squarespace Account and get to your Custom CSS Panel

Step 2: Upload Your Font

1. Click on Custom Files and upload your font, make note of the format of the font, and the Font Name. Most common font formats are: 'woff', 'woff2', 'otf', or 'ttf'
2. Once uploaded, you'll be able to click on the font in your "Custom Files" which will be like a direct link or url to the file. (you'll need to remember this later)

Step 3: Add Your Custom CSS Code

1. You'll see a text box where you can enter your CSS code.
2. Copy and paste your CSS code into this box.

"@font-face" lets the website know we're adding a font, were to find it, and what we're going to call it in the future:

@font-face {
  font-family: 'FontName';
  src: url('click-on-your-font-for-url') format('format'),
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'FontName', sans-serif !important;
}

Then if your font branding has any other consistend line-height, or all caps, you can also add those paramaters:

h1, h2, h3, h4, h5, h6 {
  font-family: 'FontName', sans-serif !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
}

Using "!important" will override this font for any heading on your Squaresapce site.Be sure you are using a font that is easy to read.

ps. Learn more about Font Formats and look at all sorts of commercial use fonts here: https://fonts.google.com/knowledge/glossary/font_format