diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/CodeEditors/StyleEditor.tsx b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/CodeEditors/StyleEditor.tsx
index 2d404979eb..c31ed7978a 100644
--- a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/CodeEditors/StyleEditor.tsx
+++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/CodeEditors/StyleEditor.tsx
@@ -41,6 +41,7 @@ export function TitleControls() {
             "--appsmith-theme-backgroundColor",
             "--appsmith-theme-borderRadius",
             "--appsmith-theme-boxShadow",
+            "--appsmith-theme-fontFamily",
           ])
       : [];
   }, [model]);
diff --git a/app/client/src/widgets/CustomWidget/component/index.tsx b/app/client/src/widgets/CustomWidget/component/index.tsx
index a3cf98d4af..983c946553 100644
--- a/app/client/src/widgets/CustomWidget/component/index.tsx
+++ b/app/client/src/widgets/CustomWidget/component/index.tsx
@@ -68,6 +68,7 @@ function CustomComponent(props: CustomComponentProps) {
       ...props.theme?.colors,
       borderRadius: props.theme?.borderRadius?.appBorderRadius,
       boxShadow: props.theme?.boxShadow?.appBoxShadow,
+      fontFamily: props.theme?.fontFamily?.appFont,
     };
   }, [props.theme]);
 
diff --git a/app/client/src/widgets/CustomWidget/component/reset.css b/app/client/src/widgets/CustomWidget/component/reset.css
index 3d9744cc31..2f29a23ba7 100644
--- a/app/client/src/widgets/CustomWidget/component/reset.css
+++ b/app/client/src/widgets/CustomWidget/component/reset.css
@@ -3,8 +3,14 @@
    License: none (public domain)
 */
 
-html,
-body,
+html {
+  font-family: var(--appsmith-theme-fontFamily, system-ui);
+}
+
+body {
+  font-family: inherit;
+}
+
 div,
 span,
 applet,