Edit fonts in headlines, paragraphs, buttons, menu, forms and so on

Squarespace has a great collection of fonts on the platform ready to be used on your website without any additional work. They have a library of 600 Google fonts and 1,000 Adobe Fonts at your disposal. These fonts pair nicely with each other, are contemporary, and meant for the web. They have been uploaded and checked by the Squarespace team, and this means they are less likely to glitch, are easily readable on the website, and don’t harm your website loading speed.

However, there are cases when you need to add a custom font that is not pre-uploaded on Squarespace. For example:

This isn’t your first website. You are moving to Squarespace and you would like to keep your branding, including your brand fonts.
You are starting out with a brand-new website, but you already have visual branding and style that you have used in print or on social media. You want your website fonts to correspond to other elements of your design e.g. logo, pins, IG posts.
You are absolutely in love with that stunning font you have bought on the Creative Market and would have no other font.

We would like to remind you that any font you upload on Squarespace should have a free for commercial use license or you should buy a commercial use license.

On the other hand, the inbuilt Squarespace fonts need no additional licenses. You can use them for free on your Squarespace websites.

This tutorial will include some coding, but it is mostly copy-paste, so don’t you worry about that. We will walk you through the process.

Step 1: Custom font file format

You should have a file with your font downloaded on your device. Most likely the file name ends with .TTF or .OTF format. Great, if you have it, this is exactly what we are going to need.

Step 2: How to upload a custom font file to a Squarespace website

Now we are heading over to your Squarespace website. From your left-side panel go to Design>Custom CSS. Scroll down the left-side panel until you see the button Manage custom files at the very bottom.

Click Add images or fonts and upload your files. Save your progress.

Step 3: How to install a custom font with CSS code

Now to the code. Copy and paste this snippet into the CSS box above the Manage custom files button.

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

First, let’s change the font name 'font_name' to your font’s name. In my case, it is 'BonVivantSerif'. You can type any name here really, but I prefer to use the font’s real name because in a few months I might not be able to recall what this part of the code stands for.

Secondly, we want to paste the font’s URL between the brackets. Where do we get this URL? It appears in the CSS box when you click on your previously uploaded font in the custom files. Cut the URL you got and put it between the brackets in your code.

By the end of this step ours (and yours hopefully) code looks like this:

@font-face {
font-family: 'BonVivantSerif';  
src: url(https://static1.squarespace.com/static/611f8e0827a0a14df11e1043/t/611f9456a8cb2b3ca456ded6/1629459542801/BonVivantSerif.otf);
}

Good job, your font is successfully uploaded to your website! Click Save in the upper left corner of the panel.

Step 3: How to apply a custom font to a heading or paragraph

You have added the font to your website, but regrettably, it won’t appear in your font settings like the inbuilt Squarespace fonts. Do not look for it, it’s not there.

To apply the font on your website we will need a little bit of code.

The letter h stands for headings on your website, and the letter p stands for paragraphs (body text). Headings have numbers from 1 to 4, h1 being the largest.

So, you have h1, h2, h3, h4, p.

The basic code line is:

h1 {
font-family:  'font_name';
}

For example, if I want to apply the font I have uploaded earlier to my website to the h2 heading, the code will look like this:

h2 {
font-family:  'BonVivantSerif';
}

If you want to apply the font to all of the paragraph sizes at once use p.

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

If you want to differentiate paragraph sizes use p.sqsrte-large for p1, p for p2, p.sqsrte-small for p3.

p.sqsrte-large {
font-family:  ‘font_name’;
}

Bonus: Advanced formatting

If you want to customize the font parameters even further, your code may look like this. You can take the lines you need, not all of them.

h4 {
font-family: 'font-name';
font-size: 15pt;
color: #5c1a1a;
letter-spacing: 1px;
line-height: 140%;
}

Font-size is measured in pt (points), color is expressed in HEX format, letter-spacing is measured in pixels and is for adding or reducing space between letters (horizontally), line-height ads space between lines (vertically).

Here are some more tricks for you on how to apply your custom font in the very specific places on your website. As usual, change 'font_name' for your font’s name and you are good to go.

How to change the font of the heading of the newsletter form on Squarespace

To apply your custom font to the title of the newsletter block you need only a few lines of code:

.newsletter-form-header-title {
  font-family: 'font_name' !important;
}

How to change the font in your blog titles on Squarespace

This code will change blog post titles on your blog page.

.blog-title {
  font-family: 'font_name' !important;
}

This code will change blog post title you see when you are in the blog entry.

.entry-title {
  font-family: 'font_name' !important;
}

How to change the font of the buttons on Squarespace

To apply your custom font to the buttons on your website use this CSS code:

.sqs-block-button-element { 
  font-family: 'font-name' !important;
}

To change the font of the button in your website header use this code:

.header-actions-action .btn {
  font-family: 'font-name' !important;
}

How to change the font of the Squarespace website title and header menu

This works for changing the Squarespace website title font, the one that you see in the header.

.header-title-text {
  font-family: 'font-name' !important;
}

And this CSS code will change the font of the header menu on your website. This is the one that holds your main navigation pages.

.header-nav-item {
  font-family: 'font-name';
}

Creative Workshop Series for Squarespace

The workshop is jam-packed with design goodness. Inside, you’ll find the following topics:

What size should I design for? Responsive layouts and industry standards
Typography 101: How fonts can elevate your design & look professional
My approach to using colors in web design
Complete Figma tutorial
How to use layout grids to direct the attention of your website visitors
How to create a mood board and plan your website visuals
Squarespace Vanilla theme build-out: Complete walk-through, CSS snippets and Figma wireframe
Massive Squarespace design practicum: We go from a mood board to a finished design on Squarespace in a matter of an hour. Two designs included along with CSS plugins and Figma templates
Redesign 2 real websites with me in real time
How to grow as a designer and how to look for creative inspiration

Plus, there are some really helpful documents included: Complete Squarespace development checklist, copywriting and branding guides, sample client questionnaire and so much more!

Are you in? I’ll see you in Squarespace Mastery!