Adding Custom Font to Your Squarespace Website

Sign up for a free Squarespace trial here! #afflink

Custom Font Squarespace - Tiffany Davidson

Squarespace offers a wide variety of fonts to choose from. At present, there are about 700 fonts you can freely use when designing a Squarespace website.

But you might have your heart set on a specific font or font group that Squarespace doesn’t offer.

As a designer, sometimes clients come to me with branding guides that involve fonts not available on the Squarespace platform.

In cases like this, it’s necessary to upload custom fonts to your Squarespace site.

You’ll be happy to know it’s a straightforward and simple process. In this article, I’m going to show you how to do it!

How To Upload & Use Custom Font on a Squarespace Website

In the Rhododendron Woods; Photo by Tiffany Davidson

Retrieve custom font files

To begin, you’ll need your custom font file(s) downloaded to your device so that we can upload the desired font to your Squarespace site.

Typically, the font file will be .otf format.

To locate custom font files online, you can perform a simple Google search of “<font name> font download” and then download from a custom font database. Some custom fonts are free to download, while others will require purchase.

Upload font to site

Once you’ve downloaded the font file of your dreams, it’s time to upload it to your site so we can create CSS rules for it.

To upload a font file to your Squarespace site, simply do the following:

Login to your site via account.squarespace.com
From the main sidebar menu, choose Design
Next click on Custom CSS
Scroll down and click Manage Custom Files
From here you’ll see an option to Add Images or Fonts, click that and upload your .otf font file.

Now that your font file is uploaded, it’s time to establish CSS rules on how we want the font to be used on the site.

To explain, I’m going to assume we want to use this new custom font as our Heading 1 font.

This is the code you would use:

/*custom font for H1*/
@font-face {
font-family: 'SELIMA'; src:url('https://static1.squarespace.com/static/5e82790cc8d15e44d9c6dd3c/t/5e8279daf183cb2f8b9c3252/1585609179189/Selima+.otf'); } h1 {font-family: 'SELIMA';}

But wait! If you simply paste this into your own Custom CSS box, this won’t work because you need to replace certain parts of the above code with the information of your own custom font. That is, the one you just uploaded.

To do this, you need to grab the URL Squarespace generated to represent the .otf file you uploaded.

So paste the above code, but then replace the URL with your own. To retrieve your custom font file URL, right-click on the font file (Custom CSS - Manage Custom Files) and choose Copy Link Address.

Then- replace the URL of the code you pasted into Custom CSS with the custom font file URL you just copied. Be careful not to change any of the other characters in that line of code, only the URL (from https to .otf) as shown below.

Once you’ve input the URL of your custom font file there, simply go and replace the font name with your own. You can name it whatever you want, but I find it’s easiest to stick with the font name itself. So if your custom font is called Black Diamond, then replace SELIMA, as I have it in the examples above, with BLACK DIAMOND or BLACK-DIAMOND or BLACKDIAMOND, etc.

Be sure to save your work.

Custom Font For Other Text Formats:

What if you want to use custom font as another format other than Heading 1? You can do that just as simply using the following code, just remember to change the font name and font file URL always.

Heading 2 Custom Font:

/*custom font for H2*/
@font-face {
font-family: 'VOGA'; src:url('https://static1.squarespace.com/static/5e82790cc8d15e44d9c6dd3c/t/5e827e52a9343e48bd742894/1585610322635/CDType+-+Voga+Medium.otf'); }
h2 {font-family: 'VOGA';}

Heading 3 Custom Font:

You can either use the code above and replace H2 with H3, or if you want to use the same font family you can add a simple line of code, like so:

h3 {font-family: 'VOGA';}

Because you’ve already identified the font name VOGA and defined it, you can then use that font easily across other identifiers such as H3 or even Blog Post Titles. This way you don’t have to paste big blocks of code, and you can keep your Custom CSS tidy.

Blog Post Title Custom Font:

Same code, just use the identifier below to target blog post title fonts:

.BlogItem-title {font-family: 'VOGA';}

Summary Block Title Custom Font:

/*customize summary block title font*/

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
color: #ffffff;
font-family: VOGA; } }

Styling Custom Fonts

Just like normal free fonts on a Squarespace site, you can style your custom fonts as well.

To do this, from the main sidebar menu go to Design > Site Styles > then simply adjust heading 1, heading 2, heading 3 text etc. You can tinker with the size, thickness, spacing, and other styles.

I hope this was helpful for you. If you have any questions, feel free to leave those in the comments and I’ll try to help if I can.

Thanks for stopping by and please sign up for my Squarespace Newsletter while you’re here.

Talk to you again soon~

x
Tiffany