Skip to content

Commit 0ce9aaa

Browse files
mintlify[bot]ethanpalm
mintlify[bot]
and
ethanpalm
authored
Add fonts configuration documentation (#1571)
* Update settings/fonts.mdx * Update docs.json * update fonts info in docs.json * move fonts file * copy edit --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <[email protected]>
1 parent c26c2c9 commit 0ce9aaa

File tree

3 files changed

+206
-5
lines changed

3 files changed

+206
-5
lines changed

‎customize/fonts.mdx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: "Fonts"
3+
description: "Configure custom fonts"
4+
---
5+
6+
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.
7+
8+
Fonts are controlled by the [fonts property](/organize/settings#param-fonts) in your `docs.json`.
9+
10+
## Google Fonts
11+
12+
Mintlify automatically loads [Google Fonts](https://fonts.google.com) when you specify a font family name in your `docs.json`.
13+
14+
```json docs.json
15+
"fonts": {
16+
"family": "Inter"
17+
}
18+
```
19+
20+
## Local fonts
21+
22+
To use local fonts, place your font files in your project directory and reference them in your `docs.json` configuration.
23+
24+
### Setting up local fonts
25+
26+
<Steps>
27+
<Step title="Add font files to your project">
28+
For example, create a `fonts` directory and add your font files:
29+
30+
```text
31+
your-project/
32+
├── fonts/
33+
│ ├── InterDisplay-Regular.woff2
34+
│ └── InterDisplay-Bold.woff2
35+
├── docs.json
36+
└── ...
37+
```
38+
</Step>
39+
40+
<Step title="Configure fonts in docs.json">
41+
Reference your local fonts using relative paths from your project root:
42+
43+
```json docs.json
44+
{
45+
"fonts": {
46+
"family": "InterDisplay",
47+
"source": "/fonts/InterDisplay-Regular.woff2",
48+
"format": "woff2",
49+
"weight": 400
50+
}
51+
}
52+
```
53+
</Step>
54+
</Steps>
55+
56+
### Local fonts for headings and body
57+
58+
Configure separate local fonts for headings and body text in your `docs.json`:
59+
60+
```json docs.json
61+
{
62+
"fonts": {
63+
"heading": {
64+
"family": "InterDisplay",
65+
"source": "/fonts/InterDisplay-Bold.woff2",
66+
"format": "woff2",
67+
"weight": 700
68+
},
69+
"body": {
70+
"family": "InterDisplay",
71+
"source": "/fonts/InterDisplay-Regular.woff2",
72+
"format": "woff2",
73+
"weight": 400
74+
}
75+
}
76+
}
77+
```
78+
79+
## Externally hosted fonts
80+
81+
Use externally hosted fonts by referencing a font source URL in your `docs.json`:
82+
83+
```json docs.json
84+
{
85+
"fonts": {
86+
"family": "Hubot Sans",
87+
"source": "https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2",
88+
"format": "woff2",
89+
"weight": 400
90+
}
91+
}
92+
```
93+
94+
## Font configuration reference
95+
96+
<ResponseField name="fonts" type="object">
97+
Font configuration for your documentation.
98+
99+
<Expandable title="Fonts">
100+
<ResponseField name="family" type="string" required>
101+
Font family name, such as "Inter" or "Playfair Display".
102+
</ResponseField>
103+
<ResponseField name="weight" type="number">
104+
Font weight, such as 400 or 700. Variable fonts support precise weights such as 550.
105+
</ResponseField>
106+
<ResponseField name="source" type="string (uri)">
107+
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.
108+
</ResponseField>
109+
<ResponseField name="format" type="'woff' | 'woff2'">
110+
Font file format. Required when using the `source` field.
111+
</ResponseField>
112+
<ResponseField name="heading" type="object">
113+
Override font settings specifically for headings.
114+
115+
<Expandable title="Heading">
116+
<ResponseField name="family" type="string" required>
117+
Font family name for headings.
118+
</ResponseField>
119+
<ResponseField name="weight" type="number">
120+
Font weight for headings.
121+
</ResponseField>
122+
<ResponseField name="source" type="string (uri)">
123+
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.
124+
</ResponseField>
125+
<ResponseField name="format" type="'woff' | 'woff2'">
126+
Font file format for headings. Required when using the `source` field.
127+
</ResponseField>
128+
</Expandable>
129+
</ResponseField>
130+
<ResponseField name="body" type="object">
131+
Override font settings specifically for body text.
132+
133+
<Expandable title="Body">
134+
<ResponseField name="family" type="string" required>
135+
Font family name for body text.
136+
</ResponseField>
137+
<ResponseField name="weight" type="number">
138+
Font weight for body text.
139+
</ResponseField>
140+
<ResponseField name="source" type="string (uri)">
141+
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.
142+
</ResponseField>
143+
<ResponseField name="format" type="'woff' | 'woff2'">
144+
Font file format for body text. Required when using the `source` field.
145+
</ResponseField>
146+
</Expandable>
147+
</ResponseField>
148+
</Expandable>
149+
</ResponseField>

‎docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"pages": [
5050
"customize/custom-domain",
5151
"customize/themes",
52+
"customize/fonts",
5253
"customize/custom-scripts",
5354
"customize/react-components",
5455
{

‎organize/settings.mdx‎

Lines changed: 56 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -189,20 +189,71 @@ This section contains the full reference for the `docs.json` file.
189189
</ResponseField>
190190

191191
<ResponseField name="fonts" type="object">
192-
Font configuration for the headings in your documentation. The default font varies by theme.
192+
Set custom fonts for your documentation. The default font varies by theme.
193193

194194
<Expandable title="Fonts">
195195
<ResponseField name="family" type="string" required>
196-
Font family, such as "Open Sans."
196+
Font family, such as "Open Sans." [Google Fonts](https://fonts.google.com) family names are supported.
197197
</ResponseField>
198198
<ResponseField name="weight" type="number">
199-
Font weight, such as 400 or 700. Variable fonts support precise weights such as 550.
199+
Font weight, such as 400 or 700. Variable fonts support precise weights such as 550.
200200
</ResponseField>
201201
<ResponseField name="source" type="string (uri)">
202-
URL to your font source, such as https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2. [Google Fonts](https://fonts.google.com) are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
202+
One of:
203+
204+
- URL to a hosted font, such as https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
205+
- Path to a local font file, such as `/fonts/Hubot-Sans.woff2`.
206+
207+
[Google Fonts](https://fonts.google.com) are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
203208
</ResponseField>
204209
<ResponseField name="format" type='"woff" | "woff2"'>
205-
Font file format.
210+
Font file format. Required when using the `source` field.
211+
</ResponseField>
212+
<ResponseField name="heading" type="object">
213+
Override font settings specifically for headings.
214+
215+
<Expandable title="Heading">
216+
<ResponseField name="family" type="string" required>
217+
Font family, such as "Open Sans", "Playfair Display." [Google Fonts](https://fonts.google.com) family names are supported.
218+
</ResponseField>
219+
<ResponseField name="weight" type="number">
220+
Font weight, such as 400, 700. Variable fonts support precise weights such as 550.
221+
</ResponseField>
222+
<ResponseField name="source" type="string (uri)">
223+
One of:
224+
225+
- URL to a hosted font, such as https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
226+
- Path to a local font file, such as `/fonts/Hubot-Sans.woff2`.
227+
228+
[Google Fonts](https://fonts.google.com) are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
229+
</ResponseField>
230+
<ResponseField name="format" type="&quot;woff&quot; | &quot;woff2&quot;">
231+
Font file format. Required when using the `source` field.
232+
</ResponseField>
233+
</Expandable>
234+
</ResponseField>
235+
<ResponseField name="body" type="object">
236+
Override font settings specifically for body text.
237+
238+
<Expandable title="Body">
239+
<ResponseField name="family" type="string" required>
240+
Font family, such as "Open Sans", "Playfair Display." [Google Fonts](https://fonts.google.com) family names are supported.
241+
</ResponseField>
242+
<ResponseField name="weight" type="number">
243+
Font weight, such as 400, 700. Variable fonts support precise weights such as 550.
244+
</ResponseField>
245+
<ResponseField name="source" type="string (uri)">
246+
One of:
247+
248+
- URL to a hosted font, such as https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2.
249+
- Path to a local font file, such as `/fonts/Hubot-Sans.woff2`.
250+
251+
[Google Fonts](https://fonts.google.com) are loaded automatically when you specify a Google Font `family` name, so no source URL is needed.
252+
</ResponseField>
253+
<ResponseField name="format" type="&quot;woff&quot; | &quot;woff2&quot;">
254+
Font file format. Required when using the `source` field.
255+
</ResponseField>
256+
</Expandable>
206257
</ResponseField>
207258
</Expandable>
208259
</ResponseField>

0 commit comments

Comments
 (0)