How to Add a Custom Font to Your Squarespace Website
You’ve put blood, sweat, and tears into creating your Squarespace website…but you can’t find a Squarespace font that matches your brand design as well as you’d like.
Or maybe your website still looks too much like a template, and you would like to give it a more unique look.
Whatever the case, adding custom fonts to your Squarespace website gives you a lot more options to showcase your brand personality through the typography.
But wait, doesn’t that require code?
I know, I know. You’re not a person who knows how to code. Don’t let that stop you! In this tutorial I provide you with everything you need, no coding knowledge required. (Only copying and pasting!)
How to Pick Your Custom Font
Before you can upload a font to your Squarespace website, you will need to select one for your brand kit. Most fonts are licensed, so once you pick one out, you will need to buy the rights to use it.
I suggest choosing a font from Creative Market (this is an affiliate link). Creative Market boasts over 64,000 fonts to choose from, most of which are around the $15-$25 price range.
Creative Market Font Store
Once you purchase a custom font and download the file to your computer, make sure you save the file somewhere where you can easily find it again!
Upload the Font to Squarespace
With so many options, choosing your font is the hard part! Next comes the easy part: uploading it to your website. Watch the video tutorial below where I show you how to add your font to Squarespace.
Note: The Squarespace navigation looks a little different now from when I filmed the video, but the steps are all the same.
You can upload the font file in three easy steps:
Navigate to the box for Custom CSS, under the Design tab in your website dashboard.
Scroll to the bottom and click “Manage Custom Files.”
Select the font file you downloaded from Creative Market.
Once the font is uploaded…nothing happens.
That’s because, even after the font is saved in your website, Squarespace doesn’t know how you want to apply the font. This is where you will have to copy and paste some CSS.
First, paste the code snippet below into the box for custom CSS under the ‘Design’ tab.
@font-face { font-family: 'NAME'; src: url('LINK'); }
After pasting the CSS into your Squarespace website, delete the word ‘LINK’ in the code and replace it with the link to your font file. I show you how to do this in more detail in the tutorial video.
Next, delete the word ‘NAME’ and replace it with whatever you would like to name your font. You can use the actual font name or choose a different name if you wish.
How to Use Your Custom Font
Okay, now your custom font is uploaded to your Squarespace website and you’ve added the necessary CSS.
What next? Well, now you have to decide how you are going to use your custom font. Are you planning to use the font for your paragraphs? Or your headings?
No matter where you want to use the font, it will take—you guessed it—another snippet of CSS.
Site Title Font
If you use a site name for your business instead of a logo, then you can really make your site name stand out by using a custom font in the header! For this, just copy and paste the code snippet below. Delete the word ‘NAME’ in the code, and replace it with the name of your font.
.has-site-title .Header-branding { font-family: 'NAME' !important; }
Unfortunately, this code snippet only works for the desktop view and not mobile. Although Squarespace does a good job of resizing website elements for mobile view, when you add custom CSS you often you have to edit your site for mobile view separately.
To change the site title on mobile as well, use the CSS below.
.Mobile-bar-branding { font-family: 'NAME' !important; }
Often when you change the site title font, it changes the title size as well. If your site title is suddenly too big or too small, I show you how to fix that at the end of the video. I also have a separate tutorial where I go through three ways to customize your site title or logo.
Heading or Paragraph Fonts
Lastly, you can use custom fonts for headings or paragraphs. Simply copy and paste the code below, and once again replace ‘NAME’ with the name of your font.
h1{ font-family: 'NAME' !important; }
You can see that the code starts with ‘h1,’ meaning it will change your Heading 1 to the custom font. But this CSS snippet is actually very versatile, and you can use it to change the settings for any of your headings and your paragraphs.
For example, if you want to apply the custom font to your Heading 2, replace the ‘h1’ in the code with ‘h2.’ Or if you want to apply the font to your body text, replace the ‘h1’ with ‘p.’
Using this snippet, you can customize your entire Squarespace website with different fonts! Just don’t go too overboard…sticking to only two or three fonts is actually better for consistent branding.
