Adding Custom Fonts In Squarespace 7

Unlike many other website creation tools out there, Squarespace built with design in mind. That being the case, you may want to add some extra flavor to your site by adding custom fonts. If you want to use free Google Fonts or use fonts from your paid Adobe Typekit membership, those features are built straight into the platform. However, if you want to add fonts that you purchased on an external site like MyFonts or got for free, there is a little bit more legwork necessary. For this tutorial, I’ll be using a font I found on Font Squirrel, a website dedicated to free fonts!

Downloading the font

The first and most important step is to download the font correctly. You want to make sure that you download a Webfont. Desktop fonts, eBook fonts, and app fonts often cannot legally be used on your website. I’ve decided to go with the font 3Dumb to add some character to my website. Download the Webfont in as many different formats as possible to maximize compatibility with as many browsers as possible.

Once you download the font, you’ll usually get a zip file with the font (in this case, they’ve also included the 2dumb font). In the folder, you’ll see all of the font files that included like below:

Entering Custom Code

Return to Squarespace and from the Home menu, click Design → Custom CSS. Once there, click the button Manage Custom Files. Then click the Add Images Or Fonts button that slides up. It should look like this:

You’ll have to add each font file one by one. SVG font files do not work in Squarespace, so don’t sweat it if that file does not upload successfully. Now that you have your fonts loaded in, we have created some Custom CSS. On that same screen, we will use @font-face, a CSS rule that allows for the inserting of fonts with your font URL. To get your URL, click Manage Custom Files, then click the font that you want to use. When you click it, it will help the paste the URL wherever you are typing in the CSS block.

Important: When loading fonts on an https site (which sites that end in .squarespace.com always are), your font will not load unless your font file starts with https and vice versa. When clicking on the font, the URL that displayed will not (as of this blog) have the https. Go through the code and remove the HTTP. Your code should look something like this (the code block scrolls right):

CSS @font-face {
    font-family: '3Dumb';
       src: url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a024de4b02e9aae0b8b11/1427767885054/3Dumb-webfont.eot'),
              url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a025ee4b00bb340926b18/1427767902381/3Dumb-webfont.ttf'),
              url('//static1.squarespace.com/static/550dda19e4b00c1b7c102f59/t/551a0262e4b00bb340926b21/1427767906914/3Dumb-webfont.woff');
    font-weight: 400;
  }

Now that the @font-face is in, we can now apply it to our text. Stay in the Custom CSS portion of the menu. For example, if you want all of your headers to be in the 3Dumb font, paste the following code in:

CSS  h1, h2, h3, h4, h5, h6 {
    font-family: '3Dumb';
    font-weight: 400;
  }

Using fonts on only some text

You may want to add the font, only on one page or in one section, or maybe just one word. That kind of flexibility is possible. The first step is to create a Markdown Block where you want to type the text. In the Markdown block, surround the text in a <span class=”chooseAClass”></span> that you would like to use. Your markdown block would end up looking something like this:

Then head back over to the Custom CSS text box and enter the following code. Make sure that the class you chose is the same class that you put in the Custom CSS and that you use the font-family name you chose earlier. Your Custom CSS should look similar to this (I added font-size and line-height to make it look cooler):

CSS.dumbFont {
    font-family: '3Dumb';
    font-weight: 400;
    font-size: 36px;
    line-height: 60px;
  }

About to change to 3Dumb!!