How to use your own font in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
This tutorial will walk you through the three-step process of installing your own font on your Squarespace website.
The first step is to install the file.
Navigate to Website then Website Tools, and then Custom CSS. You should see a button that says custom files. Click on that button and drag and drop your font file there.
Pro Tip: I recommend using an OTF font file, which stands for Open Type Font. Rumor has it that most browsers respond best to that type of file.
The second step is to assign that font a name in your Squarespace website.
You have two lines of code to edit. The first one will import your font into your site. Change the text your-url-here with the URL from your file by deleting that text and clicking on the file name in your custom files window. Squarespace will place the file there.
The second line of code is naming the font. You can actually call it anything you want; this is the nickname you will use to label that font in your code.
@font-face {font-family: "Nickname "; src: url(font-url-here) }
And the third and final step is to assign that font to a particular text type in your Squarespace site.
Your whole code will look something like this example for paragraph text:
@font-face {font-family: "Nickname"; src: url(font-url-here) }
p {font-family: 'Nickname', web-safe-alternative;}
You can assign you new font to any text type in your site, from your form fields to a quote block, or standard text like a header.
There are a TON of different text types you can use, but here are a few examples for you to try:
Heading One Font
h1 {font-family: 'Nickname', web-safe-alternative;}
Heading Two Font
h2 {font-family: 'Nickname', web-safe-alternative;}
Heading Three Font
h3 {font-family: 'Nickname', web-safe-alternative;}
Normal Font - Paragraph 2 for Squarespace 7.1 sites
p {font-family: 'Nickname', web-safe-alternative;}
