diff --git a/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx b/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx
index 3c898302a918916ec391b7293fdfcbab05373451..c6932e6e609da051639cbca848bacae5290f7e33 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx
@@ -8,6 +8,7 @@ import {
 } from "embedding-sdk/lib/theme";
 import { useSelector } from "metabase/lib/redux";
 import { getSettings } from "metabase/selectors/settings";
+import { getFont } from "metabase/styled-components/selectors";
 import { getMetabaseSdkCssVariables } from "metabase/styled-components/theme/css-variables";
 import { ThemeProvider, useMantineTheme } from "metabase/ui";
 import { getApplicationColors } from "metabase-enterprise/settings/selectors";
@@ -32,13 +33,15 @@ export const SdkThemeProvider = ({ theme, children }: Props) => {
 
   return (
     <ThemeProvider theme={themeOverride}>
-      <GlobalStyles />
+      <SDKGlobalStyles />
       {children}
     </ThemeProvider>
   );
 };
 
-function GlobalStyles() {
+function SDKGlobalStyles() {
   const theme = useMantineTheme();
-  return <Global styles={getMetabaseSdkCssVariables(theme)} />;
+  const font = useSelector(getFont);
+
+  return <Global styles={getMetabaseSdkCssVariables(theme, font)} />;
 }
diff --git a/enterprise/frontend/src/embedding-sdk/store/index.ts b/enterprise/frontend/src/embedding-sdk/store/index.ts
index 88e7b73400b2a30d8f1721ec39ee00094ec8c227..5be403a894f6f35f4d149f3256bec7ed2b7400e5 100644
--- a/enterprise/frontend/src/embedding-sdk/store/index.ts
+++ b/enterprise/frontend/src/embedding-sdk/store/index.ts
@@ -20,6 +20,7 @@ export const sdkReducers = {
 
 export const store = getStore(sdkReducers, null, {
   embed: {
+    options: {},
     isEmbeddingSdk: true,
   },
   app: {
diff --git a/frontend/src/metabase/styled-components/theme/css-variables.ts b/frontend/src/metabase/styled-components/theme/css-variables.ts
index 438667482aa614960162b435cdfc3cba3a4a5c41..604b8c20930d170adb9798d2b9ab2c1f8051f0c6 100644
--- a/frontend/src/metabase/styled-components/theme/css-variables.ts
+++ b/frontend/src/metabase/styled-components/theme/css-variables.ts
@@ -34,9 +34,10 @@ export function getMetabaseCssVariables(theme: MantineTheme) {
   `;
 }
 
-export function getMetabaseSdkCssVariables(theme: MantineTheme) {
+export function getMetabaseSdkCssVariables(theme: MantineTheme, font: string) {
   return css`
     :root {
+      --mb-default-font-family: ${font};
       ${getSdkDesignSystemCssVariables(theme)}
       ${getThemeSpecificCssVariables(theme)}
     }
@@ -53,8 +54,6 @@ export function getMetabaseSdkCssVariables(theme: MantineTheme) {
  **/
 function getSdkDesignSystemCssVariables(theme: MantineTheme) {
   return css`
-    --mb-default-font-family: "${theme.fontFamily}";
-
     /* Semantic colors */
     /* Dynamic colors from SDK */
     ${Object.entries(SDK_TO_MAIN_APP_COLORS_MAPPING).flatMap(