fix: improve default font family

[liberaldev]

Currently, elk's font-family is based on the @unocss/reset/tailwind.css file. The font-family in tailwind css is Mac-centric and does not take into account the Windows environment (specifically the CJK Windows environment).

The biggest problem with the font-family in tailwind css is the presence of system-ui, which breaks readability in the CJK windowing environment. In addition to breaking readability on Windows(https://infinnie.github.io/blog/2017/systemui.html), system-ui does not take advantage of the ability to change fonts based on lang attributes.

Current ELK client. Because of system-ui, it renders Malgun Gothic(This is Korean font. This is not japanese font) instead of Japanese fonts, and the Japanese readability of Malgun Gothicc is horrible.

After removing system-ui, the correct Japanese font is loaded.

This PR fixes this issue.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	9f38a7d
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/64d2365dd81e760008fab360
😎 Deploy Preview	https://deploy-preview-2314--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	9f38a7d
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/64d2365d9ecc890008085ea8

[last-partizan]

Oh, that's unfortunate change.

I noticed that elk font changed from my standard system font to something different, and traced the change to this PR.

If the change targeted only at windows, maybe there is a way to apply it only to windows?

I can make a PR using following approach: https://stackoverflow.com/questions/27704917/apply-css-only-for-linux-chrome-but-not-for-windows-chrome if that's considered a good idea.

[liberaldev]

Oh, that's unfortunate change.

I noticed that elk font changed from my standard system font to something different, and traced the change to this PR.

If the change targeted only at windows, maybe there is a way to apply it only to windows?

I can make a PR using following approach: https://stackoverflow.com/questions/27704917/apply-css-only-for-linux-chrome-but-not-for-windows-chrome if that's considered a good idea.

The current font family is also the system font. However, if you have any of Segoe UI, Roboto, Helvetica Neue, Arial, or Noto Sans installed on your system, the fonts will be rendered in the aforementioned order. Which OS do you use?

[last-partizan]

I'm using Linux, with Gnome and my system font is not standard one, but custom one "Nokia Sans S60". So it works only when using generic family like system-ui or ui-sans-serif.

[liberaldev]

I'm using Linux, with Gnome and my system font is not standard one, but custom one "Nokia Sans S60". So it works only when using generic family like system-ui or ui-sans-serif.

If you want to use the Nokia Sans S60 font, install the stylus extension (Firefox: https://addons.mozilla.org/ko/firefox/addon/styl-us/, Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) and apply the following CSS. It's open source, so there are no privacy concerns.(https://github.com/openstyles/stylus)

html { font-family: "Nokia Sans S60", system-ui, sans-serif; }

If you're not font specific and want to use the system-ui font, use the code below.

html { font-family: system-ui, sans-serif; }

[last-partizan]

Yeah, that works.

Thank you.