Jump to content

Using different fonts for different headings

Recommended Posts

Hi guys!

 

I've been struggling for a while with this...

Heading 1: Will be used for the website homepage logo 'Pang's Wok' - modak

Heading 2: I would like to be Hammersmith One

Heading 3: I would like to be Playfair Display

 

I did try simple code but it doesn't work: 

 

h3 {

    font-family: playfair display;  

}

 

What am I doing wrong?

 

Any help would be greatly appreciated. My website currently has the fonts all over the place while I try and figure this out. Thanks!

 

Link to comment

Set your heading font to Pang's Wok and add this to Custom CSS:

h2, h2 a, h2 strong {
  font-family: Hammersmith One;
}
h3, h3 a, h3 strong {
  font-family: Playfair Display;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

There's nothing wrong with the code in my testing, how are you applying it? Can you send some screenshots?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you show me how you are applying the CSS with a screenshot? 

Can you share your website as well?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks for sharing your website. The fonts are applying correctly.

If you still can't see it you may need to clear your browser cache.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Not sure, I can only tell you it's correct for me:

image.thumb.png.227b12249b76b4e452c144518fd74ad4.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, Maverick85 said:

That's a big help. Thank you! I will keep playing around until I can get it to appear correctly for me. 

FWIW, they aren't appearing correctly to me either. I tried Chrome, Safari, and Firefox.

I also tried inserting those specific fonts into my own website (along with !important) and it's not working for me either.  I've been having really inconsistent results with CSS/fonts since Squarespace's recent fonts overhaul. 

 

Link to comment
3 hours ago, AndreaDube said:

FWIW, they aren't appearing correctly to me either. I tried Chrome, Safari, and Firefox.

I also tried inserting those specific fonts into my own website (along with !important) and it's not working for me either.  I've been having really inconsistent results with CSS/fonts since Squarespace's recent fonts overhaul. 

 

Thanks for your input. Really appreciate it. I'm still working on it trying to get it working correctly. 

Link to comment
21 hours ago, Hassan95 said:

It seems like you're trying to apply custom fonts to different headings on your website using CSS. The issue you're facing might be due to incorrect font names or missing font imports. Let me guide you through the process step by step.

Import the fonts in your CSS:
css
Copy code
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Playfair+Display&display=swap');
Apply the fonts to your headings:
css
Copy code
h1 {
    font-family: 'Pang\'s Wok', modak, sans-serif;
}

h2 {
    font-family: 'Hammersmith One', sans-serif;
}

h3 {
    font-family: 'Playfair Display', serif;
}
Ensure proper font names, including any spaces, are enclosed in single quotes.

This seems to have worked (although I wasn't able to use the first code due to an href error) 

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.