How to use two fonts in a list section title // Multiple Fonts for List Section Title Tutorial
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
---
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! • How to use image filters as a hover e...
✨ 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. Here is a link to a tutorial on how to set that up: https://insidethesquare.co/singlepage
🙋 If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options.
Here are the codes from this tutorial. Have fun with your Squarespace website!
The list section title itself goes by this 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!
---
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
---
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #learncssforsquarespace #listsections #imagehovereffects #squarespacehovereffects #hovereffects
Watch video How to use two fonts in a list section title // Multiple Fonts for List Section Title Tutorial online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 31 August 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,553 once and liked it 29 people.