Translations: fonts that support other languages (specifically Japanese)

[lwasser]

During our sprint today, @flpm noticed that an error popping up with the packaging guide build (specific to Japanese translation) might be a font / missing character issue.

By default we are using the Google Font Poppins which does NOT have a Japanese character base. We might want to vendor another font, that supports Japanese and add it as an fallback to our css styles

font-family: "Poppins", san-serif

and maybe instead we vendor another font and do
font-family: "Poppins", "another-font", san-serif

[flpm]

Here is a sample of the Warnings that appear during building:

/home/runner/work/python-package-guide/python-package-guide/.nox/build-release-languages/lib/python3.9/site-packages/sphinxext/opengraph/socialcards.py:179: UserWarning: Glyph 12497 (\N{KATAKANA LETTER PA}) missing from font(s) Roboto Flex.
  fig.savefig(path, facecolor=None)
/home/runner/work/python-package-guide/python-package-guide/.nox/build-release-languages/lib/python3.9/site-packages/sphinxext/opengraph/socialcards.py:179: UserWarning: Glyph 12483 (\N{KATAKANA LETTER SMALL TU}) missing from font(s) Roboto Flex.
  fig.savefig(path, facecolor=None)
/home/runner/work/python-package-guide/python-package-guide/.nox/build-release-languages/lib/python3.9/site-packages/sphinxext/opengraph/socialcards.py:179: UserWarning: Glyph 12465 (\N{KATAKANA LETTER KE}) missing from font(s) Roboto Flex.
  fig.savefig(path, facecolor=None)
/home/runner/work/python-package-guide/python-package-guide/.nox/build-release-languages/lib/python3.9/site-packages/sphinxext/opengraph/socialcards.py:179: UserWarning: Glyph 12540 (\N{KATAKANA-HIRAGANA PROLONGED SOUND MARK}) missing from font(s) Roboto Flex.
  fig.savefig(path, facecolor=None)

[lwasser]

Here is an example of a page rendered in Firefox on a mac . Note that the font of choice on my machine is

Hiragino Kaku Gothic ProN

[flpm]

On my computer, (Firefox/Pop OS), the font used is Noto Sans CJK JP.

[lwasser]

@tkoyama010 do you happen to know which fonts might be ideal to support Japanese characters? We can vendor another font to support what is missing, potentially. 🙌🏻

[flpm]

Our current font config in CSS:

  /* Fonts (overrides base theme) */
  --pst-font-family-heading: "Poppins", sans-serif;
  --pst-font-family-base: "Poppins", sans-serif;
  --pyos-font-family-h1: "Itim", serif;

Since Poppins does not support Japanese and we don't specify any other option, the browser is selecting a font from the sans-serif family. That would explain why the fonts in Linux, Mac and the font picked during the build in sphinx are all different.

[lwasser]

I've posted about this issue on Slack. Let's give it a few days, and if no one replies there or knows, I can then post on social. surely someone else can help! OR we can try what i found below:

This font (Noto Sans Japanese) - https://fonts.google.com/noto/specimen/Noto+Sans+JP?preview.text=noto
We could potentially vendor it and use it as a css fallback to see if it resolves the errors and renders properly?

[sneakers-the-rat]

i figure the technology wizards in this group can figure out how to embed the font, but also just sharing a cool tool i like - this thing makes it very easy to embed a google font without leaking information to google on every page load :) generates the download for you and the css to just copy/paste : https://gwfh.mranftl.com/fonts

omg font decisions are so hard to make especially when u don't read the language, i have no idea what looks good in a Japanese font! that Noto Sans looks good to me but also i have no frame of reference.

[ZacWarham]

Someone reached out to me because I'm learning Japanese at the moment asking for me to provide my opinion here between Noto Sans JP and M Plus.

For me as a learner, Noto Sans JP is better because it's more simple. The M Plus has a few extra accents that make it trickier for a learner to understand. Granted, I doubt they're an issue for native speakers. I also asked a Japanese friend and they said they prefer Noto Sans as well.

From the few times I've worked with Japanese computers in my IT roles, most windows users just use the default font that comes with the Windows IME keyboard/language pack.

But that's my 2 cents as a foreigner so take my comments with a grain of salt, hopefully more native speakers can provide better feedback

[lwasser]

@all-contributors please add @ZacWarham for idea, review

@ZacWarham thank you so much for this. It seems like we might have a consensus here around trying Noto Sans JP!

Also @sneakers-the-rat - that site is awesome! It will make the vendoring part a lot easier. I am going to create a subissue here to vendor and use Noto Sans JP as a fall back!! And link to that helper site too!!

[allcontributors]

@lwasser

I've put up a pull request to add @ZacWarham! 🎉

[chendaniely]

Comment from my Japanese friend who does Japanese <> English translations

Common ones are mincho which is equivalent to Times Roman, and meiryo which is more like Tahoma
Noto... To me it looks like Ariel-equivalent

[tkoyama010]

@tkoyama010 do you happen to know which fonts might be ideal to support Japanese characters? We can vendor another font to support what is missing, potentially. 🙌🏻

https://mplusfonts.github.io/ is awesome!