Jump to content

CSS heading font shows as italic without related code?

Go to solution Solved by Vigasan,

Recommended Posts

Site URL: https://orion-template.squarespace.com/?password=demo

Hi all

In Site Styles I've got my heading font set to Source Code Pro, and I've added the below code to update H1 & H2 to Playfair Display:

h1, h2 {
  font-family: 'Playfair Display'
}

For some reason though the website displays these headings now as all italic when live or on the preview page.

When I go back into the editor it goes back to how I've manually set it (see screenshot attached).

Any ideas? I've been trying to dig through the web developer and just can't work out what's causing it!

Thanks in advance 🙂

italic example.PNG

Edited by CassAggett

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment
  • Solution

When I undo the font, it isn't italicized anymore. Do you have Playfair Display selected as the font for something on your Squarespace website? If you aren't using that font anywhere else, Squarespace won't load it onto your website and you have to load it manually within the CSS section.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
15 hours ago, Vigasan said:

When I undo the font, it isn't italicized anymore. Do you have Playfair Display selected as the font for something on your Squarespace website? If you aren't using that font anywhere else, Squarespace won't load it onto your website and you have to load it manually within the CSS section.

Thanks Vigasan, I couldn't find it anywhere else, only on the lock screen which I'd added afterwards. But I've changed all headings in Site Styles to Playfair Display and then updated the CSS to Source Code Pro just for H4 and that seems to have fixed it?!

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment
  • 2 weeks later...
On 8/29/2021 at 3:34 AM, CassAggett said:

Thanks Vigasan, I couldn't find it anywhere else, only on the lock screen which I'd added afterwards. But I've changed all headings in Site Styles to Playfair Display and then updated the CSS to Source Code Pro just for H4 and that seems to have fixed it?!

Yup that'll work. In order to use Playfair Display in CSS, it has to be selected as a font for something else so that Squarespace loads the font onto the website first.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.