How to Upload a Custom Font to Squarespace
Whether you're just starting your website journey or you've been playing around with your site for a while, you might have wondered, "Can I make my site even more 'me'?" The answer is a big, YES! One way to give your website a unique touch is by adding a custom font that reflects your style. Don’t worry if you’re not super techy—I've got you covered with some simple steps to help you upload your custom font to Squarespace.
Step 1: Choose Your Perfect Font
Before we dive into the technical stuff, let’s start with the fun part: picking out your custom font! You might already have one in mind, or maybe you’re still exploring. Websites like Google Fonts, Font Squirrel, and DaFont offer a treasure trove of fonts to suit any style. Once you’ve found the perfect one, download it to your computer.
You'll usually get a ZIP file, which you'll need to unzip to access the font file(s). Look for files ending in .ttf, .otf, or .woff, only these are the formats that work with Squarespace!
Step 2: Upload Your Font to Squarespace
Now that you’ve got your font file, it’s time to bring it into Squarespace!
Log into your Squarespace account and open the site you’re working on.
Go to the Custom CSS section: Click on "Pages" in the left-hand menu, then “Website Tools”, then "Custom CSS."
3. Upload your font: Click the “Custom Files” button, and then drag your font file into the box that pops up. You’ll see the font file listed—this means it’s successfully uploaded!
Step 3: Apply Your Font Using Custom CSS
With your font uploaded, it’s time to make it work on your site. Here’s how:
1. Add the @font-face rule: Still in the Custom CSS section, add this code at the top, within the box:
@font-face {
font-family: 'YOURFONT';
src: url() ;
}
2. Replace 'YOURFONT' with the name of your font (no spaces). Look at how its spelled in “Custom Files”
3. Add the URL by clicking within the parenthesis of src: url(), then clicking on “Custom Files”, then clicking on the font you uploaded. Click out of that box and you will see the url updated within the parenthesis.
4. Apply the font: Now, you can apply your font to different elements on your site. In Squarespace 7.1, there are seven different Headings/Paragraphs you can change to your custom font. These are:
Heading One h1
Heading Two h2
Heading Three h3
Heading Four h4
Paragraph One .sqsrte-large
Paragraph Two p
Paragraph Three .sqsrte-small
For example, to change all your headings to the new font, add:
h1, h2, h3 {
font-family: 'YOURFONT';
}
Or for one font add:
.sqsrte-large {
font-family: 'YOURFONT';
}
Replace YOURFONT with the name of your font – you entered this earlier in the first piece of CSS. Make sure they’re both spelled the same otherwise the CSS won’t work.
Click SAVE and you did it!
*Preview and Tweak
Once you've added the code, check out your site! How does it look? You can easily adjust the Site Styles if the font isn't displaying exactly how you want it. Maybe you want to change the size, weight, or letter spacing, experiment until it’s just right.
Are you a visual learner? Check out the video below on how to upload your custom font!
And that’s it! You've just taken a big step in making your website truly your own by adding a custom font. Pretty cool, right?
If you found this blog helpful or have any questions, feel free to DM us. I’d love to hear how your custom font journey went or help out with any hiccups you encountered along the way. Happy customizing!
