diff --git a/.changeset/smooth-rings-mate.md b/.changeset/smooth-rings-mate.md
new file mode 100644
index 0000000000..4b9a53f71b
--- /dev/null
+++ b/.changeset/smooth-rings-mate.md
@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Fixed a bug to support string fontSize values (`"2.5rem"`) instead of forcing numeric-only values & requiring casts. In addition, added an optional fontFamily prop for h1-h6 BackstageTypography variants to allow further customization.
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index d6380ee6e8..bf226d4d9e 100644
--- a/packages/theme/api-report.md
+++ b/packages/theme/api-report.md
@@ -117,32 +117,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
@@ -172,7 +178,42 @@ export function createBaseThemeOptions<PaletteOptions>(
   options: BaseThemeOptionsInput<PaletteOptions>,
 ): {
   palette: PaletteOptions;
-  typography: BackstageTypography;
+  typography:
+    | BackstageTypography
+    | {
+        htmlFontSize: number;
+        fontFamily: string;
+        h1: {
+          fontSize: number;
+          fontWeight: number;
+          marginBottom: number;
+        };
+        h2: {
+          fontSize: number;
+          fontWeight: number;
+          marginBottom: number;
+        };
+        h3: {
+          fontSize: number;
+          fontWeight: number;
+          marginBottom: number;
+        };
+        h4: {
+          fontWeight: number;
+          fontSize: number;
+          marginBottom: number;
+        };
+        h5: {
+          fontWeight: number;
+          fontSize: number;
+          marginBottom: number;
+        };
+        h6: {
+          fontWeight: number;
+          fontSize: number;
+          marginBottom: number;
+        };
+      };
   page: PageTheme;
   getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
 };
diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts
index 3e34a0abb7..d62d944741 100644
--- a/packages/theme/src/base/types.ts
+++ b/packages/theme/src/base/types.ts
@@ -124,32 +124,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };