# Font

Font filters modify [font objects](/docs/theme/references/liquid/objects/font), which are defined in font [theme settings](/docs/theme/architecture/settings/input-settings#font_picker). You can use font filters to load fonts or to obtain font variants.

To learn how to access the settings of the theme, refer to [Settings](/docs/theme/architecture/settings/overview#access-settings).

Refer to [Shoplazza font library](/docs/theme/architecture/settings/fonts#available-fonts) for a list of all fonts and their variants.

## font\_face

`font | font_face`

returns  [string](../basics/liquid-types#string)

Generates a CSS [@font\_face declaration](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) to load the provided font.

**Code**

```liquid
{{ settings.type_text_font_family | font_face }}
```

**Output**

```css
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v13/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2) format('woff2');
}
```

## font\_url

`font | font_url`

returns  [string](../basics/liquid-types#string)

Returns the CDN URL for the provided font in woff2 format.

**Code**

```liquid
{{ settings.type_text_font_family | font_url }}
```

**Output**

```text
https://fonts.gstatic.com/s/jost/v13/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2
```