---
url: https://docs.youcan.shop/themes/filters/fonts/fontFace.md
---
# Font Face

Returns the `@font-face` rules that load a [font](/themes/objects/font) from Google. Put the result in a `{% style %}` tag or a `<style>` element. A system font returns nothing.

## Parameters

* `font_display`: the `font-display` value, for example `swap`. It is not set by default.

## Example

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

::: tip Output
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/playfairdisplay/...woff2) format('woff2');
unicode-range: U+0000-00FF, ...;
}
:::