Hey there —
My website has some Chinese text on it. When I apply a style in the appearance pane, Sparkle always changes the text to Arial MS Unicode, regardless of the font or its Chinese glyph support. Thus, after applying a style, I have to go back and manually switch it back from Arial to the correct font.
Would it be possible to add style support for Chinese fonts?
Thanks so much!
By the way, if you want to read some translations of Tang Dynasty poetry, you can do so at www.samchalekian.com
Hi @TrustedDeveloper, as far as I am aware, Sparkle tries to match the pasted font with one of the ones installed. The match should be happening both at the level of the unicode font name inside the font, and at the display name.
The other issue is Chinese web fonts are generally extremely large (one megabyte per font file, versus 150-200 for a typical latin web font), so they are generally not used in web context, and having a generic “arial” font with Chinese glyphs results in a fallback to the corresponding Chinese system font.
(a system font is one already present on the device displaying the page, a web font is delivered along with the website)
One problem with using a system font is the tracking prevention mentioned in this post:
So for system fonts you can build a “font stack”, a mechanism to instruct the browser to search in the specified list for alternative fonts on the computer. For example for japanese we pre-built this font stack for the Hiragino Mincho ProN font (you can check in the Sparkle font panel, system fonts section):
In Sparkle the system font font stack needs to be based on one of the allowed fonts, that for Chinese means:
There’s no need for a font stack for web fonts, because a web font is downloaded along with the website so it’s always there.
With all that said, I think you need to be pasting text that uses a font in the font stack, for it to keep that style (and the underlying font names need to match, as mentioned).
Alternatively you need to have the Chinese web font installed.
Tell me more and we can look at what’s not quite working.
Hello Duncan,
Thank you for your excellent and detailed response!
With your response in mind, I have two questions:
First, would it be possible to add PingFang SC to the font stack?
It has been the default Chinese serif font since MacOS 10.11.
It is installed on my computer, but it doesn’t show up in Sparkle, which prompts me to install it each time I launch the application.
Second, is it possible to access Google web fonts which support Chinese from Sparkle, or is it necessary to download the fonts and set the up in the “Custom Web Fonts” pane?
PingFang SC is not one of the “whitelisted” fonts (as per the system font post I linked to), so it can’t be added, it wouldn’t be recognized or rendered by Safari.
The web fonts are in fact indexed from Google Fonts, though some might be missing. For any missing font you can download it to your Mac from Google Fonts and add it in the custom web fonts pane.
Alright, I’ll stick with Heiti SC for the time being.
Final question – is it possible to configure a web font and system font stack hybrid?
For instance, I primarily use Inter, a Google Web font on the site. Would it be possible to add Heiti SC as a fallback for Chinese text?
I’m afraid that’s not currently possible, but it would indeed make total sense.
we use the chinese fonts inside, till now it is no problem, to show it
we use follow fonts to show it …
