[Feature request] Add support for other fonts

[simurai]

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>:

<FontProvider lang="ja">
    Japanese goes here
</FontProvider>

It would load Noto Sans JP from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">

and add a data-font="ja" attribute:

<div data-font="ja">
    Japanese goes here
</div>

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.