How to Upload a Google Font to Your Squarespace Website (Step-by-Step Guide)
Google Fonts offers a great selection of free and easy to use typefaces that are popular with nonprofits and small businesses due to their flexible licensing terms. However, just because a font is available now doesn’t mean it will be forever. Additionally, many website owners prefer to self-host their fonts rather than pulling them directly from Google’s servers.
The easy fix? Download the font of your choice and follow this guide as I walk you through how easy it is to upload a Google Font to Squarespace.
Step 1: Convert your font file
If your font file ends in .ttf or .otf, it’s recommended that you convert it to a WOFF2 (Web Open Font Format 2) as this file format:
Is compressed and smaller in size, which allows it to load faster
Is compatible with the major modern browsers, which ensures it will appear
There are a number of free convertors online, such as this one: https://cloudconvert.com/ttf-to-woff2
Please note that while we provide this link to a file format converter for your convenience, Westerly Creative Studio LLC is not liable for any issues, damages, or consequences that may arise from its use. We recommend reviewing the tool's terms of service and ensuring it meets your specific needs before proceeding.
Step 2: Upload it to Squarespace
Go to your website and click on Website > Pages > Website Tools > Custom CSS
There you’ll see “Custom Files.” Click on the down arrow and upload your WOFF2 version of your font.
⚠️ Careful: When uploading your file, if you click on it, it will paste a url into your CSS box. If this happens, make sure to delete it.
Step 3: Give the font a name
I know, the file has a name! But we have to tell your website what to do with that file.
Copy paste this CSS into the CSS box and replace the purple text with the relevant information. Make sure to keep all the other text/spacing the same. If you receive a syntax error message, delete it and start over.
Font-name: What you want to name the font.
URL: The url from your custom file upload. When you click into the parenthesis, a box with your uploads may appear and all you have to do is click on the name of your font. If it doesn’t, click into the parenthesis and then click into your Custom Files and select your font. The url will then appear.
💡 Pro tip: Delete the filler text first (URL.ttf/.otf), then add your url in.
@font-face {
font-family: 'font-name';
src: url(URL.ttf/.otf);
}
Example:
@font-face {
font-family: 'Arial';
src: url(https://static1.squarespace.com/static/#####/#####/######);
}
Step 4: Tell your site where you want to use the font with CSS
Header or paragraph text you want to appear in that font:
Options include the following:
h1 (largest header font)
h2 (second largest)
h3 (third largest)
h4 (fourth largest)
p (all paragraph text)
p.sqsrte-large (p1)
p:not(.sqsrte-large):not(.sqsrte-small) (p2)
p.sqsrte-small (p3)
header or paragraph text you want to appear in that font {
font-family: 'the font name you selected';
}
Example:
h1 {
font-family: 'Arial';
}
What if you want all of your headers to appear in that font?
You can apply this to multiple fonts at once by adding commas between them.
h1, h2, h3, h4 {
font-family: 'the font name you selected';
}
Example:
h1, h2, h3, h4 {
font-family: 'Arial';
}
What if you want all of your paragraph text to appear in that font?
p {
font-family: 'the font name you selected';
}
Example:
p {
font-family: 'Arial';
}
What if you want all your buttons to appear in that font?
.sqs-block-button-element {
font-family: 'the font name you selected';
}
Example:
.sqs-block-button-element,
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
font-family: 'Arial';
}
If you only some of your buttons to use that font, find the size below.
// Primary Button
.sqs-block-button-element--medium {
font-family: 'the font name you selected';
}
// Secondary Button
.sqs-block-button-element--large {
font-family: 'the font name you selected';
}
// Tertiary Button
.sqs-block-button-element--small {
font-family: 'the font name you selected';
}
Example:
// Primary Button
.sqs-block-button-element--medium {
font-family: 'Arial';
}
// Secondary Button
.sqs-block-button-element--large {
font-family: 'Arial';
}
// Tertiary Button
.sqs-block-button-element--small {
font-family: 'Arial';
}
What if you want to update the titles for the list sections? (These are often created by going to Add a Section > Services.)
// List Section: Section Title (Want to change this title’s font?)
.user-items-list .list-section-title {
font-family: 'the font name you selected';
}
// List Section: Item Titles (Basic, Intermediate, Advanced)
.list-item-content__title {
font-family: 'the font name you selected';
}
// List Section: Paragraph Text
.user-items-list {
font-family: 'the font name you selected';
}
Example:
// List Section: Section Title (Want to change this title’s font?)
.user-items-list .list-section-title {
font-family: 'Arial';
}
// List Section: Item Titles (Basic, Intermediate, Advanced)
.list-item-content__title {
font-family: 'Arial';
}
// List Section: Paragraph Text
.user-items-list {
font-family: 'Arial';
}
What if you want to modify your subscription block sign-up title, button text, and more?
// Title Font
.newsletter-form .newsletter-form-header-title {
font-family: 'the font name you selected';
}
// Description Font
.newsletter-form-header-description p{
font-family: 'the font name you selected';
}
// Placeholder Font
.newsletter-form .newsletter-form-field-element{
font-family: 'the font name you selected';
}
// Disclaimer Font
.newsletter-form .newsletter-form-footnote {
font-family: 'the font name you selected'';
}
// Button Font
span.newsletter-form-button-label {
font-family: 'the font name you selected';
}
// Error Font
.newsletter-block .newsletter-form-field-wrapper .field-error {
font-family: 'the font name you selected';
}
Example:
// Title Font
.newsletter-form .newsletter-form-header-title {
font-family: 'Arial';
}
// Description Font
.newsletter-form-header-description p{
font-family: 'Arial';
}
// Placeholder Font
.newsletter-form .newsletter-form-field-element{
font-family: 'Arial';
}
// Disclaimer Font
.newsletter-form .newsletter-form-footnote {
font-family: 'Arial';
}
// Button Font
span.newsletter-form-button-label {
font-family: 'Arial';
}
// Error Font
.newsletter-block .newsletter-form-field-wrapper .field-error {
font-family: 'Arial';
}
You did it! Congrats on adding your Google Font to your website. 🎉
Squarespace, Inc. owns the trademark for the term ‘Squarespace.’ Westerly Creative Studio LLC and this website are not affiliated with Squarespace, Inc. For the most accurate information, please visit squarespace.com. All information on this website is subject to change and Westerly Creative Studio LLC provides no guarantees.
Looking for further support?
Westerly Creative Studio offers everything from audits & consultations to new, custom builds. Whether you’re unsure about terminology or need to update your website, we’re here to help!
explore westerly creative studio
about the author
Meghan is a co-founder and lead designer of Westerly Creative Studio. With 16 years experience in her field, in addition to a BA in Graphic Design, she’s nerdy about all things color, typography, and illustration related. While her skill set spans the digital and print realms, she specializes in Squarespace websites and branding foundations.
