Support for non-latin font fallbacks

[waviaei]

Looking at the _fonts.scss, most of the specified fonts -- as I am aware -- only support Latin alphabets. They do not support or only very limited support for non-latin alphabets.

In addition to that, serif fonts are specified as the primary body font.

$font__body: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;

In Japanese, non-serif fonts are more commonly used on the web. If serif fonts are used, we need to consider the choice of them very carefully, else readability and aesthetics become absolutely terrible.

Are there any similar cases in any other languages? I am not sure.

The same issue regarding better support for non-latin font fallbacks was raised and applied in the development of twentyseventeen WordPress/twentyseventeen#59

I would like to raise this issue for same matter to be considered in Twentynineteen too.

---

19-Oct Edit by designsimply

List of alphabets supported in twentyseventeen that we also want to try support:

1. Cyrillic ( Add support for Cyrillic fonts twentyseventeen#364 )
2. Greek ( Add support for Greek fonts twentyseventeen#366 )
3. Hebrew ( Add Hebrew font overrides twentyseventeen#294 )
4. Arabic ( Add support for Arabic fonts  twentyseventeen#398 )
5. Vietnamese ( See twentyseventeen/59 (comment) and twentyseventeen/59 (comment) )
6. Thai ( Update style.css for Thai Font. Issue #59 twentyseventeen#93 )
7. Japanese ( Update style.css for Japanese Font. Issue #59 twentyseventeen#155 )
8. Korean ( Add support for Korean fonts twentyseventeen#286 )
9. Chinese ( Add support for Chinese fonts twentyseventeen#359 )
10. Devanagari ( Add support for Devanagari twentyseventeen#403 )
11. Gujarati ( Add support for Gujarati twentyseventeen#404 )

Checklist for twentynineteen PRs:

• Cyrillic (Add Cyrillic language support #343 Add non-latin language support #383)
• Greek (Add Greek language support #344 Add non-latin language support #383)
• Hebrew (Add Hebrew language support #345 Add non-latin language support #383)
• Arabic (Add Arabic language support #346 Add non-latin language support #383)
• Vietnamese (Add Vietnamese language support #347 Add non-latin language support #383)
• Thai (Add Thai language support #348 Add non-latin language support #383)
• Japanese (Add Japanese language support #341 Add non-latin language support #383)
• Korean (Add Korean language support #349 Add non-latin language support #383)
• Chinese (Add Chinese language support #351 Add non-latin language support #383)
• Devanagari (Add Devanagari language support #352 Add non-latin language support #383)
• Gujarati (Add Gujarati language support #353 Add non-latin language support #383)

[slaFFik]

Oh yes, Cyrillic please too!
Ping me if Cyrillic-based language native speaker tester is needed for Russian/Ukrainian languages.

[joyously]

We can solve it the same way we did in Twenty Seventeen, which is using the language attribute on the html tag to define a different set of fonts.

[philiparthurmoore]

Is this semi-finalized?

"Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;

If so then I'm happy to test Vietnamese.

[kjellr]

@philiparthurmoore: Go for it. 👍

[nielslange]

@philiparthurmoore Are you going to implement this or shall I take over?

[philiparthurmoore]

@nielslange If you're referring to Vietnamese then yes, I'm happy to test it. If you're referring to other languages then go for it. I'm only interested in Vietnamese.

[nielslange]

Language	ISO Codes	Fonts	Tester	PR
Arabic	ar, ary, azb, ckb, fa-IR, haz, ps	font-family: Tahoma, Arial, sans_serif;	n/a	#346 #383
Chinese	zh_HK, zh_TW, zh_CN	font-family: 'PingFang TC', 'Helvetica Neue', Helvetica, STHeitiTC-Light, Arial, sans-serif;	@yuliyang	#351 #383
Cyrillic	bel, bg-BG, kk, mk_MK, mn, ru-RU, sah, sr_RS, tt_RU, uk	font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans_serif;	@slaFFik	#343 #383
Devanagari	bn_BD, hi_IN, mr, ne_NP	font-family: Arial, sans_serif;	n/a	#352 #383
Greek	el	font-family: 'Helvetica Neue', Helvetica, Arial, sans_serif;	n/a	#344 #383
Gujarati	gu	font-family: Arial, sans_serif;	n/a	#353 #383
Hebrew	he-IL	font-family: 'Arial Hebrew', Arial, sans_serif;	n/a	#345 #383
Japanese	ja	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif;	n/a	#341 #383
Korean	ko-KR	font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans_serif;	n/a	#349 #383
Thai	th	font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif;	n/a	#348 #383
Vietnamese	vi	font-family: 'Libre Franklin', sans-serif;	@philiparthurmoore	#347 #383

👨‍💻 Implementation in progress done

[grappler]

@nielslange Is there a reason why we want to load a seperate CSS file for each language instead of doing it how it was done in Twenty Seventeen? https://github.com/WordPress/twentyseventeen/blob/master/style.css#L584

[nielslange]

@nielslange Is there a reason why we want to load a seperate CSS file for each language instead of doing it how it was done in Twenty Seventeen? https://github.com/WordPress/twentyseventeen/blob/master/style.css#L584

@grappler I decided to outsource the language support to avoid that all additional languages get loaded all the time. I don't see any benefits in loading Cyrillic, Greek, Hebrew, etc. when the site language is set to English. Given the fact that on language CSS file has 80+ lines of code, we would load 900+ extra lines of code, that are not necessary for languages with a Latin character set. What issues do you see handling the language support by separate files?

[kjellr]

Thanks @nielslange for getting all these PRs up and running. Just noting that I've updated the main issue above to include links to each PR: That way we can use this thread to keep track of which ones have been tested, approved, and merged.

[nielslange]

Thanks @nielslange for getting all these PRs up and running. Just noting that I've updated the main issue above to include links to each PR: That way we can use this thread to keep track of which ones have been tested, approved, and merged.

Thanks, @kjellr!

@nielslange If you're referring to Vietnamese then yes, I'm happy to test it. If you're referring to other languages then go for it. I'm only interested in Vietnamese.

@philiparthurmoore Feel free to test the Vietnamese implementation, which can be found on #347.

[philiparthurmoore]

@nielslange Thanks a ton - I'll take care of that on Saturday.

[joyously]

You do know that you can get the user's installed font by using serif or sans-serif or monotype, right? There isn't a need to specify specific fonts if you are going for a generic look, and the user would get whatever font they chose in their browser. Big impact with very little CSS.

[allancole]

The proposed solution for the is very thorough, which is great but I think @joyously’s suggestion might be ideal here. I’m worried that adding so many additional language-specific font-styles would be really difficult to maintain and keep in-sync with the theme’s selectors. Twenty Seventeen only had one font, so there’s far fewer selectors to consider compared to Twenty Nineteen, where we have 2 fonts that get switched back and forth depending on context.

As suggested, if we rely on the browser’s font setting for non-en languages, then something like this would be more simple and wouldn’t add nearly as much CSS weight if it were included in style.css directly:

/* if language doesn’t start with en- (any site thats _not_ in english) */
html:not([lang^="en-"]) * {
  font-family: sans-serif;
}

If that’s too aggressive, we could also go with something more specific that still skips over the theme’s selectors. This would still cut down on the number of selectors needed to support languages for fonts and it’d be small enough to include in the main stylesheet too:

/* Arabic */
html[lang="fa-IR"] *,
html[lang="ur"] * {
  font-family: Tahoma, Arial, sans-serif;
}

/* Korean */
html[lang="ko_KR"] * {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans_serif;
}

Curious what your thoughts are on this @philiparthurmoore & @nielslange. I tried both snippets in my Chrome/Mac os browser but not sure how well it would work everywhere in real-world scenarios.

[philiparthurmoore]

@allancole I'd be more in favor of a sans-serif and serif only approach for the reasons both you and @joyously have outlined. Maintainability is worth avoiding over-engineering this. That said, you're the designer. If keeping it too simple means compromising on an already minimal design then I'd probably be okay with the more involved approach.

[nielslange]

@allancole In general I like the idea of unsins less code to keep the language support maintainable. Your code snippets above will not work due to CSS Specificity. Having said that, if you add !important to your statements it should work. I’m not a fan of using !important in general, but in favor of keeping the CSS code short, I’m happy to use it. 😉

I’m on the road currently, but will adjust the code later today.

[mayukojpn]

Hi @nielslange ! If it enqueues css separately, I suggest renaming the folder to css like what js does. Or, you might need to add s to make it languages - it was .pot location of default themes older than Twenty Sixteen.

[waviaei]

Hi! Sorry, I just couldn't find a time to follow up after submitting the issue. Huge thanks in recognizing and considering this issue, and great to see this moving forward.

[nielslange]

I've closed all single language support PRs in favour of #383.

@slaFFik Feel free to test the Cyrillic implementation.
@philiparthurmoore Feel free to test the Vietnamese implementation.
@mirucon Would you mind testing the Japanese implementation?