---
url: https://docs.youcan.shop/themes/objects/font.md
---

# `font` object

A font picked with a [font\_picker](/themes/settings/input_settings#font_picker) setting. Google fonts are loaded from Google with [font\_face](/themes/filters/fonts/fontFace). System fonts load nothing.

### Properties

***

| Name                | Type                                  | Description |
| ------------------- | :-----------------------------------: | :---------- |
| `family`            | [string](/themes/basics/types#string) | The family name, for example `Playfair Display`. System fonts are `system-ui`, `ui-serif` or `ui-monospace`. |
| `weight`            | [number](/themes/basics/types#number) | The weight, from `100` to `900`. |
| `style`             | [string](/themes/basics/types#string) | `normal` or `italic`. |
| `fallback_families` | [string](/themes/basics/types#string) | The generic families to use after the font, for example `serif`. For system fonts it is the full system font stack. |
| `system?`           | [boolean](/themes/basics/types#boolean) | Whether the font is a system font. |
| `variants`          | array of `font`                       | Every weight and style the family has. |

```liquid
{% style %}
  {{ settings.heading_font | font_face: font_display: 'swap' }}

  h1, h2, h3 {
    font-family: {{ settings.heading_font.family }}, {{ settings.heading_font.fallback_families }};
    font-weight: {{ settings.heading_font.weight }};
    font-style: {{ settings.heading_font.style }};
  }
{% endstyle %}
```