/// Adding Custom Fonts to Squarespace (without Typekit)

So you’ve just been given a beautiful new branding package from your designer full of brand new fonts and everything else. But now you’re stumped as to how to add these custom branded fonts to your Squarespace site. But I’ve gotcher back with a Squarespace hack for you that will bring those branded fonts to life online!

This little Squarespace hack took me a long time to discover (*covers eyes in shame*)… which is crazy because it’s actually pretty simple! It just takes a few simple steps and a little custom code. But anyone can do it! I promise.

Read on for the full tutorial.

custom fonts in squarespace-01
HERE ARE THE STEPS:

  • In the main Squarespace menu, click DESIGN. Then CUSTOM CSS.
  • Below the CSS editor, click MANAGE CUSTOM FILES. 
  • Then upload your font file (this is a file with an extension of .ttf or .otf)

upload custom fonts CSS squarespace

 

 

 

 

 

 

 

 

 

 

 

 

 

Copy and paste the following code into the CSS editor:

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

 

  • Change the text that says FONT NAME to the name of your custom font
  • Highlight the text that says FONT GOES HERE. Then 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.

upload custom fonts squarespace

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Repeat this step with all of your custom fonts.
  • Once you have all of your fonts uploaded and added to the CSS code, it’s time 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;
}

 

You can still adjust the settings of each font in the regular style editor (ie: font size, letter spacing, etc). Make sure to click Save at the top of the Custom CSS page.

 

And that’s it!! Easy peasy. 

 

 

similar-squarespace-hacks-10

sqaurespace-hacks-code-snippets-for-squarespace-image-filters-08-08sqaurespace-hacks-code-snippets-for-squarespace-faq-01sqaurespace-hacks-code-snippets-for-squarespace-custom-pin-it-button-02sqaurespace-hacks-code-snippets-for-squarespace-image-filters-03