How to Add Custom Fonts to Squarespace

How to Add Custom Fonts to Your Squarespace Website | Squarespace Customizations | Custom Fonts Squarespace | Squarespace Tutorial Videos | #squarespace #squarespacetips #squarespacetutorial #fonts

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

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

 
 
  • 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.

  • Copy the HTML code in the gray box at the top of the window. DO NOT close out the window.

  • Log in to your Squarespace account and go to your site panel.

  • Click Settings > Advanced > Code Injection.

  • Paste the code you just copied into the first code injection window.

  • Hit the back arrow until you’re back to the main site panel.

  • Click Design > Custom CSS.

  • Copy and paste the code below into the Custom CSS panel. Note that if you only want to apply the custom font to the h1 header tag, you would only copy the h1 section of the code. The same applies to any other tags or the body text.

h1 {

}

h2 {

}

h3 {

}

p {

}
  • Return to the Adobe Fonts tab in your browser and copy the CSS code for the font style you want to apply.

  • Paste the code on the line between the curly brackets for each CSS tag. Here’s what that might look like:

h1 {
font-family: adobe-devanagari, sans-serif;
font-weight: 700;
font-style: normal;
}

That’s it!

If you have a question, comment, or want to request a specific Squarespace tutorial, leave a comment below!