Typo

Typeface

Futura Condensed

.snx-font-base / var(--font-family-base)

Font light

.snx-font-weight-light / var(--font-weight-light)

Font bold

.snx-font-weight-bold / var(--font-weight-bold)

Font extra bold

.snx-font-weight-extra-bold / var(--font-weight-extra-bold)

Subtitles

Heading style 01

.snx-font-heading-01 / var(--font-heading-01-font-size)

Heading style 02

.snx-font-heading-02 / var(--font-heading-02-font-size)

Heading style 03

.snx-font-heading-03 / var(--font-heading-03-font-size)

Heading style 04

.snx-font-heading-04 / var(--font-heading-04-font-size)

Heading style 05

.snx-font-heading-05 / var(--font-heading-05-font-size)

Heading style 06

.snx-font-heading-06 / var(--font-heading-06-font-size)

Headings

Subtitle style 01

.snx-font-subtitle-01 / var(--font-subtitle-01-font-size)

Subtitle style 02

.snx-font-subtitle-02 / var(--font-subtitle-02-font-size)

Subtitle style 03

.snx-font-subtitle-03 / var(--font-subtitle-03-font-size)

Body Text

Body text large

.snx-font-body-01 / var(--font-body-01-font-size)

Body text default

.snx-font-body-02 / var(--font-body-02-font-size)

Body small

.snx-font-body-03 / var(--font-body-03-font-size)

Interactions

Interaction text large

.snx-font-interaction-01 / var(--font-interaction-01-font-size)

Interaction text default

.snx-font-interaction-02 / var(--font-interaction-02-font-size)

Interaction small

.snx-font-interaction-03 / var(--font-interaction-03-font-size)

Captions and Overlines

Caption text large

.snx-font-caption-01 / var(--font-caption-01-font-size)

Caption text default

.snx-font-caption-02 / var(--font-caption-02-font-size)

Using the licensed font

To use the official font you have to be licensed by sonax. If your domain is licensed you can embed and load the font by adding this <link> tag to the head of your document:

<link
  crossorigin
  rel="stylesheet"
  type="text/css"
  href="https://fonts.sonax.com/assets/style.css"
/>

Please note the attribute crossorigin. Without this attribute the font will not load.

For React / JSX add the crossorigin attribute like this:

<link
  crossOrigin=''
  rel='stylesheet'
  type='text/css'
  href='https://fonts.sonax.com/assets/style.css'
/>

For more information on how to obtain a license contact sonax.