How to add a custom font to Squarespace
Selecting a font for your brand is one of the cornerstones of how you tell your story and impart your brand’s personality in a visual way. Online, it can also greatly enhance the usability of your website (or greatly detract from it!). Along with your logo (if you have one) and brand colours, your font ties everything together, and the right selection will speak directly to your audience, and draw them to you. So, what to do when you’ve chosen the perfect font, and then it’s not available in the Squarespace Style Editor…. horror! Fear not, you can just add a custom font.
To upload and use a custom font, just follow these three simple steps:
Step 1: Upload your font file
From the Squarespace dashboard, click on Design > Custom CSS, scroll to the bottom of the panel and click on Manage Custom Files. Upload the font file from your computer and you’re done with step one!
Step 2: Use custom CSS to help Squarespace find the font
For this step, we’re going back to Design > Custom CSS and now we’re going to enter a nifty little bit of code that tells Squarespace where your font file is, so that it can display it on your website. The CSS you need to enter is below – just copy and paste the lot and then you will replace the text in green with the details of your custom font:
// my custom font //
@font-face {
font-family: 'replace-with-your-font-name';
src: url('replace-with-your-font-url'); }For the font-family property, replace the text in green with the NAME of your custom font. In the example below, I am using a custom font called Baby Coffee, so that’s what I’ve entered.
To replace the url:
Highlight everything in green (between the opening and closing parentheses).
Delete.
Making sure your cursor is in the middle of the opening and closing parentheses, scroll down and click on Manage Custom Files.
Click on the font you just uploaded, and the URL will be automatically populated for you! You should now have something that looks like this, and you are done with step two:
// my custom font //
@font-face {
font-family: 'Baby Coffee';
src: url('https://static1.squarespace.com/static/5f8b01bd495a011f9089ac3a/t/606dc3708c9a9e299ca4f542/1617806192261/Baby+Coffee.ttf'); }Step 3: Assign the font to your header tags (or wherever you want it to appear)
The final piece of the puzzle is just to tell Squarespace where you would like the new font to be used, which you will do with an additional line of code in the Custom CSS panel. To replace your main page headers with your custom font, you would add the following:
h1 {font-family: 'NAME';}
Or to target all your headings, you can use something like this:
h1,h2,h3 {font-family: 'NAME';}
Like in step two, all you need to do is replace NAME with your actual font name. When you’re done, click Save and you are done.
That’s it! Sit back and admire your beautiful, consistent and unique branding!
Looking for custom fonts for your Squarespace site?
Creative Market is a great source of custom fonts, including a huge database of script fonts - great for accenting information on your site.
Font Squirrel has a good selection of free fonts.
Want a professional Squarepace website you can feel proud of?
Do you want a done-for-you website that will set you apart from your competitors and help grow your business? Learn more about my professional Squarespace web design service or get in touch for a chat about your project.
