diff --git a/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx b/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx
new file mode 100644
index 0000000000..c7c005befd
--- /dev/null
+++ b/apps/designer/app/designer/features/style-panel/controls/font-family/font-family-control.tsx
@@ -0,0 +1,47 @@
+import { Grid, TextField } from "@webstudio-is/design-system";
+import type { ControlProps } from "../../style-sections";
+import { getFinalValue } from "../../shared/get-final-value";
+import { PropertyName } from "../../shared/property-name";
+
+const textFieldStyle = {
+  height: "$6",
+  fontWeight: "500",
+};
+
+export const FontFamilyControl = ({
+  currentStyle,
+  inheritedStyle,
+  setProperty,
+  styleConfig,
+}: ControlProps) => {
+  // @todo show which instance we inherited the value from
+  const value = getFinalValue({
+    currentStyle,
+    inheritedStyle,
+    property: styleConfig.property,
+  });
+
+  if (value === undefined) return null;
+
+  const setValue = setProperty(styleConfig.property);
+
+  return (
+    <Grid columns={2}>
+      <PropertyName property={styleConfig.property} label={styleConfig.label} />
+      <TextField
+        css={textFieldStyle}
+        spellCheck={false}
+        readOnly
+        defaultValue={value.value}
+        onClick={() => {
+          console.log("show font picker");
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            console.log("show font picker");
+          }
+        }}
+      />
+    </Grid>
+  );
+};
diff --git a/apps/designer/app/designer/features/style-panel/controls/index.ts b/apps/designer/app/designer/features/style-panel/controls/index.ts
index 6cc6e44055..81f0a3306e 100644
--- a/apps/designer/app/designer/features/style-panel/controls/index.ts
+++ b/apps/designer/app/designer/features/style-panel/controls/index.ts
@@ -3,3 +3,4 @@ export * from "./color/color-control";
 export * from "./select/select-control";
 export * from "./menu/menu-control";
 export * from "./spacing/spacing-control";
+export * from "./font-family/font-family-control";
diff --git a/apps/designer/app/designer/features/style-panel/shared/configs.ts b/apps/designer/app/designer/features/style-panel/shared/configs.ts
index eeb61849fc..3a18f3fbfc 100644
--- a/apps/designer/app/designer/features/style-panel/shared/configs.ts
+++ b/apps/designer/app/designer/features/style-panel/shared/configs.ts
@@ -45,13 +45,15 @@ type BaseStyleConfig = {
   appliesTo: AppliesTo;
 };
 
+// @todo make it use actual list of controls
 export type Control =
   | "Spacing"
   | "Text"
   | "Color"
   | "Menu"
   | "Select"
-  | "Empty";
+  | "Empty"
+  | "FontFamily";
 
 export type StyleConfig = BaseStyleConfig & {
   control: Control;
@@ -88,6 +90,9 @@ const getControl = (property: StyleProperty): Control => {
     case "placeContent": {
       return "Empty";
     }
+    case "fontFamily": {
+      return "FontFamily";
+    }
   }
 
   return "Text";
diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx
index 33ad9805f2..0be0f616fa 100644
--- a/apps/designer/app/designer/features/style-panel/style-sections.tsx
+++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx
@@ -14,6 +14,7 @@ import {
   TextControl,
   SelectControl,
   MenuControl,
+  FontFamilyControl,
 } from "./controls";
 import { ShowMore } from "./shared/show-more";
 import { LayoutSection } from "./sections";
@@ -126,6 +127,7 @@ const sections: {
 } = {
   layout: LayoutSection,
 };
+
 const controls: {
   [key: string]: (props: ControlProps) => JSX.Element | null;
 } = {
@@ -134,4 +136,5 @@ const controls: {
   Color: ColorControl,
   Select: SelectControl,
   Spacing: SpacingControl,
+  FontFamily: FontFamilyControl,
 };