add custom font system-ui

package-lock.json

@@ -7,7 +7,6 @@
             "name": "VRCX",
             "license": "MIT",
             "dependencies": {
-                "@fontsource-variable/noto-sans": "^5.2.10",
                 "hazardous": "^0.3.0",
                 "node-api-dotnet": "^0.9.18"
             },
@@ -2076,15 +2075,6 @@
                 "url": "https://github.com/sponsors/ayuhito"
             }
         },
-        "node_modules/@fontsource-variable/noto-sans": {
-            "version": "5.2.10",
-            "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans/-/noto-sans-5.2.10.tgz",
-            "integrity": "sha512-wyFgKkFu7jki5kEL8qv7avjQ8rxHX0J/nhLWvbR9T0hOH1HRKZEvb9EW9lMjZfWHHfEzKkYf5J+NadwgCS7TXA==",
-            "license": "OFL-1.1",
-            "funding": {
-                "url": "https://github.com/sponsors/ayuhito"
-            }
-        },
         "node_modules/@fontsource-variable/noto-sans-jp": {
             "version": "5.2.10",
             "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.10.tgz",

package.json

@@ -178,8 +178,7 @@
         }
     },
     "dependencies": {
-        "@fontsource-variable/noto-sans": "^5.2.10",
         "hazardous": "^0.3.0",
         "node-api-dotnet": "^0.9.18"
     }
-}
+}

src/localization/en.json

@@ -553,12 +553,13 @@
                     "bio_language": "Target Language",
                     "theme_mode": "Theme",
                     "font_family": "Font",
-                    "font_family_tooltip": "Does not change CJK fonts",
+                    "font_family_tooltip": "Only the system font affects CJK characters",
                     "font_family_inter": "Inter",
                     "font_family_noto_sans": "Noto Sans",
                     "font_family_source_sans_3": "Source Sans 3",
                     "font_family_ibm_plex_sans": "IBM Plex Sans",
                     "font_family_harmonyos_sans": "HarmonyOS Sans",
+                    "font_family_system_ui": "System Font",
                     "theme_mode_system": "System",
                     "theme_mode_light": "Light",
                     "theme_mode_dark": "Dark",

src/shared/constants/fonts.js

@@ -6,8 +6,9 @@ const APP_FONT_CONFIG = Object.freeze({
         link: null
     },
     noto_sans: {
-        cssName: "'Noto Sans Variable'",
+        cssName: "'Noto Sans'",
-        link: null
+        cssImport:
+            "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');"
     },
     source_sans_3: {
         cssName: "'Source Sans 3'",
@@ -23,6 +24,10 @@ const APP_FONT_CONFIG = Object.freeze({
         cssName: "'HarmonyOS Sans'",
         cssImport:
             "@import url('https://fonts.cdnfonts.com/css/harmonyos-sans');"
+    },
+    system_ui: {
+        cssName: 'system-ui',
+        link: null
     }
 });
 

src/styles/fonts.css

@@ -1,5 +1,4 @@
 @import '@fontsource-variable/inter';
-@import '@fontsource-variable/noto-sans';
 
 @import '@fontsource-variable/noto-sans-jp';
 @import '@fontsource-variable/noto-sans-kr';

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -50,9 +50,12 @@
                     </SelectTrigger>
                     <SelectContent>
                         <SelectGroup>
-                            <SelectItem v-for="fontKey in appFontFamilyOptions" :key="fontKey" :value="fontKey">
+                            <template v-for="option in appFontFamilyOptions" :key="option.key">
-                                {{ t(`view.settings.appearance.appearance.font_family_${fontKey}`) }}
+                                <SelectSeparator v-if="option.type === 'separator'" />
-                            </SelectItem>
+                                <SelectItem v-else :value="option.key">
+                                    {{ t(`view.settings.appearance.appearance.font_family_${option.key}`) }}
+                                </SelectItem>
+                            </template>
                         </SelectGroup>
                     </SelectContent>
                 </Select>
@@ -427,8 +430,16 @@
 </template>
 
 <script setup>
+    import {
+        Select,
+        SelectContent,
+        SelectGroup,
+        SelectItem,
+        SelectSeparator,
+        SelectTrigger,
+        SelectValue
+    } from '@/components/ui/select';
     import { ListboxContent, ListboxFilter, ListboxItem, ListboxItemIndicator, ListboxRoot, useFilter } from 'reka-ui';
-    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import {
         NumberField,
         NumberFieldContent,
@@ -522,7 +533,14 @@
         setAppFontFamily
     } = appearanceSettingsStore;
 
-    const appFontFamilyOptions = APP_FONT_FAMILIES;
+    const appFontFamilyOptions = computed(() => {
+        const fontKeys = APP_FONT_FAMILIES.filter((key) => key !== 'system_ui');
+        return [
+            ...fontKeys.map((key) => ({ type: 'item', key })),
+            { type: 'separator', key: 'separator-system-ui' },
+            { type: 'item', key: 'system_ui' }
+        ];
+    });
 
     const zoomLevel = ref(100);
     const isLinux = computed(() => LINUX);