You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently we use Mona Sans as the sans-serif font. This works great for latin based languages. But for other languages (e.g. Japanese), the browser falls back to a "system" font. Hiragino Sans seems to be the default font on macOS for Japanese.
As a fallback that's fine too, but we got feedback that switching to another font would be preferred (Noto Sans JP in Japanese's case).
Possible solution
Maybe similar to the ThemeProvider, there could be a <FontProvider>:
<FontProviderlang="ja">
Japanese goes here
</FontProvider>
Which we then can use as a hook to change the --brand-fontStack-sansSerif variable:
[data-font="ja"] {
--brand-fontStack-sansSerif:'Noto Sans JP', sans-serif;
}
Also saw that https://docs.github.com/ja offers a language switcher as part of the nav. Which could also be used to swap the font for certain languages, but it's a bit bigger in scope.
Urgency
As mentioned in https://github.com/github/primer/issues/2545#issuecomment-1714921015, it should be possible to override the font directly in a project. So it might not be that urgent to support in Primer Brand. But once GitHub starts to add more multi language support, then it might be nice to have.
The text was updated successfully, but these errors were encountered:
This came up in https://github.com/github/primer/issues/2545.
Problem
Currently we use
Mona Sans
as the sans-serif font. This works great for latin based languages. But for other languages (e.g. Japanese), the browser falls back to a "system" font. Hiragino Sans seems to be the default font on macOS for Japanese.As a fallback that's fine too, but we got feedback that switching to another font would be preferred (Noto Sans JP in Japanese's case).
Possible solution
Maybe similar to the ThemeProvider, there could be a
<FontProvider>
:It would load Noto Sans JP from Google Fonts:
and add a
data-font="ja"
attribute:Which we then can use as a hook to change the
--brand-fontStack-sansSerif
variable:Also saw that https://docs.github.com/ja offers a language switcher as part of the nav. Which could also be used to swap the font for certain languages, but it's a bit bigger in scope.
Urgency
As mentioned in https://github.com/github/primer/issues/2545#issuecomment-1714921015, it should be possible to override the font directly in a project. So it might not be that urgent to support in Primer Brand. But once GitHub starts to add more multi language support, then it might be nice to have.
The text was updated successfully, but these errors were encountered: