How to use a custom font in Squarespace

content block

Jan 7

While Squarespace offers an impressive collection of built-in fonts, sometimes you need that perfect custom font to match your brand. In this guide, I'll walk you through two powerful methods to customize your website's typography, including a little-known trick that will save you tons of time.

In this video below, I'll show you two powerful methods to add and customize fonts in Squarespace 7.1: my secret font menu trick that saves hours of work, plus how to upload custom files from Google Fonts or your own collection.

You’ll also find a detailed overview below along with custom codes you can copy & paste for your own Squarespace customizations.

The Secret Font Menu Trick You Need to Know

In my years of working with Squarespace, I've discovered a fantastic shortcut for adding custom fonts that most users don't know about. Instead of diving straight into custom code, you can actually leverage Squarespace's built-in font menu to do the heavy lifting for you.

Here's how it works:

Open your Site Styles menu
Navigate to the Fonts section
Click "Assign Styles" at the bottom
Choose an unused element (like a menu block you're not using)
Select "Custom" instead of the default options
Pick any font from Squarespace's extensive library

The best part? Once you've added the font this way, you can use it to change any text type on your site using custom CSS - you don’t have to install the file yourself! Here is the code example I used in the tutorial:

h1 {font-family:sail}

Working with Google Fonts

Want to use a specific Google Font? The process is straightforward but requires a few specific steps:

Visit fonts.google.com and browse their extensive collection
Select your desired font and click "Get Font"
Download the font file
Upload it to Squarespace through the Custom CSS panel
Add the necessary @font-face code, replacing the placeholder text with your custom file URL
Apply your new font using CSS selectors

@font-face {
font-family: name;
src: url(font-file-url-here)
}
h1{
font-family: name
}

How to target text types

Everything on a page inside your Squarespace site has a unique selector class and a unique ID. A Block ID is the container content is in, so you can use that to modify one thing on your Squarespace site. A selector class is a nickname for a type of thing, so using a selector class in your code can help you customize all versions of that thing, like the list item title I talked about in my video. (Check out my free basic CSS training here if you want to learn more.)

Basic text blocks have standard selectors:

Heading 1 = h1
Heading 2 = h2
Heading 3 = h3
Heading 4 = h4
Paragraph 1 = .sqsrte-large
Paragraph 2 = p
Paragraph 3 = .sqsrte-small
List item title = .list-item-content__title

For the full list of 800+ Squarespace selector classes, check out my code collection at insidethesquare.co/css

To easily access the block ID data, check out this amazing Chrome extension from fellow Squarespacer Will Myers: will-myers.com/squarespace-id-finder

When implementing custom fonts, keep these pro tips in mind:

Use Block IDs to target specific content areas
Combine selectors with commas to apply fonts to multiple elements
Remember to add !important when necessary to override default styles
Test your fonts across different devices and screen sizes; not all font files will work on every browser type, especially Safari 😬

chart