# Fonts

Zensical makes it easy to change the typeface of your project documentation, since it directly integrates with [Google Fonts](<https://fonts.google.com>). 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](<https://fonts.google.com>) via your configuration:

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

```yaml
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](<https://fonts.google.com>) via your configuration:

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

```yaml
theme:
  font:
    code: JetBrains Mono
```

### Autoloading

If you want to prevent typefaces from being loaded from [Google Fonts](<https://fonts.google.com>), e.g. to adhere to [data privacy](<https://developers.google.com/fonts/faq/privacy>) regulations, and fall back to system fonts, add the following lines to your configuration:

```toml
[project.theme]
font = false
```

```yaml
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](<https://zensical.org/docs/customization/#additional-css>) to add the corresponding `@font-face` definition:

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

```toml
[project]
extra_css = [
  "stylesheets/extra.css",
]
```

```yaml
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:

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

1. Always define fonts through CSS variables and not `font-family`, as this would disable the system font fallback.

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