# Typography

### <mark style="color:purple;">**Spotlight**</mark> has 4 variants of font-pairings:

1. Sans-serif (default)
2. Serif
3. Technology
4. Minimalism

This setting changes fonts for headings, body, buttons and navigation depending on the selected font-pairing.&#x20;

## To customize:

1. Go to **Settings > Design & branding** from the admin menu
2. Click **Site-wide** in the **Design** settings sidebar on the right
3. Click and select your preferred font-pairing in the **Typography** menu item

## Font-families:

### Sans-serif

Font-family **headings**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **body**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **buttons**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

### Serif

Font-family **headings**:

```css
'Gloock', serif;
```

Font-family **body**:

```
'Instrument Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'Instrument Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'Instrument Sans', sans-serif;
```

{% endcode %}

### Technology

Font-family **headings**:

```css
'Plus Jakarta Sans', sans-serif;
```

Font-family **body**:

```
'Plus Jakarta Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'Plus Jakarta Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}

### Minimalism

Font-family **headings**:

```css
'DM Sans', sans-serif;
```

Font-family **body**:

```
'DM Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}