# 字体过滤器

> Shoplazza Theme 的 Liquid 字体过滤器：font_face 和 font_url，用于加载字体或为 font_picker 设置产生的 font 对象生成地址。

Font filters 用于修改 [font objects](/zh-CN/docs/theme/references/liquid/objects/font)，这些 objects 在字体[主题设置](/zh-CN/docs/theme/architecture/settings/input-settings#font_picker)中定义。您可以使用 font filters 加载字体或获取字体变体。

要了解如何访问主题设置，请参阅 [Settings](/zh-CN/docs/theme/architecture/settings/overview#%E8%AE%BF%E9%97%AE%E8%AE%BE%E7%BD%AE)。

请参阅 [Shoplazza 字体库](/zh-CN/docs/theme/architecture/settings/fonts#%E5%8F%AF%E7%94%A8%E5%AD%97%E4%BD%93) 获取所有字体及其变体的列表。

## font_face

`font | font_face`

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

生成 CSS [@font_face 声明](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face) 以加载给定的字体。

**代码**

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

**输出**

```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)

返回给定字体 woff2 格式的 CDN URL。

**代码**

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

**输出**

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