Custom Fonts on Squarespace 7.1

Despite Squarespace having a huge and diverse selection of fonts, there are times that call for a typeface that is not readily available. Perhaps you are trying to keep a consistent brand identity or you just want something exciting and unique to help your website stand out from the crowd, there is a place on your Squarespace website for a custom typeface. Luckily the process is fairly straightforward and I’ll walk you through it here. In summary, you need to have your font file downloaded to your computer, upload it to Squarespace, reference it to give it a name, and lastly assign it to heading, paragraph, or a custom class text.

Upload & Reference

• Locate your downloaded font file on your computer. It should have the file ending of: .ttf .oft or .woff

• Now load your website and in the dashboard navigate to Design and the Custom CSS.

• At the bottom of the left panel click on MANAGE CUSTOM FILES, and upload your font file.

• Paste this CSS into the Custom CSS main area, removing and replacing the bold text with your custom font (click on your uploaded font to add the URL to the Custom CSS)

// My first font reference

@font-face {
font-family: ‘font name here’;
src: url(‘font-url-here’);
}

Assign Your Font

You can assign your custom font to any part of your website, the basics are to assign it to some or all of your headings or paragraphs

• Copy and paste this Custom CSS below the previous

• You need only to keep the lines that are relevant to the font you are trying to change

• Replace the bold text with your custom font name

• Additionally to changing the font family

Additional

Not only can you add the custom font, but you can also add individual styling to each heading and paragraph. Do as much of the styling natively in the styles -> fonts menu, but additionally, you can add as much CSS styling as you can imagine!

// Assigning my first font - all headings, paragraphs and buttons

:root {
--body-font-font-family: 'font name here';
--heading-font-font-family: 'font name here';
--meta-font-font-family: 'font name here';
--primary-button-font-font-family: 'font name here';
--secondary-button-font-font-family: 'font name here';
--tertiary-button-font-font-family: 'font name here';
}

// Assigning my first font - each heading

// Headings

// Heading 1
h1 {
font-family: 'font name here';
}

// Heading 2
h2 {
font-family: 'font name here';
}

// Heading 3
h3 {
font-family: 'font name here';
}

// Heading 4
h4 {
font-family: 'font name here';
}

// Paragraphs

// Paragraph 1
.sqsrte-large {
font-family: 'font name here';
}

// Paragraph 2
p {
font-family: 'font name here';
}

// Paragraph 3
.sqsrte-small {
font-family: 'font name here';
}