InsideTheSquare.co

View Original

Multiple Font Styles In One Line of Text

See this content in the original post

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

I’m sure you’ve seen plenty of websites (even Squarespace's home page) showcase two types of font in the same line of text.

We can’t do this in the Squarespace editor, but we can with CSS, and that’s precisely what you’ll learn how to do in this tutorial!

The code used in this tutorial is below, but make sure you watch the tutorial so you know how to use it 😉

See this content in the original post
See this content in the original post

This code will reset a Heading One italic font to no longer be slanted and apply a new font family.

h1 em {font-family: Serif!important; font-style: normal!important}

This code will reset a Heading Three italic font to no longer be bold and apply a new font family.

h3 strong {font-family: Serif!important; font-weight: normal!important}

See this content in the original post

⭐ Free Training: Squarespace CSS Basics

🔗 How to install CSS in one page on your Squarespace site

📖 Free Guide: Text & Font Properties