How to use multiple fonts in a list section title in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

In this tutorial you’ll learn how to use custom code to target the bold and italic font styles in your list section title so you can combine multiple font styles on one line!

A few pro tips before you dig in:

⚠️ This is specifically for version 7.1 - older versions of Squarespace don’t have list sections, but I do have another tutorial on image hover effects you can check out here. It’s an old one but a good one!

✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 

📄 You can install these on a single page using page header code injection or a code block in a section above or below the list section. Learn more about single page instillation at insidethesquare.co/singlepage

🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options. 

Here are the codes from this tutorial:

The list section title itself goes by the code name .list-section-title 

To isolate bold text, use the code name .list-section-title  strong  and reset the font weight back to normal like this example:

.list-section-title  strong {
font-weight: normal!important;
font-family: serif;
color: green;
font-size: 1rem}

To isolate italic text use the code name .list-section-title em and reset the font style back to normal like this example:

.list-section-title em {
font-style: normal!important;
font-family: serif;
color: green;
font-size: 1rem}

You can change all kinds of things like the font family, color, font size, add a border, background color, and anything else you want to see using the code names above!