How to add Adobe Fonts to Squarespace with CSS (7.1)

Found the perfect foundry for your next website design project on Adobe Fonts? In this tutorial, we’ll show you how to implement Adobe Fonts to your Squarespace website in just a few easy steps.

Before we get started, we should quickly note that Squarespace has an extensive library of fonts to choose from for your website. You can find the library by navigating to:

Design > Site Styles > Fonts > Headings or Paragraphs > Family > Browse fonts here

Step 1: Log into your Adobe Fonts account & choose font of choice

1. Log into your Adobe Fonts account

2. Choose font of choice

3. Click “Add to Web Project”

Step 2: Create a new project

1. Create or add Adobe font to project

2. Click “Create”

Step 3: Copy & paste HTML

1. Copy HTML tag in Adobe fonts

2. Paste HTML in header injection in Squarespace

Go to: Settings > Advanced > Code Injection > Paste HTML in “Header”

Step 04: Add the following CSS

1. From the Squarespace dashboard, go to: Design > Custom CSS

2. Copy and paste the code in Custom CSS: 

// CUSTOM FONT

@font-face {




}

 

h1 {

font-family: 'FONTNAME';}


h2 {

font-family: 'FONTNAME';}


h3 {

font-family: 'FONTNAME';}


h4 {

font-family: 'FONTNAME';}


.sqsrte-large {

font-family: 'FONTNAME';}



p {

font-family: 'FONTNAME';}


.sqsrte-small {

font-family: 'FONTNAME';}

NOTE: Squarespace 7.1 includes six options for heading and paragraph text: H1, H2, H3, P1, P2, P3. For P1 and P3, make sure to use .sqsrte-small and .sqsrte-large.

Step 5: Implement your custom font

Now that you’re all set up, let’s add your Adobe font to the code.

At the top of the code snippet, you’ll see this:

@font-face {




}

Now, navigate back to Adobe Fonts and copy the font family:

Paste the text in between between the curly brackets. PS. These are a curly brackets: { }

It should look like this:

Now that the font is active, we need to apply it to our headings and paragraphs. 

To do so, replace 'FONTNAME' with the Adobe Font name.

In the example above, we can see that the font name is quincy-cf

BEFORE:

h1 {

font-family: 'FONTNAME';}

AFTER:

Now, repeat this step for all heading and paragraph text.

NOTE: if you want to implement multiple fonts, you will need to add this code snippet twice and use unique font names. For example:

@font-face {

font-family: 'FONTNAME';

src: url();

}


@font-face {

font-family: 'FONTNAME';

src: url();

}

The Final Result!

PIN IT FOR LATER!

More tutorials