Using Custom Fonts on Squarespace
Squarespace already has TONS of fonts for us to use, but sometimes we find something special we REALLY want to use. In this post, I’ll share how you can do exactly that.
- The first thing you need to do is download or find a font you like. If you already have one downloaded, feel free to move on. If not, head on over to some of my favorite websites to find a font you like. (DaFont | FontSquirrel)
- Now we need to upload the font to Squarespace so we can use it. You may have received more than one file when you downloaded your font, feel free to upload as little or as many as you’d like. Some fonts come with the regular version, the bolded version, the extra bolded version, the italic version, etc. So upload any of these that you need. You can upload fonts by going to DESIGN → CUSTOM CSS. Then scroll to the very bottom and click on MANAGE CUSTOM FILES.
- Now for the code. Go ahead and copy the following code and paste it into DESIGN → CUSTOM CSS. Change “fontName” to whatever you want to call your font, it doesn’t have to be the actual font name, you can give it a unique name so people visiting your website won’t be able to tell what the font is called. (If you want to hide the actual font name, make sure you change the font’s filename as well.)
In the code above, delete the “fontFile.woff” and put your cursor between the opening and closing brackets where “fontFile.woff” used to be. Then click on MANAGE CUSTOM FILES in the bottom (where you uploaded your font) and click on the font you want to use. This will automatically fill in the URL of the font you uploaded.
- Now that we have the font set up to use, we can go ahead and start targeting things and changing their font. You can target multiple items and separate them with a comma, the code for targetting also goes into DESIGN → CUSTOM CSS. So heading 1 will be h1, heading 2 will be h2, regular text (paragraph) will be p, etc. Feel free to check out w3schools for a complete list of what you can target. Here’s some code that will target almost everything on a Squarespace website. The “!important” just makes sure that this code for font is given preference over Squarespace’s default fonts, the code should work without it but I usually put it in for good measure.
Want more help? I have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to my channel so you’ll know when a new tutorial is out.