> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/theme-settings/typography.md).

# Typography

A skin's **Typography** tab sets the fonts and heading sizes. Fonts must first be added as media — see [Fonts](#fonts) below.

See the typography page on the demo site: <https://govcms.convivial.io/demo/typography>

* **Default font** — sans serif, serif or mono.
* **Font families** — choose the **Sans serif**, **Serif** and **Mono** fonts from the Font media you have added.
* **H1** to **H6** and **Display** — per heading, choose the **Font**, **Size** in rem (e.g. `3` = 48px), **Tracking** (letter spacing, e.g. `-0.05`), **Leading** (line height, e.g. `1.2`) and **Weight**.

![Typography](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-016979c9a840807d23be733997ed5a66ced890d9%2Ftheme-typography.png?alt=media)

## Fonts

Adding a font is a three-step process: get the font files, add them as **Font** media, then apply them under **Typography**.

### 1. Download font files

If your brand guidelines do not supply font files, download them from Google Fonts via <https://gwfh.mranftl.com/fonts>. Convivial for GovCMS uses four faces:

* Regular (400)
* Italic (400)
* Bold (700)
* Bold italic (700)

Select those four styles and download the `woff2` set under **4. Download files**. Note the `font-family` name shown under **3. Copy CSS**.

Tick only the character sets the site needs. Every set you tick is baked into each file and downloaded by every visitor: `latin` always, `latin-ext` for Polish, Czech, Turkish or Hungarian content, and `cyrillic`, `greek` or `vietnamese` only if the site publishes in those languages. Chinese, Japanese and Korean cannot be self-hosted this way — let the fallback font in the **Definition** carry them.

### 2. Add the font as media

*Manage → Content → Media → Add media → Font* (`/media/add/font`).

![Adding a font](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-c1b950739227d5bbadf1ef8cf0179248f216e25e%2Fmedia-add-font.png?alt=media)

* **Name** — how the font is listed.
* **Definition** — the CSS `font-family` value including a fallback, e.g. `'Public Sans', sans-serif`. The first name is the identity the skin refers to, not the media name, so keep it stable.
* **Regular normal (400)** — required. **Regular bold (700)**, **Italic normal (400)** and **Italic bold (700)** are optional; if a font has no bold or italic face, leave the field empty and the browser synthesises it.

Upload one `.woff2` per face (`.ttf`, `.otf` and `.woff` also work). Only **published** Font media is used — unpublish it to withdraw a family from the site. A font that appears as *(missing)* in the Typography selects has no published media behind it.

### 3. Apply the font

Back on the theme settings page, open the skin's **Typography** tab and pick the new family under **Font families** — see the top of this chapter.