diff --git a/BitcountGridDoubleInk-VariableFont.woff2 b/BitcountGridDoubleInk-VariableFont.woff2 new file mode 100644 index 00000000..531e9526 Binary files /dev/null and b/BitcountGridDoubleInk-VariableFont.woff2 differ diff --git a/docs.json b/docs.json index 89c23159..b4272de5 100644 --- a/docs.json +++ b/docs.json @@ -11,6 +11,14 @@ "icons": { "library": "lucide" }, + "fonts": { + "heading": { + "family": "Random", + "source": "/BitcountGridDoubleInk-VariableFont.woff2", + "weight": 400, + "format": "woff2" + } + }, "navigation": { "tabs": [ { @@ -66,6 +74,7 @@ "group": "Components", "pages": [ "text", + "settings/fonts", "image-embeds", "list-table", "code", diff --git a/settings/fonts.mdx b/settings/fonts.mdx new file mode 100644 index 00000000..dc5bd367 --- /dev/null +++ b/settings/fonts.mdx @@ -0,0 +1,151 @@ +--- +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 + +Mintlify automatically loads [Google Fonts](https://fonts.google.com) when you specify a font family name. + +```json +"fonts": { + "family": "Inter", + "weight": 400 +} +``` + +## Local fonts + +To use local fonts, place your font files in your project directory and reference them in your `docs.json` configuration. + +### Setting up local fonts + + + +For example, you can create a `fonts` directory and add your font files: + +``` +your-project/ +├── fonts/ +│ ├── InterDisplay-Regular.woff2 +│ └── InterDisplay-Bold.woff2 +├── docs.json +└── ... +``` + + + +Reference your local fonts using relative paths from your project root: + +```json docs.json +{ + "fonts": { + "family": "InterDisplay", + "source": "/fonts/InterDisplay-Regular.woff2", + "format": "woff2", + "weight": 400 + } +} +``` + + + +### 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": "/fonts/InterDisplay-Bold.woff2", + "format": "woff2", + "weight": 700 + }, + "body": { + "family": "InterDisplay", + "source": "/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 + + + Font configuration for your documentation. + + + + Font family name, such as "Inter" or "Playfair Display". + + + Font weight, such as 400 or 700. Variable fonts support precise weights such as 550. + + + 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. + + + Font file format. Required when using the `source` field. + + + Override font settings specifically for headings. + + + + Font family name for headings. + + + Font weight for headings. + + + 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. + + + Font file format for headings. Required when using the `source` field. + + + + + Override font settings specifically for body text. + + + + Font family name for body text. + + + Font weight for body text. + + + 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. + + + Font file format for body text. Required when using the `source` field. + + + + +