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}

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

Customize accordion block font in Squarespace

Next
Next

How To Create a Single Page Website in Squarespace