Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for non-latin font fallbacks #118

Open
andersnoren opened this issue Sep 8, 2019 · 9 comments

Comments

@andersnoren
Copy link
Contributor

commented Sep 8, 2019

Following in the tradition of this issue for Twenty Nineteen and this one for Twenty Seventeen, we’d love to get some help from all of the polyglots and i18n folks out there to make sure that Twenty Twenty has awesome support for non-latin alphabets. To start with, we need help with finding good non-latin fallbacks. Later on, we'll need lots and lots of help with testing.

Kudos to @nielslange for this handy table from last year, which I'm stealing outright. This is the list of alphabets supported in twentyseventeen and twentynineteen. I'll update with font stacks, testers and PRs for Twenty Twenty as we go.

Language ISO Codes Fonts Tester PR
Arabic ar, ary, azb, ckb, fa-IR, haz, ps
Chinese zh_HK, zh_TW, zh_CN
Cyrillic bel, bg-BG, kk, mk_MK, mn, ru-RU, sah, sr_RS, tt_RU, uk font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans_serif;
Devanagari bn_BD, hi_IN, mr, ne_NP
Greek el
Gujarati gu
Hebrew he-IL
Japanese ja 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif
Korean ko-KR
Thai th
Vietnamese vi
@kjellr

This comment has been minimized.

Copy link

commented Sep 9, 2019

A quick note from an implementation perspective: If possible, it would be great to get these loaded as individual stylesheets, and call them only if they're needed. In Twenty Nineteen, each of these additional styles are included in the main stylesheet by default, and add quite a bit of filesize.

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 9, 2019

@kjellr Thanks for the note! Yes, finding a good way to avoid that would be great. Getting a discussion going about the performance impact of using alphabet specific stylesheets and only loading the one that is needed would be awesome.

@kjellr

This comment has been minimized.

Copy link

commented Sep 9, 2019

This was touched upon in Slack today, but just making note here: The most difficult aspect of this is separate from the development hurdle: it's finding appropriate font substitutes that carry the same feel as the primary latin fonts. Ideally designers familiar with each non-latin language would help making these fallback stack decisions, since many of us aren't familiar designing in languages other than our own.

@nukaga

This comment has been minimized.

Copy link

commented Sep 10, 2019

For Japanese, I think the title (h1-h6) choose to be Noto Sans JP and the text use be "Hiragino Kaku Gothic ProN" or "sans_serif" only.
Web fonts in Japanese fonts are heavy and are not suitable for setting all posts. And since the environment of Japanese fonts is various, I thought it would be good to make use of the fonts of each device.

@westonruter

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

it would be great to get these loaded as individual stylesheets, and call them only if they're needed.

This it would be great to use wp_add_inline_style() for this. The mappings of languages to fonts can be stored in PHP and then it can call wp_add_inline_style() to just output what is required. This would avoid the frontend overhead of another render-blocking stylesheet.

@nielslange

This comment has been minimized.

Copy link
Contributor

commented Sep 11, 2019

@andersnoren I've collected the following potential non-latin fallback fonts on Google Fonts. Would you mind going through the list to take a look which fonts would be suitable for:

  1. Titles
  2. Other texts

Potential fonts

ℹ️ Noto Sans might be a good fit as it supports most of the locals listed above.

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 11, 2019

@nukaga Thank you for the reply, and sorry that I'm late in getting back to you. I've added 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif to the Japanese row.

@nielslange Noto Sans looks like it would substitute well for Inter in terms of x-height and overall letterform width, so that seems like a strong candidate at least. I don't feel comfortable making suggestions for most of the specific alphabets listed though, since I have no idea if the fonts I would propose would be at all readable.

@nielslange

This comment has been minimized.

Copy link
Contributor

commented Sep 11, 2019

@andersnoren Thanks for your reply! In that case, I start by finding folks that can test this issue and can suggest readable fonts. How does that sound to you?

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 11, 2019

@nielslange Sounds good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.