CSS heading font shows as italic without related code?

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 🙂

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?!

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.