mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
4c31f3683c
* ai/ keywords * api/ keywords * components/ keywords * create/ keywords * customize/ keywords * api-playground/ keywords * dashboard/ keywords * deploy/ keywords * guides/ keywords * insights/ keywords * integrations/ keywords * optimize/ keywords * organize/ keywords * root/ keywords * rm temp files
151 lines
4.9 KiB
Plaintext
151 lines
4.9 KiB
Plaintext
---
|
|
title: "Fonts"
|
|
description: "Customize typography with Google Fonts or self-hosted fonts."
|
|
keywords: ["Google Fonts", "local fonts", "custom typography"]
|
|
---
|
|
|
|
Set a custom font 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](/organize/settings#param-fonts) in your `docs.json`.
|
|
|
|
## Google Fonts
|
|
|
|
Mintlify automatically loads [Google Fonts](https://fonts.google.com) when you specify a font family name in your `docs.json`.
|
|
|
|
```json docs.json
|
|
"fonts": {
|
|
"family": "Inter"
|
|
}
|
|
```
|
|
|
|
## 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
|
|
|
|
<Steps>
|
|
<Step title="Add font files to your project">
|
|
For example, create a `fonts` directory and add your font files:
|
|
|
|
```text
|
|
your-project/
|
|
├── 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": "/fonts/InterDisplay-Regular.woff2",
|
|
"format": "woff2",
|
|
"weight": 400
|
|
}
|
|
}
|
|
```
|
|
</Step>
|
|
</Steps>
|
|
|
|
### Local fonts for headings and body
|
|
|
|
Configure separate local fonts for headings and body text in your `docs.json`:
|
|
|
|
```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
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Externally hosted fonts
|
|
|
|
Use externally hosted fonts by referencing a font source URL in your `docs.json`:
|
|
|
|
```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.
|
|
|
|
<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>
|