mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
bd073fd9c5
* docs: fix Vale warnings in files changed in the last week * docs: mirror Vale fixes to es and fr translations * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
152 lines
5.0 KiB
Plaintext
152 lines
5.0 KiB
Plaintext
---
|
|
title: "Fonts"
|
|
description: "Customize typography on your documentation site with Google Fonts or self-hosted font files for headings, body text, and code blocks."
|
|
keywords: ["Google Fonts", "local fonts", "custom typography"]
|
|
boost: 3
|
|
---
|
|
|
|
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.
|
|
|
|
Configure fonts with the [fonts property](/organize/settings-appearance#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.
|
|
|
|
### Set 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>
|