# Fonts
Fonts can be used **locally** via the theme fonts or **externally** via the custom fonts integrated by Google Fonts. In addition, we have a guide on [how to host fonts yourselve](https://themedocs.zenit.design/en/tutorials/embed-fonts-locally).
### Custom fonts
All [1000+ Google Fonts](https://fonts.google.com) fonts are available to you via the theme. You can define separate fonts for body text and headlines or the same font.
{% hint style="info" %}
If you want to use the same font for headlines and body text, enter the same font name in both fields. The font styles will be added together if they differ in the fields.
{% endhint %}
#### 1. Search a font
To use a font from Google Fonts, just find one font family each for body text (**font Text**) and a font family for headings (**headline font**) - in this example we want to use `Roboto Condensed` as font for texts.
#### 2. Select font styles
After selecting the font, you can view the font styles that the font provides. In this example, 'Roboto Condensed' offers all possible font styles from `Light 300` to `Bold 900` because it is a variable[^1] font.
#### 3. Select font
After clicking on **Get embed code** you will be taken to the page with the embed codes. Here we are only interested in the technical name of the font. So make a note of the name of the font family. `'Roboto Condensed', sans-serif`
{% hint style="warning" %}
`font-family:` and the `semicolon` are omitted.
{% endhint %}
{% hint style="info" %}
You don't have to make an actual selection of font styles here - **that happens only in the theme!**
{% endhint %}
#### 4. Deposit font family in the theme
Now enter the name of the font in the **Font-type text (1)** or, for headings, in the **Font-type headline** field. Keep the generic font family in case the font unexpectedly fails to load.
{% tabs %}
{% tab title="What are generic font families" %}
> Generic font families serve as a fallback mechanism, a means of preserving something of the stylesheet author's intent in the event that none of the specified fonts are available.
> {% endtab %}
{% tab title="Example" %}
| Generic font | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `serif` | Characters have terminating strokes, flared or pointed ends, or serifed ends. |
| `sans-serif` | Characters have straight stroke ends. |
| `monospace` | Alle Zeichen sind gleich breit. |
| `cursive` | Characters in cursive fonts usually have connecting strokes or other cursive characteristics beyond those of cursive lettering. The characters are partially or fully connected and the result is more like handwriting than printed letters. |
| `fantasy` | Fantasy fonts are predominantly decorative fonts that contain playful representations of characters. |
{% endtab %}
{% endtabs %}
The contents of the field **font-type text (1)** or **font-type headline** should now look like this:
```
'Roboto Condensed', sans-serif
```
Select the font weights (font styles) in the **Font weights text (2)** or for headings in the **Font weights headline** field. You can only use the font weights that the font provides.
{% hint style="warning" %}
Make sure the option **Load fonts from Google (3)** is active.
{% endhint %}
To avoid unnecessary loading times, select only the font weights that you really want to use. Often, special font weights can be selected for individual elements in the configuration. If font styles are retrieved that the font does not deliver, browsers use the [approximatuin method](https://developer.mozilla.org/de/docs/Web/CSS/font-weight#n%C3%A4herungsverfahren).
### Theme fonts
Besides embedding external or [self-hosted](/en/tutorials/embed-fonts-locally.md) fonts, the theme offers a selection of built-in fonts. These fonts are shipped with the theme and are located on **your server** after installation. So you don't have to worry about privacy with theme fonts.
Theme fonts can be used just like the custom fonts for **texts (1)** and **headings (2)** can be set separately. The supplied **font styles (3)** are in square brackets after the font name.
It is also possible to use a *theme font* for e.g. body text and a *custom font* for the headlines. Note, however, that the externally-integrated custom font still connects to Google's servers, unless you have hosted the custom font yourself and set the option **Load fonts from Google** is disabled in the Custom fonts section.
{% hint style="success" %}
As soon as a selection other than `- Custom font -` was selected, **no more fonts will be loaded from Google servers**. The setting **Theme fonts** overrides the **Custom fonts** setting.
{% endhint %}
## Typography
[^1]: Variable fonts allow one font file to contain multiple variations. You can change the weight, width, style, optical size, and more. The variables within variable fonts are controlled by axes.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/en/styling/typo-and-colors/fonts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.