import FontSample, { FontStyle, FontSwatch } from './FontSample.jsx'

# Font Families

<br />

## Gilmer

**Gilmer** is a fresh, geometric, sans-serif font family desgined by Piotr Łapa. It is our primary brand font and should be used for headlines, sub-headlines, navigation, buttons, CTAs, and labels.

| CSS Custom Property | Supported Weights          | Supported Styles |
| ------------------- | -------------------------- | ---------------- |
| `--font-display`    | `300`, `400`, `500`, `700` | `normal`         |

<FontSample
  customProperty="--font-display"
  fontWeights={[300, 400, 500, 700]}
/>

## Metro

Designed by Samuel Oakes, **Metro Sans** is the result of a study into the Paris Metro system; Metro Sans is a Grotesk typeface with personality. It bridges the gap between the stern terminals of a Swiss Neo-Grotesk, and the smooth curves of a modern day Geo-Grotesk. The two combine to give a versatile typeface that works well in both body and display weights.

| CSS Custom Property | Supported Weights   | Supported Styles |
| ------------------- | ------------------- | ---------------- |
| `--font-body`       | `300`, `600`, `700` | `normal`         |

<FontSample customProperty="--font-body" fontWeights={[300, 600, 700]} />

## DejaVu

**DejaVu Sans Mono** is a monospaced sans-serif typeface, based on the Bitstream Vera Monospace typeface designed by Jim Lyles. It should be used for all code snippets or labels.

| CSS Custom Property | Supported Weights | Supported Styles |
| ------------------- | ----------------- | ---------------- |
| `--font-monospace`  | `400`             | `normal`         |

<FontSample customProperty="--font-monospace" fontWeights={[400]} />
<FontStyle />