[Update] Add Font Family.

src-ui/app/App.jsx

@@ -15,6 +15,7 @@ export const App = () => {
             <ConfigPage />
             <MainPage />
             <UiSizeController />
+            <FontFamilyController />
         </div>
     );
 };
@@ -33,6 +34,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
 import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -47,6 +49,7 @@ const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
+    const { asyncFetchFonts } = useAsyncFetchFonts();
 
     const { getMicHostList } = useMicHostList();
     const { getMicDeviceList } = useMicDeviceList();
@@ -66,6 +69,7 @@ const StartPythonFacadeComponent = () => {
     const { getUiLanguage } = useUiLanguage();
     const { getUiScaling } = useUiScaling();
     const { getMessageLogUiScaling } = useMessageLogUiScaling();
+    const { getSelectedFontFamily } = useSelectedFontFamily();
 
     const {
         getSelectedPresetTabNumber,
@@ -89,6 +93,9 @@ const StartPythonFacadeComponent = () => {
                 getIsMainPageCompactMode();
                 getMessageInputBoxRatio();
 
+                asyncFetchFonts();
+                getSelectedFontFamily();
+
                 getSoftwareVersion();
 
                 getSelectedPresetTabNumber();
@@ -191,7 +198,31 @@ const UiSizeController = () => {
 
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", `${font_size}%`);
+        document.documentElement.style.setProperty("font-family", `Yu Gothic UI`);
     }, [currentUiScaling.data]);
 
     return null;
+};
+
+
+const FontFamilyController = () => {
+    const { currentSelectedFontFamily } = useSelectedFontFamily();
+    useEffect(() => {
+        document.documentElement.style.setProperty("font-family", `${currentSelectedFontFamily.data}`);
+    }, [currentSelectedFontFamily.data]);
+
+    return null;
+};
+
+import { useStore_SelectableFontFamilyList } from "@store";
+import { arrayToObject } from "@utils/arrayToObject";
+
+import { invoke } from "@tauri-apps/api/tauri";
+const useAsyncFetchFonts = () => {
+    const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
+    const asyncFetchFonts = async () => {
+        const fonts = await invoke("get_font_list");
+        updateSelectableFontFamilyList(arrayToObject(fonts));
+    };
+    return { asyncFetchFonts };
 };

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -25,6 +25,7 @@ export const Appearance = () => {
             <UiLanguageContainer />
             <UiScalingContainer />
             <MessageLogUiScalingContainer />
+            <FontFamilyContainer />
 
 
 
@@ -184,4 +185,28 @@ const MessageLogUiScalingContainer = () => {
             track={false}
         />
     );
+};
+import { useStore_SelectableFontFamilyList } from "@store";
+import { DropdownMenuContainer } from "../components/useSettingBox";
+import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
+const FontFamilyContainer = () => {
+    const { t } = useTranslation();
+    const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
+
+    const selectFunction = (selected_data) => {
+        setSelectedFontFamily(selected_data.selected_id);
+    };
+    const { currentSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="font_family"
+            label={t("config_page.font_family.label")}
+            desc={t("config_page.font_family.label")}
+            selected_id={currentSelectedFontFamily.data}
+            list={currentSelectableFontFamilyList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedFontFamily.state}
+        />
+    );
 };