How to add an Adobe font to a Squarespace website
Choosing your own special font for your website is another fun way of bringing a bit of pizazz to your brand (and you know I'm all about that)!
Whether it's bold, delicate or quirky, a custom font brings heaps of personality to your web presence, as well as giving you a common element to use across your website, social media, newsletter and other platforms.
Before we get started, you’ll need:
An active subscription to Adobe Creative Cloud - it can be expensive if you don't use it regularly, but a great additional feature to take advantage of if you already have an active subscription.
A Squarespace Business plan or higher in order to use the Code Injection feature.
Step 1: choose your font
Step one: choose your font
First things first - it's time to choose your Adobe font! Head to font.adobe.com to search through hundreds of unique options for all sorts of styles and purposes.
I like to select Browse All as it gives you a number of filters such as tags, classifications and properties to help you narrow your search ('fun' is my go-to tag, of course!)
While I'm not the boss of your brand, I will urge you to choose a font style that is easily legible (for the sake of accessibility of your website), as well as something that fits comfortably with the personality of your brand.
Once you've found a font you like, choose your desired weighting (depending on the purpose for this font) - e.g. if it's being used as H1 or H2, a heavier weighting is great, whereas a lighter weighting is better for H3, H4 or paragraph text.
Step 2: Get your code
Step 2: Get your code
Now that you've chosen your font, click Add font to a Web Project and choose your website project from the drop-down section. You'll have to select the weighting for your font again here so make sure to only have the correct one ticked before hitting Save.
A box of instructions will pop up, giving you the code you require and where to add the code on your website. Copy the code in the grey box at the top and head to the editing suite of your Squarespace website.
Step 3: Add your code
Step 3: Add your code injection
On your website, choose Pages and then scroll down to select Custom Code and then Code Injection. 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.
Paste your code into the box provided and press Save. There shouldn't be any changes yet, so don't worry if you're not seeing your font show up yet. We need to do one last step to direct your website on how to use this code.
Step 4: Add your CSS
Step 4: Choose how to use your font
Once again, choose Custom Code, but this time click on Choose Custom CSS - this is where we'll add another piece of code to tell your website which style you want to use the font for, e.g. H1, H2, paragraph.
In the box provided, copy and paste the following onto the first line:
// Add Adobe Font //
This is a note just for us (which is what the slashes signify) for organisational purposes.
On the next line, you'll need to specify what you would like your chosen font to be used for e.g. H1, H2, paragraph. For illustration purposes, I've chosen H1 by adding the code:
h1 { … }
After this, press Enter to create the space for the font code. Now, go back to Adobe to copy the second piece of code under Fonts Added and paste this on the next line, leaving the } on the line after that.
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.
