Using different fonts for different headings

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!

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;
}

Hi Ziggy

Thanks for taking the time to provide the code. Unfortunately I'm still getting the same problem in that the website doesn't display those two fonts. They both end up being the same generic font, neither of them the font written in code. Any idea why?

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

So here is one screenshot with the two fonts I want. The other screenshot is from the website using the CSS. The text in red and cream are set to different headings (h2 and h3) but using the code fonts appear the same. 

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

Can you share your website as well?

website is pangswok.fr

Thanks again so much for your help.

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.

That's so strange I cleared cache but the fonts do not appear on any of my devices. 

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

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

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. 

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. 

It doesn't work to me. Have you assigned Hammersmith One for any elements yet?With some fonts, if you have not assigned in Site Styles, the font file will not be able to load to be able to use CSS

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) 

Huge thank you to everyone who chimed in