How to add a custom font to a Squarespace website
You're website is just about finished, but it's missing that extra touch... have you considered adding in a custom font to really bring your branding and visual style together?
Choosing a font that's unique to your brand and website is a fantastic way of adding that extra pop of personality that has your clients recognising your business and paying attention. As far as bringing extra elements into your Squarespace website goes, adding a custom font is a pretty simple process too - let me take you through it.
Before we get started, you’ll need:
A custom font from your brand designer or found/purchased online (I'll tell you about my favourite places shortly)
A Squarespace Business plan or higher in order to use the Code Injection feature.
Step one: choose your font
First things first - it's time to find your perfect font! There are a few ways you can go about finding a font, from working with a brand designer for a truly personalised font, purchasing one from one of the many online sellers or finding one for free on a public database - it's all about exactly how one-of-a-kind you want your font to be.
Here are three of my top options:
Google Fonts - a huge database of free fonts to explore, some of which are already available within Squarespace
Font Squirrel - another large database of free fonts available for commercial use
Creative Market - a database of paid-for fonts that you can purchase a licence to use (make sure to choose the Web Font option and input your page views)
Step 2: Download your font
Now that you've chosen your font, download it as a file. There are a few different file types but the most common ones are an OTF or TTF file. Make sure you save it somewhere easily found - this is a crucial brand asset!
Step 3: Upload your custom font to your website
On your website, choose Pages and then scroll down to select Website Tools and then Custom CSS. Squarespace often moves its interface around, so continue to have a look in different places if it isn't under the headings I've specified.
Click on the Custom Files button and select Add Font. You'll then be prompted to find your the font file on your computer.
Paste the following code into the box provided:
// Upload Custom Fonts //
@font--face {
font-family: 'FONT NAME';
src: url('FONT URL');
}
Replace wherever it says FONT NAME with the name of your font (try and get this to be an exact match) and then delete where it says FONT URL. Making sure that the cursor is perfectly between the apostrophes, click on Custom Files and select your font. This step tells the system that FONT NAME is that particular file.
There shouldn't be any changes yet, so don't worry if you're not seeing your font show up. We need to do one last step to direct your website on how to use this code.
Step 4: Choose how to use your font
Click on a new line underneath the code you've just entered and paste the following code:
h1 {
font-family: FONT NAME;
}
The h1 in this code tells your website to use your custom font as the h1 text style, but you can change this to another text style or add additional text styles as you like. It's your website, so it's up to you!
Step 5: Enjoy your new font!
After these steps, your new font should show on your website straight away!
Would you prefer to watch the tutorial? Here you go!
Troubleshooting and further help
If your font isn't showing correctly, there may be an issue with the font you’ve chosen, so give a different one a go. If it's still not working, feel free to get in touch and I'll see what I can do to help.
You can find a huge list of useful code snippets in my document 'Squarespace CSS Text Cheatsheet' here - it's free!
Alternatively, let me install your font for you! I love doing this as a part of my Happy Hour service, which I have regular slots for and costs £99.
