font-family

package-lock.json

@@ -7,6 +7,7 @@
             "name": "VRCX",
             "license": "MIT",
             "dependencies": {
+                "@fontsource-variable/inter": "^5.2.8",
                 "hazardous": "^0.3.0",
                 "node-api-dotnet": "^0.9.18"
             },
@@ -2335,6 +2336,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@fontsource-variable/inter": {
+            "version": "5.2.8",
+            "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+            "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
         "node_modules/@gar/promisify": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

package.json

@@ -158,6 +158,7 @@
         }
     },
     "dependencies": {
+        "@fontsource-variable/inter": "^5.2.8",
         "hazardous": "^0.3.0",
         "node-api-dotnet": "^0.9.18"
     }

src/app.css

@@ -7,6 +7,7 @@ For a copy, see <https://opensource.org/licenses/MIT>.
 */
 
 @import 'tailwindcss';
+@import '@fontsource-variable/inter';
 
 @import 'element-plus/dist/index.css';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
@@ -18,6 +19,38 @@ For a copy, see <https://opensource.org/licenses/MIT>.
 @import './assets/scss/animated-emoji.css';
 @import './assets/scss/fonts.css';
 
+:root {
+    --font-western:
+        'ellipsis-font', -apple-system, 'Inter Variable', 'Segoe UI', 'Roboto',
+        'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
+    --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --font-fallback-cjk: sans-serif;
+    --font-primary-cjk:
+        'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', 'Noto Sans TC';
+}
+:root[lang='zh-CN'] {
+    --font-primary-cjk:
+        'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC';
+}
+:root[lang='ja'] {
+    --font-primary-cjk:
+        'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC';
+}
+:root[lang='ko'] {
+    --font-primary-cjk:
+        'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC';
+}
+:root[lang='zh-TW'] {
+    --font-primary-cjk:
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC';
+}
+body {
+    font-family:
+        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
+        var(--font-fallback-cjk);
+    margin: 0;
+}
+
 :root {
     text-autospace: normal;
 }
@@ -32,46 +65,6 @@ html {
     overflow: hidden;
 }
 
-body {
-    font-family:
-        'ellipsis-font', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
-        'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
-    margin: 0;
-}
-
-html[lang='ja'] body,
-html[lang='ja'] * {
-    font-family:
-        'ellipsis-font', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
-        'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
-}
-
-html[lang='ko'] body,
-html[lang='ko'] * {
-    font-family:
-        'ellipsis-font', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC',
-        'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
-}
-
-html[lang='zh-CN'] body,
-html[lang='zh-CN'] * {
-    font-family:
-        'ellipsis-font', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
-        'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
-}
-
-html[lang='zh-TW'] body,
-html[lang='zh-TW'] * {
-    font-family:
-        'ellipsis-font', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP',
-        'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
-}
-
 a {
     color: #409eff;
 }

src/vr/vr.css

@@ -7,6 +7,7 @@ For a copy, see <https://opensource.org/licenses/MIT>.
 */
 
 @import 'tailwindcss';
+@import '@fontsource-variable/inter';
 
 @import 'animate.css/animate.min.css';
 @import 'noty/lib/noty.css';
@@ -30,36 +31,35 @@ body {
     margin: 0;
 }
 
-html[lang='ja'] body,
+:root {
-html[lang='ja'] * {
+    --font-western:
-    font-family:
+        'ellipsis-font', -apple-system, 'Inter Variable', 'Segoe UI', 'Roboto',
-        'ellipsis-font', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
+        'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
-        'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
+    --font-symbol: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        sans-serif;
+    --font-fallback-cjk: sans-serif;
+    --font-primary-cjk:
+        'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR', 'Noto Sans TC';
 }
-
+:root[lang='zh-CN'] {
-html[lang='ko'] body,
+    --font-primary-cjk:
-html[lang='ko'] * {
+        'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC';
-    font-family:
-        'ellipsis-font', 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC',
-        'Noto Sans SC', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
 }
-
+:root[lang='ja'] {
-html[lang='zh-CN'] body,
+    --font-primary-cjk:
-html[lang='zh-CN'] * {
+        'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC';
-    font-family:
-        'ellipsis-font', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
-        'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
-        sans-serif;
 }
-
+:root[lang='ko'] {
-html[lang='zh-TW'] body,
+    --font-primary-cjk:
-html[lang='zh-TW'] * {
+        'Noto Sans KR', 'Noto Sans JP', 'Noto Sans TC', 'Noto Sans SC';
+}
+:root[lang='zh-TW'] {
+    --font-primary-cjk:
+        'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC';
+}
+body {
     font-family:
-        'ellipsis-font', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP',
+        var(--font-western), var(--font-symbol), var(--font-primary-cjk),
-        'Noto Sans KR', 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', system-ui,
+        var(--font-fallback-cjk);
-        sans-serif;
 }
 
 .noty_body {