How to use two font styles in the same line of text in Squarespace

I’m sure you’ve seen plenty of websites, including 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!

In this tutorial, we’ll use some clever CSS to change the look of a specific part of a sentence using the bold and/or italic text types in Squarespace!

A few important things to note before you copy and paste this into your own site:

→ This is just one way to create this look; I prefer it for my own work because changing font to bold or italic is super easy while typing right into your Squarespace site.

→ You can use this trick for any type of text in Squarespace, not just the 4 examples here!

→ If you don’t see the change right away, trying adding !important to make the browser use your code instead of the site styles file.

Here are the codes from this tutorial. For bold text use the word strong and reset the font-weight to normal so it’s no longer bold.

/* Here is an example for bold H1 text */
h1 strong {
color:green; font-weight:normal!important
} 

For italic text use the two letters em and reset the font-style to normal so it’s no longer italic.

/* Here is an example for italic H1 text /*
h1 em {
color:green;
font-style:normal!important
}

Want to add a half highlight background to your bold h1 text? Try this code:

h1 strong {
color:purple;
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, lavender 50%)!important;
font-weight:normal!important
}

Give three styles a try, using different colors for bold and italic!

For heading two fonts, change h1 in the codes above to h2 instead

For heading three fonts, change h1 in the codes above to h3 instead

For paragraph text, change h1 in the codes above to the letter p instead

h1 strong {
color:green;
font-weight:normal!important
}
h1 em {
color:purple;
font-style:normal!important
}