Creating additional font styles for your Squarespace site

Whilst Squarespace provides you with a vast array of fonts to choose from, you are essentially limited to specifying h1, h2, h3 titles, body font and quote for standard text blocks and some additional styling in galleries and blogs etc.

The reason why Squarespace limits the font styles you can specify, is to prevent less experienced users from messing up the look of their site with too many fonts.

But sometimes there is a requirement for more font styles when you are creating more complex websites and there is a way to code these into your site using the method below.

Adding additional font styles

Step 1. Specify the font styles using CSS

You can create additional font styles by specifying H tags beyond h3. So h4, h5 h6 etc.

The code below is from a job i produced. You will need to update the font, colour and other specifications to suit your project.

Duplicate the code for each style changing the h number, eg h5, h6.

Note: the code below produces all caps titles, if you do not wish to transform the text, use text-transform: none;

/* additional styles */
h4 {
font-family: Proxima Nova, Open Sans, Corbel, Arial;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
font-style: normal;
text-align: left;
color: #FDBB11
}

Step 2. Copy and paste the code

Copy and paste this code into the Custom CSS section of the Squarespace CMS. This lives under the Design section.

Step 3. Add a title to your page using the markdown block instead of the text block.

To add a title to your page using the new style you have created insert a markdown block.

In the markdown block, add your title between the opening and closing htags. <h4> Your title </h4>

Click Apply.

The markdown block provides a simple method for customising your Squarespace website.

Give it a shot.