Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


arielleneal

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...