diff --git a/src/components/common/App/index.tsx b/src/components/common/App/index.tsx
index c381430fb..cf6e5d32e 100644
--- a/src/components/common/App/index.tsx
+++ b/src/components/common/App/index.tsx
@@ -36,10 +36,13 @@ export const actions = addPrefix(ACTION_PREFIX, {
   SET_IS_JAEGER_ENABLED: "SET_IS_JAEGER_ENABLED"
 });
 
+const defaultMainFont = isString(window.mainFont) ? window.mainFont : "";
+const defaultCodeFont = isString(window.codeFont) ? window.codeFont : "";
+
 export const App = (props: AppProps) => {
   const [mode, setMode] = useState(getMode());
-  const [mainFont, setMainFont] = useState("");
-  const [codeFont, setCodeFont] = useState("");
+  const [mainFont, setMainFont] = useState(defaultMainFont);
+  const [codeFont, setCodeFont] = useState(defaultCodeFont);
 
   useEffect(() => {
     if (!props.theme) {
diff --git a/src/components/common/App/styles.ts b/src/components/common/App/styles.ts
index 9e4d0d333..85ca81b30 100644
--- a/src/components/common/App/styles.ts
+++ b/src/components/common/App/styles.ts
@@ -31,7 +31,7 @@ export const getMainFont = (customFont: string): FlattenSimpleInterpolation => {
 
   return css`
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-    font-family: ${[customFont, osFont, "sans-serif"]
+    font-family: ${[`"${customFont}"`, osFont, "sans-serif"]
       .filter(Boolean)
       .join(", ")};
   `;
@@ -64,7 +64,7 @@ export const getCodeFont = (customFont: string): FlattenSimpleInterpolation => {
 
   return css`
     /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-    font-family: ${[customFont, osFont, "monospace"]
+    font-family: ${[`"${customFont}"`, osFont, "monospace"]
       .filter(Boolean)
       .join(", ")};
   `;