How to Add Custom Fonts to Squarespace
Squarespace has an impressive collection of native fonts to choose from. You can check out my favourite Squarespace font pairings here. But what if you’ve seen a font elsewhere, like Google, Adobe or Creative Market, and you want to use that font on your website?
Here is a step by step guide on How to Add Custom Fonts to Squarespace.
How to Add Custom Fonts to Squarespace
Choose and download your custom font
My favourite sources for fonts are:
Adobe (Here is my guide on How to Download Adobe Fonts to Your Mac)
Google Fonts
DaFont
Creative Market
MyFonts
Remember to check the font license to ensure that legally you are allowed to use it on your website.
The font file will need to be in the format .OTF, .TFF or .WOFF in order to be able to upload it to Squarespace
2. Upload your font file
Once you’ve clicked on your website in Squarespace, hit the forward slash ‘/’ key and type in “custom css” into the box. Click on CUSTOM CSS from the options that appear below.
The Custom CSS panel will open on the left hand side.
Click on the downward arrow next to Custom Files. This will open up another window for you to upload your font file.
Click on the + and select the relevant font file from your computer.
3. Add the CSS code
Next, copy and paste the following code into the CSS box:
@font-face {
font-family: FONTNAME;
src: url();
}Replace FONTNAME with the name you want to refer to the font as on your Squarespace website. For simplicity, I recommend using the actual name of the font you are using, but you can use any name you like.
Now you need to add the URL of the font in between the brackets. The easiest way to do this is to click in between the brackets and then select your font from the Custom Files Menu. This will automatically add your font URL in between the brackets.
4. Apply the font to your website
Now you need to tell Squarespace how you want to use your custom font, e.g as heading text or paragraph text.
Copy and paste the following into the CSS box:
WHEREYOUWANTTOUSEFONT {
font-family: 'FONTNAME'!important;
}Replace FONTNAME with the name that you gave your font in the previous step.
Replace WHEREYOUWANTTOUSEFONT with one of the following:
Heading 1: h1
Heading 2: h2
Heading 3: h3
Heading 4: h4
Paragraph 1: .sqsrte-large
Paragraph 2: p
Paragraph 3: .sqsrte-small
If you want to use one font for multiple text styles the separate by commas like this: h1, h2.
An example could be:
h1, h2, h3, h4 {
font-family: 'Arial'!important;
}Lastly, the !important overrides any default styles. Take this out if you don’t want to override default styles.
5. Save and Preview
Save your website and preview your font across different devices screen sizes and browsers. Not all fonts work on all browsers so it’s important to check.
Found this post useful? You’ll also like:
◇ How to Download Adobe Fonts onto Your Mac
◇ 25 Squarespace Font Pairings to Elevate Your Website
↓ Liked this post? Pin it to Pinterest ↓
