Jump to content

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

Recommended Posts

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

Link to comment

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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.