Help! Assigning different fonts for different languages. Possible with CSS?

Hi everyone,

Much help needed from all CSS experts out there! 🥲

Site: falcon-oboe-ej5c.squarespace.com

I have a bilingual site in Traditional Chinese and English, my headings are using a serif font named "Baskerville Poster PT", it displays English nicely on desktop, the Chinese part also shows up as a serif on desktop, however on mobile you can see the Chinese shows up as a random sans-serif and that's what I'd like to change.

I'd like the website to load up Google Font "Noto Serif Traditional Chinese" for the Chinese, while the English part remains using "Baskerville Poster PT".

https://fonts.google.com/noto/specimen/Noto+Serif+TC

I tried using the font family command but failed, on mobile the Chinese part still shows up as a sans-serif:

h2, h3, h4 {
font-family: 'baskerville-poster-pt', 'Noto Serif TC', serif;
}

Attached are screenshots on desktop and mobile. Any help would be greatly appreciated!!!

Hi, @evergreendazed can you share the code where you upload the font 'Noto Serif TC'? It doesn't look like you have.

Hi @melody495, here's the quote that I use to apply Noto Serif for the Chinese text:

@font-face {

font-family: 'NOTO Serif';

src: url('https://static1.squarespace.com/static/5e934051ea41e51dc718dd8d/t/653a370374cec457f5dc63aa/1698314059472/NotoSerifTC-Regular.otf');

}

h2, h3 {

font-family: 'NOTO Serif';

}

But I don't like how it renders the English text so I'm wondering if I can use a different font for each language. 😞
Thank you, looking forward to your answer!

14 minutes ago, evergreendazed said:

Hi @melody495, here's the quote that I use to apply Noto Serif for the Chinese text:

@font-face {

font-family: 'NOTO Serif';

src: url('https://static1.squarespace.com/static/5e934051ea41e51dc718dd8d/t/653a370374cec457f5dc63aa/1698314059472/NotoSerifTC-Regular.otf');

}

h2, h3 {

font-family: 'NOTO Serif';

}

Hi, can you share a screenshot of where you've put this code? I can't see it in your CSS.

Hi @melody495! Added just now, as you can see from my screenshot, the Chinese font changed to Noto Serif but the English font also changed. I'd like it to remain Baskerville Poster PT like before. 😞 
Really appreciate your help, thank you so much!

7 hours ago, evergreendazed said:

Added just now. the Chinese font changed to Noto Serif but the English font also changed. I'd like it to remain Baskerville Poster PT like before. 😞 

Hi, can you add a Code block and put the below code in the code block. At the moment you have set your site wide h3 font-family to be 'NOTO Serif', this means all h3 text will be in 'NOTO Serif'. You need to decide which one you wan to use as your font for all h3 across your website, 'NOTO Serif' or 'baskerville-poster-pt'.

I would probably suggest keeping 'baskerville-poster-pt' as your h3, then just change the chinese font as and when you need it. Like the below text.

<h3 style="font-family: 'NOTO Serif'">
  "以影像敘事，探索男性情慾"
</h3>
<h3>
  "Exploring "<em>Masculine Sensuality</em>" in " <em>Cinematic Narratives</em>
</h3>
  

If that works, you can remove your old text block. Let me know how it goes.

Thank you very much @melody495! I tried your solution but since I have a bilingual site I can't afford to change all texts manually with this method. I guess the quickest way is to just use one font that looks good in both Chinese and English. What do you think?

Just a suggestion. You can put Chinese text between the symbols # #, then use JS code to change it to a <span> tag, then you can target Chinese text easily to change the font.

I haven't tried it yet, so I don't know if it will work.