mkdocs-material/docs/guides/changing-the-fonts.md

template
overrides/main.html

Changing the fonts

Material for MkDocs makes it easy to change the typeface of your project documentation, as it directly integrates with Google Fonts. Alternatively, fonts can be custom-loaded if self-hosting is preferred or another destination should be used.

Configuration

Regular font

:octicons-file-code-24: Source · :octicons-tools-24: Default: Roboto

The regular font is used for all body copy, headlines, and essentially everything that does not need to be proportionally spaced. It can be set to any valid Google Font with:

theme:
  font:
    text: Roboto

The typeface will be loaded in 300, 400, 400i and 700.

Proportional font

:octicons-file-code-24: Source · :octicons-tools-24: Default: Roboto Mono

The proportional font is used for code blocks and can be configured separately. Just like the regular font, it can be set to any valid Google Font from mkdocs.yml with:

theme:
  font:
    code: Roboto Mono

The typeface will be loaded in 400.

Customization

If you want to load fonts from other destinations or don't want to use Google Fonts for data privacy reasons, e.g. due to GDPR, add the following lines to mkdocs.yml:

theme:
  font: false

This will prevent typefaces from being loaded from Google Fonts. As a fallback, common system fonts will be used automatically. Additionally, if you want to load a font from another destination, you may either follow the guide on theme extension and override the fonts block with a style tag, or use an additional stylesheet to add the necessary @font-face definition:

@font-face {
  font-family: "<font>";
  src: "...";
}

The font can then be configured to be used as the regular or proportional font:

=== "Regular font"

``` css
body, input {
  font-family: "<font>", -apple-system, Helvetica, Arial, sans-serif;
}
```

=== "Proportional font"

``` css
pre, code, kbd {
  font-family: "<font>", SFMono-Regular, Consolas, Menlo, monospace;
}
```