Fonts

Upload and manage fonts in your design system.

Using font sources in tokens

Fonts - token preview in table

Font files can be used to provide font previews in Font family or Typography tokens. You can see the font preview both in the tokens table, and in the token detail drawer.

When creating Font family or Typography tokens, you can simply select the relevant font in the Value field of the token detail panel.

Upload preview font

Missing preview font

Missing preview font

If you have used a custom font in a design token, but haven't yet uploaded the font file to Supernova, the font will show up as missing. You can fix this by simply uploading the font file!


FAQ

Why does my typography token not display correctly, even though I uploaded the file?

Some fonts organize their variations differently. Take these two fonts for example:

Variation as Font family

Variation as Font weight/style

Font family: Roboto Condensed

Font weight/style: Bold

Font family: Arial

Font weight/style: Condensed Bold

To ensure your typography tokens display correctly, align the Font family and Font weight/style properties in Supernova with the configuration in Figma.

My typography setup for Figma and code differs. How can I export tokens to be aligned with code?

It may happen that your destination (such as CSS) requires adjustment of the token values to work properly. In the example below you can see, that in Figma typography Condensed is part of Font weight/style, while in CSS it needs to be as part of font-family .

Figma font properties

Needed code

Font family: Arial

Font weight/style: Condensed Bold

font-family: ArialCondensed

font-weight: 700

To achieve that, you need to create a workaround, by adding a theme, where you can override any token values (and their units).

  1. Create a new theme for your typography tokens.
    • Name it accordingly to the destination, e.g. Web overrides.
  2. Enter values to tokens theme that are relevant to the destination.
  3. While creating new pipeline for design tokens, apply theme to get the correct values exported.

See Theme tokens to learn more about creating and editing theme.