[bugfix] Config Page: Appearance tab. Fix Ui Font setting that was not working.

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;

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;
 }
 

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";
 }