evergreendazed Posted November 26, 2023 Share Posted November 26, 2023 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!!! Link to comment
melody495 Posted November 27, 2023 Share Posted November 27, 2023 Hi, @evergreendazed can you share the code where you upload the font 'Noto Serif TC'? It doesn't look like you have. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
evergreendazed Posted November 28, 2023 Author Share Posted November 28, 2023 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! Link to comment
melody495 Posted November 28, 2023 Share Posted November 28, 2023 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
evergreendazed Posted November 29, 2023 Author Share Posted November 29, 2023 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! Link to comment
melody495 Posted November 29, 2023 Share Posted November 29, 2023 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
evergreendazed Posted December 21, 2023 Author Share Posted December 21, 2023 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? Link to comment
tuanphan Posted December 22, 2023 Share Posted December 22, 2023 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. evergreendazed 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Solution melody495 Posted December 22, 2023 Solution Share Posted December 22, 2023 On 12/21/2023 at 2:05 AM, evergreendazed said: 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? I would say so yes! If you're not familiar with custom code then I would suggest just using the same font for both. This would mean you will be able to manage everything easily yourself. Otherwise there are a number of ways you can achieve this with custom code, e.g. my suggestion or @tuanphan being some of them. evergreendazed 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd e: melody@melodylee.tech 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment