Fonts

Customize typography with Google Fonts, local fonts, or externally hosted fonts.

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 in your docs.json.

Google Fonts

Mintlify automatically loads Google Fonts when you specify a font family name in your docs.json.

docs.json

{
  "fonts": {
    "family": "Inter"
  }
}

No additional configuration is needed for Google Fonts. Simply specify the font family name and Mintlify handles the rest.

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

1. Add font files to your project

   Create a fonts directory in your project and add your font files:

   your-project/
   ├── fonts/
   │   ├── InterDisplay-Regular.woff2
   │   └── InterDisplay-Bold.woff2
   ├── docs.json
   └── ...
   
2. Configure fonts in docs.json

   Reference your local fonts using relative paths from your project root:

   docs.json

   {
     "fonts": {
       "family": "InterDisplay",
       "source": "/fonts/InterDisplay-Regular.woff2",
       "format": "woff2",
       "weight": 400
     }
   }
   

Local fonts for headings and body

Configure separate local fonts for headings and body text in your docs.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
    }
  }
}

When specifying separate fonts for headings and body, both configurations must include all required fields (family, source, format, and weight).

Externally hosted fonts

Use externally hosted fonts by referencing a font source URL in your docs.json:

docs.json

{
  "fonts": {
    "family": "Hubot Sans",
    "source": "https://mintlify-assets.b-cdn.net/fonts/Hubot-Sans.woff2",
    "format": "woff2",
    "weight": 400
  }
}

Externally hosted fonts should use HTTPS URLs and support CORS to ensure they load correctly across all browsers.

Font configuration reference

fonts · object

Font configuration for your documentation.

Show Fonts

family · string · required

Font family name, such as “Inter” or “Playfair Display”.

weight · number

Font weight, such as 400 or 700. Variable fonts support precise weights such as 550.

source · 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.

format · 'woff' | 'woff2'

Font file format. Required when using the source field.

heading · object

Override font settings specifically for headings.

Show Heading

family · string · required

Font family name for headings.

weight · number

Font weight for headings.

source · 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.

format · 'woff' | 'woff2'

Font file format for headings. Required when using the source field.

body · object

Override font settings specifically for body text.

Show Body

family · string · required

Font family name for body text.

weight · number

Font weight for body text.

source · 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.

format · 'woff' | 'woff2'

Font file format for body text. Required when using the source field.