Adding Custom Fonts: Using Multiple Fonts On a Squarespace Website

Squarespace offers a plethora of fonts to choose from; however, sometimes you want to use a totally custom font purchased from a third-parry or use multiple fonts on a site at one time.

The following steps outline adding and assigning multiple fonts through Site Styles and Custom CSS. These steps can be followed to add one or any number of custom fonts to your site.

Step 1/ Site Styles

While editing your Squarespace website, navigate to Site Styles (the paint brush top right) and click “Fonts”.

Assign your fonts Base Size. If you are planning to use multiple fonts, and they exist within Squarespace, set these first in the Site Styles panel.

If you are needing only custom fonts, I recommend setting these Site Style fonts anyway to something that echos your design style in case the custom fonts were not to load.

Note: to use multiple fonts across your Squarespace website, we will be using the CSS Selectors of each paragraph style to assign the fonts in Custom CSS.

Step 2/ Upload Your Fonts

Make sure to purchase the proper license for your font.

Next, navigate to your Squarespace Dashboard > Website > Pages > * Scroll to bottom * > Website Tools > Custom CSS > Custom Files > Add Images of Fonts > Upload your font file(s)

Note: Fonts will need to be in either .TTF, .WOFF or .OTF formats and may require converting. Check out Convertio. In this tutorial, I show adding both WOFF and OTF formats.

Step 3/ Add your font with CSS

For every site I build, I create an unlinked Style Guide page on the site to configure all Site Styles from. To do this, create a new unlinked page and add all the paragraph styles H1 through Paragraph 3. Additionally, add additional blocks with text like Buttons, Summary Blocks, Scrolling marquees, and Newsletter Blocks.

Next, let’s add the font(s):

A/ Return to Custom CSS and add the following code snippet:

///ADDING CUSTOM FONT (ChangeNameHere)///

@font-face {
    font-family: ‘FontName’;
 
 src: url('FontURL'), 
    format('otf'); 

       url('FontURL')
    format('woff'); 

}

///ASSIGNING CUSTOM FONT (ChangeNameHere)///

h1 {font-family: 'FontName';}

B/ Update FontName to the name of your font. I suggest keeping it as one continuous name i.e. WorkSans.

C/ Change the FontURL for each format by double clicking to highlight “FontURL” > Manage Custom File > * click the font file * and you will see a URL automatically pasted within the Custom CSS box. 

Now, let’s assign the font:

D/ Change the FontName for each CSS Selector i.e. H1 to the name you gave your font in the orifinal Font-Family: ‘FontName’; section.

IMPORTANT: these names much exactly match.

E/ For multiple fonts, repeat steps A-D replacing “h1” with the below CSS selectors you need. Consider your type hierarchy and ease of use while assigning.

Note: if any of your font choices are native to Squarespace then at least two of your fonts can be managed from Site Styles. Decide which paragraph style they will remain as (i.e. h1, P) and be sure not to overwrite these styles in your Custom CSS.

HEADER
h1 (heading 1)

h2 (heading 2)

h3 (heading 3)

h4 (heading 4)

PARAGRAPH

.sqsrte-large (paragraph 1)

.p (paragraph 2)

.sqsrte-small (paragraph 3)

F/ Peruse Squarespace CSS directories for additional CSS selectors to target and assign fonts to more blocks on your site. Check out the ilovecreative Squarespace CSS Database for an extensive list.

G/ Now that your fonts are added and assigned, hit Save.

Step 4/ Optional Further Stylize Your fonts

In some cases, especially when using multiple fonts with varying styles i.e. italic, uppercase, spacing variations, etc, you will need to further stylize the code directly in CSS versus in Site Styles.

Utilize the below code snippet for each CSS Selector (h1, h2, etc) you need to stylize and delete any line of code you do not wish to make updates to.

h1 {

  font-family: 'FontName';

  font-weight: 300;

  font-style: italic;

  font-size: 22px;

  letter-spacing: 0.2em;

  text-transform: italic;

  line-height: 1em;

}

Note: all CSS changes are Global changes meaning they are reflected site wide

Happy font styling!

Basic CSS knowledge is required to implement these changes. Please note E Storm Studio is not responsible for any changes you make to your website’s code.

Hi, I’m Emma!

Your observant creative with an eye for all things orderly and artistic - a maker of brands, websites and marketing magic, here to help you bring your website dreams to reality.