How to Upload an Adobe Font to Your Squarespace Website (Step-by-Step Guide)
Disclaimer
Squarespace is a trademark of Squarespace, Inc., and Adobe Fonts is a service from Adobe Inc. Westerly Creative Studio LLC and this website are not affiliated with or endorsed by Squarespace, Inc. or Adobe Inc. Any advice or recommendations related to Squarespace or Adobe Fonts are provided for general informational purposes only and do not constitute legal advice. Users are responsible for verifying accuracy and ensuring compliance with all relevant terms, including licensing and usage agreements. For the most accurate and up-to-date information, please visit squarespace.com and fonts.adobe.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
While Squarespace offers hundreds of fonts within the platform, we all know that you can never have enough font options. For Adobe subscribers, using their fonts is a great way to have a more personalized, elevated site without incurring additional licensing fees, which can quickly become expensive when purchasing fonts individually. Plus, this ensures that you’re using the same font across all your collateral!
Step 1: Find your font on Adobe’s website & select “Add to Web Project”
Go to https://fonts.adobe.com/fonts and find the font of your choice.
Above the preview text will be the font’s name, as well as additional information about the font and icons. Click on the icon that looks like </>.
Step 2: Create a Website Project
A popup will appear. Create a project by inputting the name you want to use, then click “Create” in the bottom right.
Once that’s completed, you’ll see code in a gray box (we’ve redacted our specific link), as well as styling information about your font.
⚠️ Important Note: You will need a Squarespace Core plan or higher to be able to use the Code Injection feature.
Step 3: Add the Adobe font to your Squarespace website via the Code Injection panel
Go to your website and click on Website > Pages > Custom Code > Code Injection
Copy the contents of the gray bar (in the Adobe popup) into the Header box.
Click Save, then go back to the Website Tools panel (click < Website Tools).
Step 4: Tell Squarespace how you want to use the font with CSS
Now we need to assign the font to a heading or paragraph text.
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)
In the Custom Code panel, click on Custom CSS . You’ll see a panel, similar to the one in the Code Injection window.
Put the font size and a closed set of brackets in, like this:
h1{}
header or paragraph text you want to appear in that font {
Adobe CSS information
}
Copy / paste the information below “Fonts Added” in the Adobe panel between the brackets.
Click Save and you’re done!
You can modify header settings under your Site Styles, or you can specify additional formatting in your CSS.
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 {
Adobe CSS information;
}
Example:
h1, h2, h3, h4{
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
What if you want all of your paragraph text to appear in that font?
p {
Adobe CSS information;
}
Example:
p {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
What if you want all your buttons to appear in that font?
.sqs-block-button-element {
Adobe CSS information;
}
Example:
.sqs-block-button-element,
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
If you only some of your buttons to use that font, find the size below.
// Primary Button
.sqs-block-button-element--medium {
Adobe CSS information;
}
// Secondary Button
.sqs-block-button-element--large {
Adobe CSS information;
}
// Tertiary Button
.sqs-block-button-element--small {
Adobe CSS information;
}
Example:
// Primary Button
.sqs-block-button-element--medium {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Secondary Button
.sqs-block-button-element--large {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Tertiary Button
.sqs-block-button-element--small {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
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 {
Adobe CSS information;
}
// Description Font
.newsletter-form-header-description p{
Adobe CSS information;
}
// Placeholder Font
.newsletter-form .newsletter-form-field-element{
Adobe CSS information;
}
// Disclaimer Font
.newsletter-form .newsletter-form-footnote {
Adobe CSS information;
}
// Button Font
span.newsletter-form-button-label {
Adobe CSS information;
}
// Error Font
.newsletter-block .newsletter-form-field-wrapper .field-error {
Adobe CSS information;
}
Example:
// Title Font
.newsletter-form .newsletter-form-header-title {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Description Font
.newsletter-form-header-description p{
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Placeholder Font
.newsletter-form .newsletter-form-field-element{
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Disclaimer Font
.newsletter-form .newsletter-form-footnote {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Button Font
span.newsletter-form-button-label {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
// Error Font
.newsletter-block .newsletter-form-field-wrapper .field-error {
font-family: "gin", serif;
font-weight: 400;
font-style: normal;
}
You did it! Congrats on adding your Adobe 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.
