How to use two font styles in one line in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to 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.

→ If you want to install this on just one page on your site, and not the whole thing, check out this tutorial for a step-by-step tutorial on how to do that with any code.

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 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 H1 text:

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

Want to add a half highlight background to your bold font? 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!

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

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