Changed font to Source Sans Pro but only takes effect on letters

I changed the base font for my site here:

After change it looks like this :arrow_down:

The font changed for alphabetic characters but not for Chinese characters. Chinese characters are still in the default font. I wonder why… and I’d like to make this right. Could someone help me? :bowing_man:

PS: I tried Google Fonts API and the Google Font theme component too. I even tried uploading a font (Source Sans Pro) as an asset of the theme. The results are the same.

1 Like

All of the information I can find on Source Sans Pro indicates that it doesn’t support Chinese characters. It only has a few hundred Latin glyphs.

You’d have to use Source Han Sans Traditional Chinese or …Simplified Chinese instead. (Or some other font with support for CJK glyphs.)

3 Likes

Oh… I mistook Source Sans Pro for Source Han Sans. Now I understand, thanks!

But I did encounter this problem when using Noto Sans Simplified Chinese (= Source Han Sans) through Google Fonts API.

It sounds like, to use multiple scripts together in the same forum, you may need to use custom CSS.

Basically, you’d want to end up with font styling like this, in your CSS:

font-family: 'Noto Sans Simplified Chinese', 'Noto Sans', sans-serif;

I’m not sure the Base Font setting is up to the task.

3 Likes

Indeed, I didn’t put anything in CSS, now I see where was the problem. Following the Google Font official guide for using Noto fonts on the web that you mentioned, I modified the font of my site to Noto Sans SC with success! :smiling_face_with_three_hearts: Thank you!!

For those who may have run into the same issue as mine (failed to set up Noto non-European language fonts on my site through Google Font API), take a look at the official guide mentioned above.

And a tip for those who wish to use Noto Sans CJK, remember to put Noto Sans before Noto Sans TC (or SC , JP etc. in the font-family property to ensure a good look for alphabetic characters.
Example:

body {
    font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;
}