Using a custom font in Squarespace

One of our go-to additions in any Squarespace website we build, is adding in fonts that aren't available within Squarespace's design options. Typically we find ourselves building websites for clients who often already have their brand sorted, and part of their unique brand identity includes the fonts they use across their design work. But what do you do when the font you want isn't in Squarespace?

 

Installing the Custom Font

Well, first you need the webfont files for the font you want to add - this is often an option to purchase whenever you buy a font from a website, and may be any one of the following files types: .eot .svg .ttf .woff .woff2 .css

Next you want to navigate to the Custom CSS section of your website, within the Design section of Squarespace's editing controls. First copy the code below into the CSS window

@font-face {
font-family: 'NAME GOES HERE';
src: url('FILE URL GOES HERE');
}

Now replace NAME GOES HERE for the name of the font you are using, for example that might be 'Venti Bold' and ensure you keep this surrounded by single quote markers ' ' 

Your CSS should now look like this:

@font-face {
font-family: 'Venti Bold';
src: url('FILE URL GOES HERE');
}

Next, highlight FILE URL GOES HERE, making sure to ignore the ' ' markers. Then click the 'Manage Custom Files' button, followed by 'Add images or fonts'. Select your webfont file and upload it to Squarespace via the window that pops up. Once this is added, the Font and it's Filename will appear below where it says ' Add images or fonts.' Click the filename and it will insert the URL of this font file into your CSS.

The CSS should now look like this:
(Your font URL will be unique, so don't just copy this code and replace the name at the end because it won't work!)

@font-face {
font-family: 'Venti Bold';
src: url('https://static1.squarespace.com/static/537457564/t/58417/14845662/VentiBold.ttf');
}

 

Enabling The Custom Font

Great, so you've installed your font, but how do you actually start using it and seeing it across your website? Well, you need to tell the web browser which bits of text should be displayed as your new font. To do this, copy the code below into a new line in your Custom CSS.

h1 {
font-family: 'Venti Bold';
}

This code will now make any text defined as Heading 1 appear in your new font. And quite simply, to make any other headers appear in the same font we can adjust the code so it looks like this instead:

h1, h2, h3 {
font-family: 'Venti Bold';
}

As you can imagine, h2 and h3 will make your second and third headings appear in the new font as well, and simply using commas and adding body and p in, we can then target all other instances of text.

h1, h2, h3, body, p {
font-family: 'Venti Bold';
}

 

Multiple Fonts

There you go! You can also use these same steps to add a second font to your website. So for example, if you want just your headings to appear in Venti Bold, and have installed Venti Medium for the body font your code would look like the following:

@font-face {
font-family: 'Venti Bold';
src: url('https://static1.squarespace.com/static/537457564/t/58417/14845662/VentiBold.ttf');
}

h1, h2, h3, {
font-family: 'Venti Bold';
}

@font-face {
font-family: 'Venti Medium';
src: url('https://static1.squarespace.com/static/9863234/t/23423/9823578/VentiMedium.ttf');
}

body, p {
font-family: 'Venti Medium';
}

 

Advanced Tips

As you start to go through making or editing your website you may start to find other bits of text which you want in your new font but are currently displayed as a Squarespace default font instead. This might be the text inside a button, or on a form, or perhaps the caption of an image. This is where it helps to have some understanding of CSS and particularly how classes work. Either way, we suggest using Google Chrome's built in Developer Tools to find out the class name of the element's font you want to change. If you're on a mac just press CMD+Shift+C, this will open the Developer Tools and anything you point at with the cursor, it's class name should appear in blue above it.

 
An example of using Google Chrome's Developer Tool to target specific classes.

An example of using Google Chrome's Developer Tool to target specific classes.

 

Often there may be more than one class for an element, we can tell this by the fullstop that always appears at the start of a class name. In the example above this button is defined by two classes .sqs-block-button-element--small and .sqs-block-button-element 

In this situation we always recommend targeting the shorter class, since it's more general and will often target more instances throughout your site.

Now to change the font of this button we can simply add it to our CSS using the code from above:

h1, h2, h3, .sqs-block-button-element {
font-family: 'Venti Bold';
}

Now with this code, it will appear in the same font as all our Headings, but make sure to include the fullstop at the start of the class name otherwise it won't work! Using this technique you can target almost any part of your website to adjust not just the font, but the colour, size, background etc. whether Squarespace's Design panel lets you change it or not!

Social We TalkComment