diff --git a/src-python/config.py b/src-python/config.py
index 74e0e7c0..ab836dd8 100644
--- a/src-python/config.py
+++ b/src-python/config.py
@@ -3,8 +3,6 @@ import inspect
 from os import path as os_path, makedirs as os_makedirs
 from json import load as json_load
 from json import dump as json_dump
-import tkinter as tk
-from tkinter import font
 from models.transcription.transcription_utils import device_manager
 from models.transcription.transcription_languages import transcription_lang
 from utils import generatePercentageStringsList, isUniqueStrings
@@ -399,12 +397,9 @@ class Config:
 
     @FONT_FAMILY.setter
     def FONT_FAMILY(self, value):
-        root = tk.Tk()
-        root.withdraw()
-        if value in list(font.families()):
+        if isinstance(value, str):
             self._FONT_FAMILY = value
             saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value)
-        root.destroy()
 
     @property
     @json_serializable('UI_LANGUAGE')
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 7bb53643..bfad02cd 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -10,8 +10,44 @@ fn main() {
             app.get_window("main").unwrap().open_devtools(); // `main` is the first window from tauri.conf.json without an explicit label
             Ok(())
         })
+        .invoke_handler(tauri::generate_handler![get_font_list])
         // .invoke_handler(tauri::generate_handler![greet, run_python_script])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 
 }
+
+use std::fs;
+use std::env;
+
+#[tauri::command]
+fn get_font_list() -> Vec<String> {
+    // システム全体のフォントディレクトリ
+    let system_font_dir = "C:\\Windows\\Fonts";
+    // ユーザーローカルのフォントディレクトリ
+    let local_font_dir = format!("{}\\Microsoft\\Windows\\Fonts", env::var("LOCALAPPDATA").unwrap());
+
+    let mut fonts = Vec::new();
+
+    // システムフォントとユーザーフォントのディレクトリをチェック
+    let font_dirs = vec![system_font_dir, &local_font_dir];
+
+    for dir in font_dirs {
+        if let Ok(entries) = fs::read_dir(dir) {
+            for entry in entries {
+                if let Ok(entry) = entry {
+                    let path = entry.path();
+                    if let Some(extension) = path.extension() {
+                        if extension == "ttf" || extension == "otf" {
+                            if let Some(font_name) = path.file_stem() {
+                                fonts.push(font_name.to_string_lossy().to_string());
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    fonts
+}
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 28cd4be8..c36ea6a2 100644
--- a/src-ui/app/App.jsx
+++ b/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 };
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index ee5c7bd2..2c14f4da 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/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}
+        />
+    );
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useSelectedFontFamily.js b/src-ui/logics/configs/useSelectedFontFamily.js
new file mode 100644
index 00000000..bfb43029
--- /dev/null
+++ b/src-ui/logics/configs/useSelectedFontFamily.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedFontFamily } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedFontFamily = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedFontFamily, updateSelectedFontFamily, pendingSelectedFontFamily } = useStore_SelectedFontFamily();
+
+    const getSelectedFontFamily = () => {
+        pendingSelectedFontFamily();
+        asyncStdoutToPython("/get/data/font_family");
+    };
+
+    const setSelectedFontFamily = (selected_font_family) => {
+        pendingSelectedFontFamily();
+        asyncStdoutToPython("/set/data/font_family", selected_font_family);
+    };
+
+    return {
+        currentSelectedFontFamily,
+        getSelectedFontFamily,
+        updateSelectedFontFamily,
+        setSelectedFontFamily,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index c74e6681..bfc06aea 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -25,6 +25,7 @@ import { useMicThreshold } from "@logics_configs/useMicThreshold";
 import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
@@ -75,6 +76,7 @@ export const useReceiveRoutes = () => {
     } = useVolume();
 
     const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
+    const { updateSelectedFontFamily } = useSelectedFontFamily();
 
 
     const routes = {
@@ -208,6 +210,9 @@ export const useReceiveRoutes = () => {
         "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
         "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
 
+        "/get/data/font_family": updateSelectedFontFamily,
+        "/set/data/font_family": updateSelectedFontFamily,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
diff --git a/src-ui/store.js b/src-ui/store.js
index 7afbd47c..e21379f0 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -172,6 +172,8 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
 export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
 export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
+export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
+export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
 
 
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");