Squarespace: Using Custom Fonts

Squarespace already has TONS of fonts for us to use, but sometimes we find something special we REALLY want to use. In this post, we’ll share how you can do exactly that.

  1.  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 our favorite websites to find a font you like. (DaFont | FontSquirrel)
  2. 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 DESIGNCUSTOM CSS. Then scroll to the very bottom and click on MANAGE CUSTOM FILES.
  3. Now for the code. Go ahead and copy the following code and paste it into DESIGNCUSTOM 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, otherwise, people will see the filename in the code and know the font’s actual name.)
    @font-face {
        font-family: fontName;
        src: url(fontFile.woff);

    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.

  4. 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 DESIGNCUSTOM CSS. So heading 1 will be h1heading 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 we usually put it in for good measure.
    h1, h2, h3, p, div, span, label, input {
        font-family: fontName !important;

Want more help? We have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to our channel so you will know when a new tutorial is out.

Vigasan Gunasegaran About the author

I've been working on Squarespace and WordPress websites for quite some time now. I enjoy how easy it is for clients to make updates to their own websites while using a CMS system. Outside of website design, I love good food, Netflix, and video games.

No Comments

Leave a Reply