How to Add Custom Fonts to Your Squarespace Website

How to add custom fonts to your Squarespace website for branding and customization.

If you’re like me and like to be different (hello, artists), having a font that stands out or isn’t a basic font is a must on a website. It’s also one of the key ways to have consistent branding on everything. If you use a certain font on your business cards, it makes sense to use it on your website!

Adding a custom font(s) to your website is a way to customize your site even more, especially when using templates. But how do you add those fonts to your Squarespace site if they aren’t in Typekit?

I have a quick CSS Squarespace hack that can make this happen! All it takes is a few simple steps and some custom coding.

STEPS:

ONE: CHOOSE YOUR FONT

In particular, use a font that is professional and readable. There’s nothing worse than a complicated font where people can’t even read your business name.

Double-check that the font you’re using is 100% free or that the license that comes with it allows you to use it on your website. Many typefaces are only licensed free for personal use or require payment for the license. Some licenses only cover using fonts in print.

Make sure to read the fine print and stay on the legal side of using typefaces. And beware of free fonts that aren't high-quality. Test them out and make sure you want to go with them.

TWO: UPLOAD YOUR FONT TO FONT SQUIRREL

Once you choose your fonts, use the Webfont Generator at Font Squirrel to make sure your custom font will work across all browsers.

Upload your fonts to Font Squirrel to make sure your font is compatible with all web browsers.

Upload your font, choose Optimal, and agree that you're uploading fonts that you're allowed to use on the web. Then, click download and get access to your new webfonts.

The files you’ll want end in .woff and .woff2. You’ll want to use both so that your custom fonts show up appropriately across all browsers and on mobile.

THREE: UPLOAD CUSTOM FONTS TO SQUARESPACE

  • In the main Squarespace navigation menu, go to Design > Custom CSS.

  • Below the CSS Editor, choose Manage Custom Files.

  • Upload your custom font file.

Upload your custom font to Squarespace with the CSS Editor.

Copy and paste the following code in 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.

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

Squarespace Custom CSS Editor add a custom font to Squarespace

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 still need to tell your website you want to use them!

H1, H2, and H3 are your headers and p is for your body text. To do this, copy and paste the code below into the CSS editor to specify what you want each font to do:


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

Once you’re satisfied with those options, great! Now go and have fun adding custom fonts to your website.

Did you add custom fonts to your website? How did it go? Do you have any questions about adding custom fonts? I’d love to hear from you in the comments below!

 
 

Ready for a modern & refined website to tell your brand’s story?

Are you ready to reach the next level of success?

Let’s make it happen!


Kat Collins is a Squarespace Website Designer focused on helping you share your brand’s story via your website to take your business to the next level. She specializes in winery website design, as well as small business website design. On the blog, you’ll find a variety of topics that help you succeed in online business, such as website design, branding, social media strategies, blogging, email marketing, Squarespace design tips, and more.