Typography and fonts

A site's type is two things: the font faces the site can draw, and the text styles (body text, headings, lead, caption, button and so on) that say which family, size, weight and spacing each role uses. Every heading and paragraph on the site takes its style from here, so you set the type once for the whole site.

Before you start #

• You need the Super admin role, or a Content editor a Super admin has given Edit on Font families and Type presets. By default a Content editor can only view them. A Brand client sees the type scale but not the font faces.
• Have the font ready: either the family's name on Google Fonts, or one WOFF2 file per weight and style, and a licence that lets you put it on this site.

Add a font #

1. In the site's sidebar, open Design System, then Typography.
2. Scroll to Font faces. Its tabs are Theme faces (bundled with the theme, read only), Upload and Google Fonts.

From Google Fonts:

1. Open the Google Fonts tab.
2. In Family on Google Fonts, enter the family's name as Google Fonts writes it, for example DM Sans.
3. Pick the Weights you need, and tick Include italics if you want them.
4. Choose Import. The server copies the latin and latin-ext files to this site and records the family's licence page with each face (Licence of {family}).

From a WOFF2 file:

1. Open the Upload tab.
2. Enter the Family name, for example Helvetica Neue Brand. Use the same name for every file of the family.
3. Choose the Weight and the Style (Upright or Italic).
4. Choose Loading. Show fallback, then swap (swap) is right for most text; Wait for the face (block) only for a short display line that must never show in a fallback font.
5. Under WOFF2 file, choose the file, then Upload face.
6. Repeat for each weight and style: one file each.

The family now appears under This site's faces and in every font picker.

Replace a face #

Uploading or importing a face the site already has (same family, weight and style) is refused: "{family} {face} is already one of this site's faces. You can replace its file: Undo brings the current one back."

1. Under the message, choose Replace the file (an upload) or Replace the files (a Google Fonts import).
2. The new file takes the old one's place in the admin at once. The live site keeps drawing the old file until you publish.
3. To go back, choose Undo last save under the type scale, or Undo in the top bar. The old face comes back.

Choose the families #

1. On Typography, find Font families. Each row is a family role of the design system (for example headings and body).
2. Under Uses, choose Its own fonts to pick a stack, or Same as {family} to follow another row.
3. With Its own fonts, pick the Family from This site's faces, Theme faces or System fonts, then a Fallback (Sans-serif system fonts, Serif system fonts, Monospace system fonts or No fallback).
4. The specimen line under the row shows the result.

Set the text styles #

The Type scale lists every text style, largest first, drawn at the width chosen in the top bar. Each row says what it is Used as (for example Heading 1, Body text, Caption).

1. On a row, set the Family (a family role, or Own fonts), the Weight (from Weights of the design system, or Own weight), Line h. (line height), Tracking (letter spacing, with its unit) and Case (As written, Uppercase, Lowercase, Capitalised).
2. Set the Size:
   • Fixed: pick a size From the scale, or Own (px) and type it.
   • Fluid: the size grows with the screen. Pick the Smallest and Largest size, and the viewport range (From viewport (px), To viewport (px)) over which it grows.
   • When the size changes by breakpoint, each breakpoint has its own Size from {breakpoint}.
3. Changed rows show Not saved. A bar at the bottom, Unsaved type changes, collects them.
4. Choose Save {count} changes. The changes are checked first (Checking the changes, then saving…). Ready to save, with {count} notes. means it saved with warnings; Show the notes lists them.
5. Discard changes drops what you have not saved; Undo last save reverses the last save.

To add a style a component or a section needs, choose Add text style or Add role.

Below the scale, Font sizes and Font weights list the size and weight tokens the styles pick from. Change them in the drawer as any token (Colours, space and themes).

What you see #

• The faces use space on the site: {used} used of {quota} under This site's faces.
• A face's source shows as Google Fonts, Uploaded or Shipped with the site.
• A family the live site draws shows On the live site.

Pitfalls #

• You answer for an uploaded font's licence. Google Fonts families are open source, mostly under the SIL Open Font License. A commercial font's licence often covers one client or one site: upload it only on the site it covers, and never into a site you will copy for another client.
• Uploads are WOFF2 only, one file per weight and style, up to 2 MB a file and 20 MB of fonts per site unless your installation sets other limits. The admin shows the file limit under the file picker (One file per weight and style. Up to 2.00 MB.) and the site's total in {used} used of {quota}.
• Delete family is refused while a family role uses the family: "{family} is still used by {roles}. Choose another family for these roles in Font families, then delete {family}." A family On the live site can be deleted: the live site keeps it until you publish, and Undo restores it.
• In use, no face on this site: a text style names a family the site has no file for, so visitors see the fallback.
• A Google Fonts import needs the server to reach fonts.googleapis.com and fonts.gstatic.com. If the import fails, upload the WOFF2 files instead.
• Type changes reach the public site when you publish.

Related #

• Colours, space and themes
• Components and variants
• Your first site (brand setup picks the heading and body fonts)
• Publish and versions