Multiple Font Styles In One Line of Text
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
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 😉
Video tutorial
Code Example
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}