How to Upload an Adobe Font to Your Squarespace Website (Step-by-Step Guide)
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.
Step 3: Add the Adobe font to your Squarespace website via Code Injection panel
Go to your website and click on Website > Pages > Website Tools > 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).
⚠️ Note: You will need a Core plan or higher to be able to use Code Injection.
Step 4: Tell your website 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 Website Tool 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 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.
