Merge pull request #3642 from taku0/font-family-by-language

CONTRIBUTORS.md

@@ -51,6 +51,7 @@
  - [GodTamIt](https://github.com/GodTamIt)
  - [MinecraftPlaye](https://github.com/MinecraftPlaye)
  - [Matthew Jones](https://github.com/matthew-jones-uk)
+ - [taku0](https://github.com/taku0)
 
 # Emby Contributors
 

package.json

@@ -69,6 +69,7 @@
     "@fontsource/noto-sans-jp": "4.5.2",
     "@fontsource/noto-sans-kr": "4.5.2",
     "@fontsource/noto-sans-sc": "4.5.2",
+    "@fontsource/noto-sans-tc": "4.5.2",
     "blurhash": "1.1.4",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.3.1",

src/assets/css/fonts.scss

@@ -1,18 +1,38 @@
 @import "../../styles/noto-sans/index.scss";
 
 @mixin font($weight: null, $size: null) {
-    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
     font-weight: $weight;
     font-size: $size;
 }
 
 html {
     @include font($size: 93%);
+    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
 
+html[lang|="ja"] {
+    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans HK", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="ko"] {
+    font-family: "Noto Sans", "Noto Sans KR", "Noto Sans HK", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="zh-CN"] {
+    font-family: "Noto Sans", "Noto Sans SC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", sans-serif;
+}
+
+html[lang|="zh-TW"] {
+    font-family: "Noto Sans", "Noto Sans TC", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
+}
+
+html[lang|="zh-HK"] {
+    font-family: "Noto Sans", "Noto Sans HK", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", sans-serif;
+}
+
 h1 {
     @include font(400, 1.8em);
 }

src/scripts/globalize.js

@@ -1,7 +1,7 @@
 import { Events } from 'jellyfin-apiclient';
 import isEmpty from 'lodash-es/isEmpty';
 
-import * as userSettings from './settings/userSettings';
+import { currentSettings as userSettings } from './settings/userSettings';
 
 /* eslint-disable indent */
 

src/scripts/site.js

@@ -274,11 +274,24 @@ async function onAppReady() {
             }
         };
 
-        Events.on(ServerConnections, 'localusersignedin', handleStyleChange);
-        Events.on(ServerConnections, 'localusersignedout', handleStyleChange);
+        const handleLanguageChange = () => {
+            const locale = globalize.getCurrentLocale();
+
+            document.documentElement.setAttribute('lang', locale);
+        };
+
+        const handleUserChange = () => {
+            handleStyleChange();
+            handleLanguageChange();
+        };
+
+        Events.on(ServerConnections, 'localusersignedin', handleUserChange);
+        Events.on(ServerConnections, 'localusersignedout', handleUserChange);
         Events.on(currentSettings, 'change', (e, prop) => {
             if (prop == 'disableCustomCss' || prop == 'customCss') {
                 handleStyleChange();
+            } else if (prop == 'language') {
+                handleLanguageChange();
             }
         });
 

src/styles/noto-sans/index.scss

@@ -28,3 +28,6 @@ $weight-names: (100: "Thin", 200: "ExtraLight", 300: "Light", 400: "Regular", 50
 // SC character set
 @import "./sc-400-normal";
 @import "./sc-700-normal";
+// TC character set
+@import "./tc-400-normal";
+@import "./tc-700-normal";