How to Upload a Custom Font to Squarespace

Can I add my own fonts to Squarespace?

Yes! And it’s probably a bit easier than you would expect. Adding a custom font to Squarespace involves four steps: downloading the font, uploading the font, adding CSS, and assigning the font to HTML tags.

Using a custom font on your Squarespace website is a fabulous way to give your website some unique style and really establish a strong brand.

Although Squarespace has an abundance of wonderful font options to choose from, sometimes we still want something that feels totally custom to our own brand.

In the online world, where almost 2 billion websites exist, it’s definitely becoming a challenging task to stand out and get noticed. Customizing your Squarespace Website and taking it to the next level by doing things like adding custom fonts can really help catch the eyes of your target audience.

To add a beautiful, custom font to your own Squarespace website, follow the 4 simple steps outlined in this article 😊 This code applies to both 7.0 and 7.1 websites!

---

*This post contains affiliate links. I earn a small commission when you click on the links and make a purchase. This comes at no additional cost to you. Affiliate links are marked with an asterisk.

---

Add a Custom Font to Your Squarespace Website

---

Step 01. Download Your Font

1. Find and download your font from a reputable source on the internet and make sure that you have full rights to use the font on your website.

2. Some legit sources include Google Fonts and Font Squirrel. These guys both offer free fonts. Creative Market* sells stunning custom fonts you can purchase for about $20-$30. 

3. The download will usually provide you with a ZIP file that contains multiple font files. You’ll typically find an .otf .ttf, and .woff file in the ZIP file. I will typically use the .otf file, but I believe any file should work.

---

Step 02. Upload Your Font to Your Website

1. Navigate to your website’s custom CSS by going to Design > Custom CSS.

2. Scroll down to the bottom of the Custom CSS sidebar and locate the “Manage Custom Files” button. Click on this button.

3. Click on “Add images or fonts”.

4. Locate the .otf .ttf, or .woff file from your computer and select the one you would like to add to your website.

5. The file will take a second to load, and then it will be successfully uploaded to your website for you to use.

---

Step 03. Add the Custom CSS to Make It Work

1. Within the CSS area, we will need to add some custom CSS in order to actually use the font we just uploaded.

2. Copy and paste the following code in your custom CSS.

3. Replace FontName with the name of your font. For example, MidCentury. Make sure to only replace the words/letters. Leave the quotation marks in place.

4. Replace FontURL with the URL for your font. To find the URL for your font, remove the words FontURL and place your cursor in-between the two quotation marks, then click on the “Manage Custom Files” button, then click on your custom font. The URL will be added to the place where your cursor was sitting in the CSS.

@font-face {
    font-family: 'FontName';
    src: url('FontURL');
}

---

Step 04. Assign the Font to HTML tags

1. Finally, we will assign the new font to HTML tags, depending on where you would like to use the font.

2. Copy and paste the following code in your custom CSS.

3. Remove the selector if you don’t wish to use the custom font on that particular tag. For example, if you don’t want to use the custom font on paragraphs, simply remove the p.

4. Replace FontName with the name of your font, just like you did in step 3.

h1, h2, h3, h4, p {
    font-family: 'FontName';
}

---

Tada 🎉 You are now using a beautiful, custom font on your website!

---

Did you enjoy this custom CSS, Squarespace hack? Check out more Squarespace tips, tricks, and custom CSS solutions in the blog.

---

Browse Premium Squarespace Templates

My modern, service-based templates are designed for entrepreneurs and small businesses who are looking for a professional website design without breaking the bank. Each one of my templates include video tutorials for easy content upload / style tweaks. I also include my Advanced SEO Guide (a $500 value). This guide contains the exact techniques I use to help my SEO clients land on Google page 1.

---

More from the Squarespace Design blog …