How to Add Custom Fonts to Squarespace

Squarespace comes with a variety of free and premium fonts pre-installed and ready to use, but if you want your site to be truly unique, chances are you’ll want to install a third-party font. Fortunately, adding custom fonts isn’t that hard.

Disclosure: This post contains affiliate links. When you click on an affiliate link and make a purchase, I receive a small commission (at no additional cost to you). Affiliate links are marked with an asterisk (*).

Here’s a quick tutorial on how to add custom fonts from third-party sources like Fontspring*, MyFonts*, Creative Market, Google Fonts, or Squirrelfont. Scroll to the bottom if you want to install an Adobe Typekit font. There’s a separate tutorial for that.

Uploading Fonts the Easy Way

Watch the video tutorial below or scroll down for written instructions.

• In your Squarespace site panel, click on Design > Custom CSS.

• Scroll down and click on the button that says manage custom files.

• Drag your font file from your desktop to the upload window that pops up.

• Copy and paste the following CSS into the Custom CSS area.

@font-face {
font-family: YOURFONT;
src: url();
}

• Replace YOURFONT with the name of your font. Here’s an example of what that might look like:

@font-face {
font-family: geometria-light;
src: url();
}

• Add the source URL where your font is being stored. To do that click right between the parentheses after “src: url.” Then click on manage custom files again and, finally, click on the font you just uploaded. The URL will automatically be added to the CSS. The final result should look something like this:

@font-face {
font-family: geometria-light;
src: url(https://static1.squarespace.com/static/5c9e8dce8dfc8c33721247fd/t/5ca76c77f9619aa4f7e38257/1554476151744/geometria-light.otf);
}

Next, you’ll need to apply the font using CSS. To do that, you’ll want to add the following code to your CSS panel:

h1 {
font-family: 'YOURFONT';
}

h2 {
font-family: 'YOURFONT';
}

h3 {
font-family: 'YOURFONT';
}

p {
font-family: 'YOURFONT';
}

Replace YOURFONT with the name of your font. If you only want to apply the font to your h1 header, only copy and paste the h1 portion of the code. The same goes for h2, h3,

You can also customize the size, font weight, letter spacing, line spacing of your font, along with other font styles. Here’s an example of what that might look like:

h1 {
font-family: 'YOURFONT';
font-size: 35px;
font-weight: 300;
letter-spacing: 0.01em;
line-spacing: 1.5em;
text-decoration: none;
}

Installing an Adobe Typekit Font

To install an Adobe Typekit font, follow these instructions:

• Find the font you want to use on the Adobe Typekit website.

• Click Add to Web Project on the righthand side of the page.

• Click the arrow on the righthand side of the dropdown menu.

• Click Create a New Project and name your project.

• Deselect any font styles you don’t want to add to your website and click Create. Then click Done.

• Click on My Adobe Fonts in the upper righthand corner of the window.

• Select the Web Projects tab. Locate your project and copy the Project ID.

• In your Squarespace site dashboard, navigate to Settings > Advanced > External API Keys.

• Scroll down and paste the Project ID in the clearly labeled text box.