Add dedicated fonts documentation page

docs.json

@@ -11,6 +11,12 @@
   "icons": {
     "library": "lucide"
   },
+  "fonts": {
+    "family": "Bitcount",
+    "source": "/BitcountGridDoubleInk-VariableFont.woff2",
+    "format": "woff2",
+    "weight": 400
+  },
   "navigation": {
     "tabs": [
       {
@@ -145,6 +151,7 @@
                   "analytics/improving-docs"
                 ]
               },
+              "fonts",
               "react-components",
               "settings/custom-scripts",
               "settings/seo",

fonts.mdx

@@ -0,0 +1,152 @@
+---
+title: "Fonts"
+description: "Configure custom fonts"
+icon: "type"
+---
+
+Configure fonts for your entire site or separately for headings and body text. Use Google Fonts, local font files, or externally hosted fonts. The default font varies by theme.
+
+Fonts are controlled by the `fonts` property in your `docs.json`.
+
+## Google Fonts
+
+[Google Fonts](https://fonts.google.com) are automatically loaded. Specify a font family name to use it.
+
+```json
+"fonts": {
+  "family": "Inter",
+  "weight": 400
+}
+```
+
+## Local fonts
+
+To use local fonts, place your font files in the `assets/fonts` directory and reference them in your `docs.json` configuration.
+
+### Setting up local fonts
+
+<Steps>
+<Step title="Add font files to your project">
+Create an `assets/fonts` directory in your project root and add your font files:
+
+```
+your-project/
+├── assets/
+│   └── fonts/
+│       ├── InterDisplay-Regular.woff2
+│       └── InterDisplay-Bold.woff2
+├── docs.json
+└── ...
+```
+</Step>
+
+<Step title="Configure fonts in docs.json">
+Reference your local fonts using relative paths from your project root:
+
+```json docs.json
+{
+  "fonts": {
+    "family": "InterDisplay",
+    "source": "/assets/fonts/InterDisplay-Regular.woff2",
+    "format": "woff2",
+    "weight": 400
+  }
+}
+```
+</Step>
+</Steps>
+
+### Local fonts for headings and body
+
+You can configure separate local fonts for headings and body text:
+
+```json docs.json
+{
+  "fonts": {
+    "heading": {
+      "family": "InterDisplay",
+      "source": "/assets/fonts/InterDisplay-Bold.woff2",
+      "format": "woff2",
+      "weight": 700
+    },
+    "body": {
+      "family": "InterDisplay",
+      "source": "/assets/fonts/InterDisplay-Regular.woff2",
+      "format": "woff2",
+      "weight": 400
+    }
+  }
+}
+```
+
+### External font URLs
+
+You can also use external font URLs instead of local files:
+
+```json docs.json
+{
+  "fonts": {
+    "family": "Hubot Sans",
+    "source": "https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2",
+    "format": "woff2",
+    "weight": 400
+  }
+}
+```
+
+## Font configuration reference
+
+<ResponseField name="fonts" type="object">
+  Font configuration for your documentation. The default font is [Inter](https://fonts.google.com/specimen/Inter).
+
+  <Expandable title="Fonts">
+    <ResponseField name="family" type="string" required>
+      Font family name, such as "Inter" or "Playfair Display".
+    </ResponseField>
+    <ResponseField name="weight" type="number">
+      Font weight, such as 400 or 700. Variable fonts support precise weights such as 550.
+    </ResponseField>
+    <ResponseField name="source" type="string (uri)">
+      URL to your font source, such as `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, or path to your local font file, such as `/assets/fonts/InterDisplay.woff2`. Google Fonts are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
+    </ResponseField>
+    <ResponseField name="format" type="'woff' | 'woff2'">
+      Font file format. Required when using the `source` field.
+    </ResponseField>
+    <ResponseField name="heading" type="object">
+      Override font settings specifically for headings.
+
+      <Expandable title="Heading">
+        <ResponseField name="family" type="string" required>
+          Font family name for headings.
+        </ResponseField>
+        <ResponseField name="weight" type="number">
+          Font weight for headings.
+        </ResponseField>
+        <ResponseField name="source" type="string (uri)">
+          URL to your font source, such as `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, or path to your local font file for headings. Google Fonts are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
+        </ResponseField>
+        <ResponseField name="format" type="'woff' | 'woff2'">
+          Font file format for headings. Required when using the `source` field.
+        </ResponseField>
+      </Expandable>
+    </ResponseField>
+    <ResponseField name="body" type="object">
+      Override font settings specifically for body text.
+
+      <Expandable title="Body">
+        <ResponseField name="family" type="string" required>
+          Font family name for body text.
+        </ResponseField>
+        <ResponseField name="weight" type="number">
+          Font weight for body text.
+        </ResponseField>
+        <ResponseField name="source" type="string (uri)">
+          URL to your font source, such as `https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2`, or path to your local font file for body text. Google Fonts are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
+        </ResponseField>
+        <ResponseField name="format" type="'woff' | 'woff2'">
+          Font file format for body text. Required when using the `source` field.
+        </ResponseField>
+      </Expandable>
+    </ResponseField>
+  </Expandable>
+</ResponseField>