Adding Custom Fonts in Squarespace with CSS

If you're like me, you probably have a collection of fonts you typically use as your 'signature fonts'. If you're even more like me, you probably purchase your favorite fonts from top designers on Creative Market. Great! But now how do you add those fonts to your Squarespace site if they aren't in TypeKit?!

I have a quick and easy little hack that can make this happen! All it takes is a few simple steps and some custom coding. Let's get to it!

Steps:

  • In the main Squarespace navigation menu, choose DESIGN. Then click CUSTOM CSS.

  • Below the CSS editor, choose MANAGE CUSTOM FILES.

  • Upload your custom font file (this will be a file extension ending in .ttf or .otf).

 
 

Copy and paste the following code into the CSS editor:

@font-face { 
font-family: 'FONT NAME'; 
src: url('FONT GOES HERE');}

  • Change out the text that says FONT NAME to the name of your custom font.

  • Highlight the text that says FONT GOES HERE, click MANAGE CUSTOM FILES, and click on the font you uploaded in the steps above. FONT GOES HERE should now be replaced with a url.

 

 
 
  • Repeat this step with any other custom font you want on your site.

  • Once you have all of your fonts uploaded and added to your CSS code, you need to make them replace the default Squarespace fonts. To do this, copy and paste the code below into the CSS editor:

h1{ font-family: 'FONT NAME' !important;} 
h2{font-family: 'FONT NAME' !important;} 
h3{font-family: 'FONT NAME' !important;} 
p{font-family: 'FONT NAME' !important;}

Note: You are still able to adjust the settings of each font in the regular style editor (ie: font size, color, letter spacing, etc).

If you're satisfied with those options, you can stop there. However, I personally didn't want to give up one of my main heading fonts for the "signature" cursive script font I wanted on my site. So I decided to give up one of the font options I rarely ever use: the quote font.

  • To change the quote font, copy and paste the code below into the CSS editor:

}
 blockquote {
   color: #252525;
   font-size: 12px;
   font-family: YOUR FONT HERE;
 }

  • Change out the text that says YOUR FONT HERE to the name of your custom font.

  • Change font color and size to fit your needs.

Make sure to click Save at the top of the Custom CSS page, and you're done!

Let me know if you had any issues with the code, and I'll do my best to help you through it.