How to show two font styles in one line of text using CSS

Site URL: https://www.arielleneal.com/test-page

I am trying to use multiple fonts on a single line of text (specifically a serif and script font) for a client's website on Squarespace 7.1 The site is currently on a trial site, so I'm troubleshooting on an unpublished page of my own website (7.0) but still having the same issues. 

The color, size and weight of the targeted word changes, but the font isn't changing. I've tried switching it to various non-custom fonts that already exist in Squarespace and none of them work. Please help! I don't want to resort to adding the script font via images throughout the site. 

CSS Code:
h1 em strong,
h1 strong em {
  color: lightpink;
  font-family: pacifico;
  font-style: normal; /*if you want to remove the italics*/
  font-weight: normal; /*if you want to remove the bold style*/
  text-transform: none; /*if you want to remove the all uppercase or lowercase style*/
}

This is the tutorial I used, the font color changes but it's not in pacifico: https://beatrizcaraballo.com/blog/add-another-heading-to-squarespace-without-code-blocks

Thank you!!

The pacifico font has not been loaded.

By default sites only load fonts that have been set through the SS design interface.

If you are trying to use fonts available from TypeKit or Google Fonts not loaded as above then you have to jump through hoops to use them for special purposes like the effect you're trying to achieve.

You have to load them manually with CSS (@font-family) or a link tag. Which method you use depends on which version of SS/font family you want to use.

I suggest you use the san-serif font for testing your effect. That way you can notice the difference and see that the code is working.

Is Pacifico the font you want to use on your clients site or are you just using it for testing?