diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index e456d6c7..ab8f49a0 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -143,7 +143,6 @@ const UiSizeController = () => {
 
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", `${font_size}%`);
-        document.documentElement.style.setProperty("font-family", `Yu Gothic UI`);
     }, [currentUiScaling.data]);
 
     return null;
@@ -153,7 +152,7 @@ const UiSizeController = () => {
 const FontFamilyController = () => {
     const { currentSelectedFontFamily } = useSelectedFontFamily();
     useEffect(() => {
-        document.documentElement.style.setProperty("font-family", `${currentSelectedFontFamily.data}`);
+        document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data);
     }, [currentSelectedFontFamily.data]);
 
     return null;
diff --git a/src-ui/app/_index_css/root.css b/src-ui/app/_index_css/root.css
index b84dab43..d6bc751d 100644
--- a/src-ui/app/_index_css/root.css
+++ b/src-ui/app/_index_css/root.css
@@ -4,7 +4,6 @@
 :root {
     font-size: 62.5%;
     color: #F2F2F2;
-    font-family: "Yu Gothic UI";
 }
 
 * {
@@ -24,7 +23,7 @@
 
 html, body {
     height: 100%;
-    font-family: "Yu Gothic UI"; /* If not found the font family where 'root:' that is selected by user*/
+    font-family: var(--font_family); /* If not found the font family where 'root:' that is selected by user*/
     border-radius: 1.8rem;
 }
 
diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css
index 9cd88d28..7d9f52f9 100644
--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -50,4 +50,6 @@
     --main_page_topbar_height: 4.8rem;
     --config_page_sidebar_width: 18rem;
     --config_page_topbar_height: 8rem;
+
+    --font_family: "Yu Gothic UI";
 }
\ No newline at end of file