How to Add Custom Fonts to Squarespace
Squarespace offers a ton of awesome font selections, right out of the box. There are so many options, including ALL Google fonts and the entire TypeKit library. Sometimes you need a bit more than that though, especially if you're trying to create a unique website that stands out from the crowd.
Whether you want to use hand-lettered fonts and custom designs from independent type foundries, or simply want to establish consistency with your existing brand, there are plenty of reasons to use custom fonts in Squarespace. Check out our step by step tutorial for adding custom fonts in Squarespace, no premium plugin required!
Finding the Right Font
Our favorite place for custom fonts is Creative Market. There are so many choices, including our favorites by Nicky Laatz, Sam Parrett, and Jen Wagner. MyFonts are another great choice for premium commercial-use fonts, with a focus on high quality and simple licensing.
Font Squirrel offers many free-for-commercial use fonts. However the quality isn't quite the same as Creative Market, and there's a lot more stuff to sift through to get to the good stuff. If you’ve got the time, go for it!
Another great resource is Typewolf. It's more of a curated font directory with loads of examples and font pairings. It also has a ton of screenshots of how these fonts have been incorporated into web designs. We love this site and use it all the time for inspo.
Getting the Legal Things Covered
When picking your fonts, make sure the license allows for commercial use and font-face embedding. Most fonts from the mentioned resources will allow for this, but please do your diligence and make sure you are legally allowed to use these fonts for commercial use online. Better to be safe than sorry in this instance.
Downloading the Proper File Type
Once you've settled on a custom font, you'll need to make sure you have the proper file formats to use it as a web font. Your font files will likely come in .otf or .ttf file format. For maximum compatibility and performance, you'll also need the font in web format—.woff and .woff2. Depending on where you acquired your custom fonts, you may be able to download these formats directly from the vendor.
Don’t have the right web formats? No stress, you can use Font Squirrel's free generator to convert a .ttf or .otf format to web formats.
Adding Your New Font to Your Site
Now that you have your chosen font in the appropriate formats, let's go add it to Squarespace. Go to Design > Custom CSS and paste the following code:
@font-face { font-family: 'font name'; src: url(''), url(''), url(''); }
You'll want to replace 'font name' with the name of your font.
Now it’s time to upload the font files. Click "Manage Custom Files" to open the file uploader. Select "Add images or fonts." and upload all three file formats now (the .otf or .ttf, plus the .woff and .woff2 formats).
Once the files are uploaded, it's time to update the code snippet. To do so, click to place your cursor in between the quotations in the above code snippet, then select your web font file in the custom files window. The URL path will automatically fill where your cursor is located. Repeat this again with the remaining two formats. Great! Your custom web font is now uploaded to Squarespace!
We're not done yet though. In order to assign this new typeface, you need to use some custom CSS. Head over to Design > Custom CSS to add in the following snippets.
You can apply it to all Heading 2 styles like this:
h2 { font-family: 'font name', sans-serif; }Or get more specific with your selectors, like targeting blog post titles only:
h1.blog-title a { font-family: 'font name', sans-serif; }
If you are applying this new font to general styles like Heading 1 or Heading 2, you can continue to use the Site Styles options to control other aspects of the typography like letter spacing, line height, font size, etc. For more specific uses, you'll need to use CSS to apply your custom styles:
h1.blog-title a { color: #222222; font-family: 'font name', serif; font-weight: bold; letter-spacing: 1px; line-height: 0.1em; }It may take a bit of playing around to find the right combination of sizing and coloring to get the font set up to your liking. Be patient with this process as well! It will all pay off in the end.
That’s it, your Squarespace site is now set up with your custom font! Have you added custom fonts to your Squarespace sites? Where do you go to find fonts, and what are your favorites? Be sure to share in the comments below!
You might also like…
