How to Upload a Google Font to Your Squarespace Website (Step-by-Step Guide)
Disclaimer
Squarespace is a trademark of Squarespace, Inc., and Google Fonts is a service from Google LLC. Westerly Creative Studio LLC and this website are not affiliated with or endorsed by Squarespace, Inc., or Google LLC. Any advice or recommendations related to Squarespace or Google Fonts are provided for general informational purposes only and do not constitute legal advice. Users are responsible for verifying the accuracy of information and ensuring compliance with all applicable terms, including licensing and usage agreements. For the most accurate and up-to-date information, please visit squarespace.com and fonts.google.com, or consult a legal professional. All information on this website is subject to change, and Westerly Creative Studio LLC provides no guarantees.
Table of Contents
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 to woff2 for better SEO
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 your custom font to your Squarespace website
Go to your website and click on Website > Pages > Custom Code > 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 and tell Squarespace what font you’re referring to
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/.woff2') format('woff2');
}
Example:
@font-face {
font-family: 'Arial';
src: url('https://static1.squarespace.com/static/#####/#####/####') format('woff2');
}
Step 4: Tell Squarespace 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';
}
How to have all of your Squarespace headers appear in your Google 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';
}
How to have all of your Squarespace paragraph text appear in your Google font.
p {
font-family: 'the font name you selected';
}
Example:
p {
font-family: 'Arial';
}
How to have all of your Squarespace buttons appear in your Google 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';
}
How to target specific Squarespace buttons to appear in your Google font.
// 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';
}
How to make your navigation bar titles appear in your Google font.
// Navigation Bar Titles
.header-nav-wrapper a {
font-family: 'the font name you selected';
}
// Navigation Bar Titles
.header-nav-wrapper a {
font-family: 'Arial';}
How to make your navigation bar button appear in your Google font.
// Navigation Bar Button
.header-actions-action--cta .sqs-button-element--primary{
font-family: 'the font name you selected';
}
// Navigation Bar Button
.header-actions-action--cta .sqs-button-element--primary{
font-family: 'Arial';}
How to update your Squarespace titles for list sections in your Google font. (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';
}
How to make your Squarespace subscription block sign-up title, button text, and more appear in your Google font.
// 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 Squarespace website. 🎉
Need help?
Squarespace Website Design & Support
We offer everything from small edits to new, custom builds. Get the most out of your Squarespace website by hiring a trusted expert.
We even offer copywriting and SEO services.
Need Direction?
FREE Website Audits
for Subscribers
We have a select number of free audits available every month. Simply subscribe and let us know that you want to claim yours! We’ll give you feedback as if you were our client.
