Fonts¶

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

Configuration¶

Regular font¶

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

[project.theme]
font.text = "Inter"

theme:
  font:
    text: Inter

Monospaced font¶

The monospaced 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 via your configuration:

[project.theme]
font.code = "JetBrains Mono"

theme:
  font:
    code: JetBrains Mono

Autoloading¶

If you want to prevent typefaces from being loaded from Google Fonts, e.g. to adhere to data privacy regulations, and fall back to system fonts, add the following lines to your configuration:

[project.theme]
font = false

theme:
  font: false

Customization¶

Additional fonts¶

If you want to load an (additional) font from another destination or override the system font, you can use an additional style sheet to add the corresponding @font-face definition:

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

[project]
extra_css = ["stylesheets/extra.css"]

extra_css:
  - stylesheets/extra.css

The font can then be applied to specific elements, e.g. only headlines, or globally to be used as the site-wide regular or monospaced font:

:root {
  --md-text-font: "<font>"; /* (1)! */
}

:root {
  --md-code-font: "<font>";
}