Gutenberg: Better support for localized fonts

[naokomc]

Currently, Gutenberg has an option to turn on or off Noto Sans Serif font.
https://github.com/WordPress/gutenberg/blob/master/lib/client-assets.php#L641

However, Google Fonts now offers Noto Sans JP and Noto Serif JP, one of which would be a better choice for Japanese text.

The ideal solution:

• For ja sites, load Noto Sans JP or Noto Serif JP instead of Noto Serif
• Only load 400 & 700 varieties - Noto Sans|Serif JP doesn't have italics option

Ref: Twenty Seventeen's font support improvemet
https://github.com/WordPress/twentyseventeen/issues/59

I'd like to hear from these locale users (I took the list from the above ticket) about which font choice is the best for them. Google Fonts alternative or any other fonts?

For Japanese, we'll need to do some test on Windows/iOS/Android with Noto Sans|Serif JP fonts to decide which one looks better.

• [ ] Cyrillic
• [ ] Greek
• [ ] Hebrew
• [ ] Arabic
• [ ] Vietnamese
• [ ] Thai
• [ ] Japanese
• [ ] Korean (can probably use the same solution as JP with Noto Sans|Serif KR)
• [ ] Chinese
• [ ] Devanagari
• [ ] Gujarati

Related: #6099

cc: @mayukojpn @nukaga @ixkaito

[ckxpress]

that would be cool Noto Sans also supports Korean and Chinese

[fierevere]

there are no problems with Cyrillic Noto fonts , Windows/Linux/Android is fine. I cant say for iOS, because i dont own any device, but on mentioned platforms its good default font of choice.

Noto JP fonts have no support for Cyrillic, and shouldnt be used for us.

[mayukojpn]

@naokomc @nukaga @ixkaito
I created bookmarklets for applying Noto fonts on browsers. Do you have any suggestion for place of I post it and ask designers to test?
https://gist.github.com/mayukojpn/77b113bd05d39974c33c4c2aa11cd570

[kosvrouvas]

Νο problems with Greek for Noto Sans/Serif, but Noto JP fonts do not have support for Greek.

[mkaz]

I welcome feedback on my approach in #11826 - it was easiest to code it up to explain the idea best, I'm open to alternates. It assumes we want to leave the control in the hands of the translators.

The solution adds additional fields to specify which font to load from Google, and a field to specify the font-family loaded, since it might be different.

For example the Google font to load would be Noto Sans JP:400,700 and the default CSS font-family would be Noto Sans JP

[naokomc]

I think this solution works for this purpose, and I like that translator will be able to specify the font.

For languages with no Noto family option (e.g. Arabic, Hebrew) but other Google font alternatives, should we allow them to chose the one they like? If so, the comment " Translators: Use this to specify the proper Noto font family that is supported by your language" might need to be changed slightly.

[mkaz]

@naokomc I switched the translation to not include the Noto name.

Changed field to: Google Font Name and Variants

I also simplified so a translator wouldn't have a separate field to set to "off", if they set the same field to "off" then it won't load and should use default system font.

[mtias]

Marking this as "in progress".

[danstramer]

Has this progressed? For Hebrew, the currently displayed font "out of the box" is a bad looking Serif font

[mkaz]

@danstramer The ability to switch the font based on a locale translation is in place, it was deployed in #11826 - this still requires each locale to translate and supply a different font that looks best for that language.

Is there a specific language that isn't looking good, or just a general dislike of the Serif font?

[danstramer]

Hi @mkaz , thanks for reaching back.
Google has the Noto project which they have localized their font for 100's of languages.
https://www.google.com/get/noto/
So that could be an option, to localize for hebrew, or using one of the other google fonts with hebrew/english support like; 'Asisstant' or 'Heebo'
Or just default to 'arial' or system font stack (which won't load any external resources):
https://woorkup.com/system-font/;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
Thanks

[mkaz]

The default editor font is Noto Serif exactly for the reason of major languages support. However, some languages work better in the Noto Sans font, and hopeful the translations get updated to use those. @naokomc and the Internationization team might be able to respond to those efforts.

Themes also have the ability to override the editor font, ideally to match the front-end being displayed. For example, you can see this using the Twenty Nineteen theme.

[danstramer]

Noto Serif is not a good option for Hebrew. 'Noto Sans Hebrew' would be a better font if going down the Noto font path.
Till now, I've been changing the editor's font via a childsheet css, but going forward I think that out of the box Gutenberg should support and display a modern looking font for Hebrew.
2019 uses this font stack:
font-family: 'Arial Hebrew', Arial, sans-serif !important;
Which is OK, but I think that even the default one:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
Would be even better.
How can I help with that?

[naokomc]

@danstramer - Hebrew GTE @yoavf took a look and updated this and this to make the font choices more suitable for the language.

[danstramer]

excellent! Thank you @naokomc , has this been merged already?

[naokomc]

@danstramer the change will be delivered through the language pack of WordPress core. The most current package is already up-to-date, so if you want to see it on your site please update the translations from your dashboard.