Docsalot home pagelight logo
  1. Customization
  2. 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

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

docs.json theme={null}
"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

1

Add font files to your project

For example, create a fonts directory and add your font files:

theme={null}
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 theme={null}
{
  "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 theme={null}
{
  "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:

docs.json theme={null}
{
  "fonts": {
    "family": "Hubot Sans",
    "source": "https://docsalot-assets.b-cdn.net/fonts/Hubot-Sans.woff2",
    "format": "woff2",
    "weight": 400
  }
}

​
Font configuration reference

fonts
object

Font configuration for your documentation.