How to Add Custom Fonts to Your Squarespace Website [2025]
Adding custom fonts to your Squarespace site is a great way to make your design stand out and reflect your style. In just a few steps, you can upload font files, tweak the CSS, and assign fonts to specific text styles like headers and paragraphs. It’s an easy way to give your site a unique and polished look!
Let’s dive in..
Watch the video
Check out the YouTube video below 👇
Navigate to your Squarespace dashboard and go to the 'Website Tools' section. Next, click on 'Custom CSS'. It should look like this:
Next, we need to upload our custom code file to Squarespace. Make sure you have the file downloaded before proceeding. To start, click on the "+" icon and upload the font file.
Once the font file is uploaded, the next step is to add some code into the "Custom CSS" section. Copy and paste the code below:
@font-face {
font-family: 'NAME';
src: url('');
}
h1, h2, h3, h4, p {
font-family: 'NAME';
}
You can change the "font-family" to the name of your custom font, but this is not the most critical aspect. What’s most important is that the font-family name remains consistent in both parts of the code.
In the first part of the code, we define the font, and in the second part, we specify which elements should use that font. Keeping the names consistent ensures the font is applied correctly to your targeted elements.
Now, we need to add the font URL to the code. Locate the part of the code where it says src: url(' ');. Click in the space in between the parentheses (inside the single quotes).
From there, follow these steps:
Click on 'Manage Custom Files' in the editor.
Select the font file we uploaded earlier from the list.
Once you insert the correct URL, you’ll see that the font on your site changes to the one we uploaded. And boom—your custom font is now applied! 🎉
You can assign the font to any text style you want. For example, in the code below, the font is specifically targeted and assigned to Heading 1 and Paragraph styles:
Extra tip:
If you want to use two or more different custom fonts on your Squarespace website, simply duplicate the code, change the font-family name to something unique, and upload a new font file. For example, you can assign one custom font to all headers and another to the paragraphs like this:
@font-face {
font-family: 'Font 1';
src: url('FONT 1 URL');
}
h1, h2, h3, h4 {
font-family: 'Font 1';
}
@font-face {
font-family: 'Font 1';
src: url('FONT 2 URL');
}
p {
font-family: 'Font 2';
}
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
