---
title: "Liquid filters: font_face"
description: Generates a CSS [`@font_face` declaration](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) to load the provided font.
api_name: liquid
source_url:
  html: https://shopify.dev/docs/api/liquid/filters/font_face
  md: https://shopify.dev/docs/api/liquid/filters/font_face.md
---

# font\_​face

```oobleck
font | font_face
```

returns [string](https://shopify.dev/docs/api/liquid/basics#string)

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

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

## Output

```html
@font-face {
  font-family: Assistant;
  font-weight: 400;
  font-style: normal;
  src: url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.9120912a469cad1cc292572851508ca49d12e768.woff2?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=44321b814b39f99d7a57aed524c140f4c10ef8f09b31a607e95e7810bf07decb") format("woff2"),
       url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=1776c6cf10ada605c03c3291c2db78487fed84434a95b4e6c0c9822239e63c47") format("woff");
}
```

### font\_display

```oobleck
font | font_face: font_display: string
```

You can include an optional parameter to specify the [`font_display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) of the `@font_face` declaration.

```liquid
{{ settings.type_header_font | font_face: font_display: 'swap' }}
```

## Output

```html
@font-face {
  font-family: Assistant;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.9120912a469cad1cc292572851508ca49d12e768.woff2?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=44321b814b39f99d7a57aed524c140f4c10ef8f09b31a607e95e7810bf07decb") format("woff2"),
       url("//polinas-potent-potions.myshopify.com/cdn/fonts/assistant/assistant_n4.6e9875ce64e0fefcd3f4446b7ec9036b3ddd2985.woff?h1=cG9saW5hcy1wb3RlbnQtcG90aW9ucy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=1776c6cf10ada605c03c3291c2db78487fed84434a95b4e6c0c9822239e63c47") format("woff");
}
```