diff --git a/packages/block-editor/src/components/font-family/stories/index.story.js b/packages/block-editor/src/components/font-family/stories/index.story.js
index 9077c131cbe3bb..525852d3b86a9d 100644
--- a/packages/block-editor/src/components/font-family/stories/index.story.js
+++ b/packages/block-editor/src/components/font-family/stories/index.story.js
@@ -8,11 +8,69 @@ import { useState } from '@wordpress/element';
  */
 import FontFamilyControl from '..';
 
-export default {
+const meta = {
 	component: FontFamilyControl,
 	title: 'BlockEditor/FontFamilyControl',
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'FontFamilyControl is a React component that renders a UI for selecting a font family from predefined `typography.fontFamilies` presets.',
+			},
+			canvas: { sourceState: 'shown' },
+		},
+	},
+	argTypes: {
+		onChange: {
+			control: false,
+			description:
+				'A function that receives the new font family value. If called without parameters, it should reset the value.',
+			table: {
+				type: { summary: 'function' },
+				required: true,
+			},
+		},
+		fontFamilies: {
+			control: 'object',
+			description:
+				'A user-provided set of font families to override predefined ones. Each item should have fontFamily (string) and name (string) properties.',
+			table: {
+				type: {
+					summary: 'Array<{ fontFamily: string, name: string }>',
+				},
+			},
+		},
+		value: {
+			control: 'text',
+			description: 'The current font family value.',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: '""' },
+			},
+		},
+		__next40pxDefaultSize: {
+			control: 'boolean',
+			description:
+				'Start opting into the larger default height that will become the default size in a future version.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+		__nextHasNoMarginBottom: {
+			control: 'boolean',
+			description:
+				'Start opting into the new margin-free styles that will become the default in a future version.',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
+	},
 };
 
+export default meta;
+
 export const Default = {
 	render: function Template( props ) {
 		const [ value, setValue ] = useState();