How to Install Custom Fonts on Squarespace (Easy Coding)
Table of Contents
Give your Squarespace website a unique personality with custom fonts! They can elevate your design, reinforce your brand, and make your site stand out. In this post, I’ll show you the simple code snippet to install custom fonts to Squarespace.
Step 1: Navigate to Custom CSS: On Squarespace, go to Website Tools > Custom CSS
Step 2: Upload your font: Click on "Custom Files" menu then "Add images and fonts" button. Locate your font files (.ttf, .otf, etc.) and upload them.
Step 3: Retrieve the font file URL: Open the Custom Files menu again and click on the newly uploaded font file, its unique URL will appear on the Custom CSS panel.
Step 4: Add the following code:
/*------------------------ CUSTOM FONTS----------------------------*/
@font-face {
font-family: 'JosefinSans'; /* Replace with your font name */
src: url(https://static1.squarespace.com/static/636298493ab8630f6e2df5e0/t/6364d0e897f68c64fd0314ce/1667551464790/JosefinSans-Regular.ttf); /* Replace with URLs from Step 3 */
}
@font-face {
font-family: 'PolarityRegular'; /* Replace with your font name */
src: url(https://static1.squarespace.com/static/636298493ab8630f6e2df5e0/t/6364d0e897f68c64fd0314ce/1667551464790/PolarityRegular.ttf); /* Replace with URLs from Step 3 */
}
h1,h2,h3, h4 {
font-family: 'JosefinSans'; /* Replace with your Headings font name */
}
p{
font-family: 'PolarityRegular'; /* Replace with your Paragraph font name */
}
.sqs-block-button-element{
font-family: 'PolarityRegular'!important; /* Replace with your Button font name */
}
/*------------------------ END CUSTOM FONTS----------------------------*/
Pro-Tip: Adjust Font Sizes on Site Styles
Though you can use codes to set the font sizes, I recommend doing this in Site Styles. This reduces the amount of code and makes it easier to create a responsive design.
You should keep the number of fonts to a maximum of two or three. Too many fonts cause slow loading and may also reduce the professionalism/attractiveness of your site.
For good speed performance, I’d recommend using two fonts:
A custom font for the headings
A web-safe font for paragraphs
Web-safe fonts are typefaces that come as default fonts on the majority of computers and devices. They can significantly speed up your website's load times as the browser does not need to download additional font files to render the text.
To find a web-safe font that fits your brand, check out Best Font Pairings On Squarespace to Optimize Loading Speed.
Speaking of loading speed, there’s one more thing:
Squarespace loads all fonts defined on Site Styles, whether that font is used on a page or not. This can slow down your website speed unnecessarily.
To avoid this issue, make sure you review all the fonts currently being used in Site Styles and remove any unused fonts.
If your website has gone through multiple iterations, there might be fonts from the previous design version still lurking. Go to Assign Styles and check anywhere that says “Custom”. Switch these to Heading or Paragraph font.
If you use installed custom fonts and don’t need any font on Site Styles, change all the fonts in Headings, Paragraphs, Buttons, and Miscellaneous to one websafe font (eg. Arial).
Conclusion: Add Custom Fonts With Ease
With a little bit of code, you can elevate your Squarespace website with beautiful custom typography. For the best loading speed, limit the number of typefaces to 2 fonts, consider using a web-safe font, and double-check Site Styles to avoid Squarespace loading unnecessary fonts.