Simple guide to adding custom fonts to your Squarespace website
Adding a custom font to your website can be a great way to add personality and branding to your site. In this post, I’ll show you how to add a custom font to your Squarespace* site plus some tips on choosing the right font for your website. Let's get started!
Step 1: Pick your Font
If you're looking to add a custom font to your website, you'll need to purchase a special licence to legally use that font on your website, particularly if your site is connected to a business.
One of my favorite places to purchase custom fonts is
Creative Market*.
When it comes to custom fonts, they are usually better used sparingly and often only with headings and accents, not as your primary text font. The reason is that if every piece of text on your page is a custom font, it may he hadder to read and your page speed can suffer.
For your paragraph text font, you'll want to stick to a simple and very legible font such as Open Sans, Arial, or Merriweather. I don’t recommend using custom fonts for paragraphs.
Step Two: Download the Font
A web font needs to be saved in TIFF, WOFF or WOFF2 format to be embedded into your website.
Quick note: make sure you save all of the font formats available to you via your font purchase as you might want to use another file type when creating graphics for your brand!
Step Three: Add the Font to Your Website
The next step is to upload and add the custom font to your website:
Go to Design
Click on Custom CSS
Click Manage Custom Files
Click Add Images or Fonts
Then select your font file to upload
You’ll then need to add some custom CSS to use your new font on your website.
Copy and paste this CSS into the Custom CSS area:
@font-face { font-family: FONT; src: url(); }Where it says FONT, replace that text with the name of your custom font.
Next, add the URL of your font right between the two brackets ().
You’ll do this by clicking into Manage Custom Files and simply clicking on the font file you want to use. This automatically adds the URL of the file you uploaded, pretty clever right?
When you’re all done, it will look something like this:
@font-face {font-family: Montserrat; src: url(https://yoursite.squarespace.com/static/3sdgr5gddfgupsdfc357/t/5htfgh654357743332/1794832845/Monterrat.woff);}Step Four: Apply your custom font
Next, you’ll need to choose where your want your custom font to show up.
In Squarespace 7.1, there are four heading styles (H1, H2, H3 and H4) and three paragraph styles (Paragraph One which is coded as .sqsrte-large, Paragraph Two coded as p and Paragraph Three - .sqsrte-small)
In Squarespace 7.0, you have three heading styles (H1, H2 and H3) and one paragraph style (p) to choose from.
If you’re not sure if you’re 7.1 or 7,0 this article has a super-quick guide to checking which version if Squarespace your website is on.
Once you’ve picked which heading styles of paragraphs you want to use your custom font on, you’ll need to add another bit of custom CSS to apply your font to your chosen style.
To apply your custom font to a H1 heading, for example, you’ll add:
h1 { font-family: 'FONT'; } Remember to change out FONT for the name of your font you used earlier to add your custom form to your website.
Step Five: Style your custom font
Now your new font is installed on your website you can style it just like the native fonts inside the Site Styles section!
If you’d like to use your custom font in other places besides the standard text blocks, such as on your site header or the quote block, I recommend checking out this article from Wolf and Wild for more styling tips.
Final Thoughts
Adding custom fonts to your Squarespace website is a fantastic way to add some flair to your design. Just be sure to use them sparingly and keep readability in mind so everything can be easily understood by your potential clients and customers exploring your site!
