Typography
A skin's Typography tab sets the fonts and heading sizes. Fonts must first be added as media — see 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.
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).
Name — how the font is listed.
Definition — the CSS
font-familyvalue 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.
Last updated