# 字体

您可以通过以下方式为 theme 添加字体：

*   使用 [Shoplazza 字体库](/zh-CN/docs/theme/architecture/settings/fonts#%E5%8F%AF%E7%94%A8%E5%AD%97%E4%BD%93)中的字体
*   使用[自定义字体](/zh-CN/docs/theme/architecture/settings/fonts#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E4%BD%93)

**提示**

通常情况下，字体是一种单独的资源，浏览器需要先下载后才能渲染文字，这会影响商店的整体性能。为了提升 theme 的性能，商家可以从 Shoplazza 字体库的[系统字体](/zh-CN/docs/theme/architecture/settings/fonts#%E7%B3%BB%E7%BB%9F%E5%AD%97%E4%BD%93)分类中选择字体。这类字体已预装在客户的电脑上，无需浏览器额外下载即可渲染文字。

## 系统字体

系统字体是已预装在用户电脑上的字体，浏览器无需下载即可渲染文字，从而提升 theme 的性能。系统字体已包含在[可用字体](/zh-CN/docs/theme/architecture/settings/fonts#%E5%8F%AF%E7%94%A8%E5%AD%97%E4%BD%93)列表中，并标注了系统标识，在主题编辑器的字体选择器中会显示在系统字体分类下。

如果您选择使用系统字体，则用于渲染文字的字体取决于用户的操作系统。系统字体分为两种通用类型，以下是各类型的示例字体：

*   `sans-serif`：BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 和 Helvetica Neue。
*   `serif`：Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 和 Source Serif Pro。

## 自定义字体

如果您想使用 Shoplazza 字体库中未包含的字体，可以使用来自第三方解决方案（如 [Google Fonts](https://fonts.google.com/)）的字体。

对于大多数第三方字体解决方案，您可以通过以下方式将字体引入 theme：

*   [通过第三方托管引用字体](/zh-CN/docs/theme/architecture/settings/fonts#%E7%AC%AC%E4%B8%89%E6%96%B9%E6%89%98%E7%AE%A1%E5%AD%97%E4%BD%93)
*   [将字体文件上传到 theme](/zh-CN/docs/theme/architecture/settings/fonts#%E5%9C%A8-theme-%E4%B8%AD%E6%89%98%E7%AE%A1%E5%AD%97%E4%BD%93)

如果您在 theme 中包含自定义字体，并希望为商家提供选择字体的功能，则需要创建一个选择设置（例如 [select 设置](/zh-CN/docs/theme/architecture/settings/input-settings#select)）。然后在 CSS 中引用该设置值来定义相关元素使用的字体。

### 第三方托管字体

如果字体托管于第三方，对方通常会提供在 theme 中引入字体的 `<link>` 标签：

**代码**

```html
<link rel="stylesheet" href="[font-style-url]">
```

**提示**

`<link>` 标签通常包含在 `theme.liquid` 或您选择的 [layout](/zh-CN/docs/theme/architecture/layouts/overview) 文件中。

### 在 theme 中托管字体

如果您有自己的字体文件，请按以下步骤将字体引入 theme：

#### 非管理员方式

如果您计划通过 Shoplazza CLI 推送 theme 到商店、上传 theme ZIP 文件或通过 Shoplazza Theme Store 分发字体，则应将字体存储在 theme 的 assets 文件夹中。以下步骤应在本地代码编辑器中操作，而非管理后台代码编辑器。

1.  将字体文件添加到 [assets 目录](/zh-CN/docs/theme/architecture/overview#assets)。
2.  创建 `@font-face` CSS 规则以便引用字体，使用 [shoplaza\_asset\_url filter](/zh-CN/docs/theme/references/liquid/filters/hosted-file#shoplaza_asset_url) 输出字体文件的 URL：

```css
@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | shoplazza_asset_url }}") format("[font-format]");
}
```

## 为 theme 添加 Shoplazza 字体

以下概述了如何在 theme 中使用 Shoplazza 字体库中的字体：

*   添加 [font\_picker](/zh-CN/docs/theme/architecture/settings/input-settings#font_picker) 类型设置，允许商家在主题编辑器中选择字体。该设置的值以 [font 对象](/zh-CN/docs/theme/references/liquid/objects/font)返回。
*   使用以下任一 [font filter](/zh-CN/docs/theme/references/liquid/filters/font) 加载所选字体：
    *   使用 [font\_face](/zh-CN/docs/theme/references/liquid/filters/font#font_face) filter 插入默认的 `@font-face` 声明。
    *   使用 [font\_url](/zh-CN/docs/theme/references/liquid/filters/font#font_url) filter 访问 CDN URL，以创建自定义的 `@font-face` 声明。
*   引用所选字体来设置特定的 CSS 样式，例如 [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)、[font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) 和 [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)。

## 可用字体

以下字体可在所有 Shoplazza 在线商店中免费使用：

[Sans-serif](#font-sans-serif) system

Sans-serif

1 variant

[Serif](#font-serif) system

Serif

1 variant

[Abril Fatface](https://fonts.google.com/specimen/Abril+Fatface?query=abril+fatfa)

Abril Fatface

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Abril Fatface | `abril_fatface_n4` |

[Amiri](https://fonts.google.com/specimen/Amiri?query=Amiri)

Amiri

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Amiri | `amiri_n4` |
| Amiri Italic | `amiri_i4` |
| Amiri Bold | `amiri_n7` |
| Amiri Bold Italic | `amiri_i7` |

[Archivo](https://fonts.google.com/specimen/Archivo?query=Archivo)

Archivo

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Archivo Thin | `archivo_n1` |
| Archivo Thin Italic | `archivo_i1` |
| Archivo Extra Light | `archivo_n2` |
| Archivo Extra Light Italic | `archivo_i2` |
| Archivo Light | `archivo_n3` |
| Archivo Light Italic | `archivo_i3` |
| Archivo | `archivo_n4` |
| Archivo Italic | `archivo_i4` |
| Archivo Medium | `archivo_n5` |
| Archivo Medium Italic | `archivo_i5` |
| Archivo Semi Bold | `archivo_n6` |
| Archivo Semi Bold Italic | `archivo_i6` |
| Archivo Bold | `archivo_n7` |
| Archivo Bold Italic | `archivo_i7` |
| Archivo Extra Bold | `archivo_n8` |
| Archivo Extra Bold Italic | `archivo_i8` |
| Archivo Black | `archivo_n9` |
| Archivo Black Italic | `archivo_i9` |

[Archivo Black](https://fonts.google.com/specimen/Archivo+Black?query=Archivo+Black)

Archivo Black

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Archivo Black | `archivo_black_n4` |

[Arimo](https://fonts.google.com/specimen/Arimo?query=Arimo)

Arimo

8 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Arimo | `arimo_n4` |
| Arimo Italic | `arimo_i4` |
| Arimo Medium | `arimo_n5` |
| Arimo Medium Italic | `arimo_i5` |
| Arimo Semi Bold | `arimo_n6` |
| Arimo Semi Bold Italic | `arimo_i6` |
| Arimo Bold | `arimo_n7` |
| Arimo Bold Italic | `arimo_i7` |

[Arvo](https://fonts.google.com/specimen/Arvo?query=Arvo)

Arvo

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Arvo | `amiri_n4` |
| Arvo Italic | `amiri_i4` |
| Arvo Bold | `amiri_n7` |
| Arvo Bold Italic | `amiri_i7` |

[Bakbak One](https://fonts.google.com/specimen/Bakbak+One?query=Bakbak+One)

Bakbak One

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Bakbak One | `bakbak_one_n4` |

[Cardo](https://fonts.google.com/specimen/Cardo?query=Cardo)

Cardo

3 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Cardo | `cardo_n4` |
| Cardo Italic | `cardo_i4` |
| Cardo Bold | `cardo_n7` |

[Caudex](https://fonts.google.com/specimen/Caudex?query=Caudex)

Caudex

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Caudex | `caudex_n4` |
| Caudex Italic | `caudex_i4` |
| Caudex Bold | `caudex_n7` |
| Caudex Bold Italic | `caudex_i7` |

[Concert One](https://fonts.google.com/specimen/Concert+One?query=Concert+One)

Concert One

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Concert One | `concert_one_n4` |

[Cormorant](https://fonts.google.com/specimen/Cormorant?query=Cormorant)

Cormorant

10 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Cormorant Light | `cormorant_n3` |
| Cormorant Light Italic | `cormorant_i3` |
| Cormorant | `cormorant_n4` |
| Cormorant Italic | `cormorant_i4` |
| Cormorant Medium | `cormorant_n5` |
| Cormorant Medium Italic | `cormorant_i5` |
| Cormorant Semi Bold | `cormorant_n6` |
| Cormorant Semi Bold Italic | `cormorant_i6` |
| Cormorant Bold | `cormorant_n7` |
| Cormorant Bold Italic | `cormorant_i7` |

[Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond?query=Cormorant+Garamond)

Cormorant Garamond

10 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Cormorant Garamond Light | `cormorant_garamond_n3` |
| Cormorant Garamond Light Italic | `cormorant_garamond_i3` |
| Cormorant Garamond | `cormorant_garamond_n4` |
| Cormorant Garamond Italic | `cormorant_garamond_i4` |
| Cormorant Garamond Medium | `cormorant_garamond_n5` |
| Cormorant Garamond Medium Italic | `cormorant_garamond_i5` |
| Cormorant Garamond Semi Bold | `cormorant_garamond_n6` |
| Cormorant Garamond Semi Bold Italic | `cormorant_garamond_i6` |
| Cormorant Garamond Bold | `cormorant_garamond_n7` |
| Cormorant Garamond Bold Italic | `cormorant_garamond_i7` |

[Crimson Pro](https://fonts.google.com/specimen/Crimson+Pro?query=Crimson+Pro)

Crimson Pro

16 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Crimson Pro Extra Light | `crimson_pro_n2` |
| Crimson Pro Extra Light italic | `crimson_pro_i2` |
| Crimson Pro Light | `crimson_pro_n3` |
| Crimson Pro Light Italic | `crimson_pro_i3` |
| Crimson Pro | `crimson_pro_n4` |
| Crimson Pro Italic | `crimson_pro_i4` |
| Crimson Pro Medium | `crimson_pro_n5` |
| Crimson Pro Medium Italic | `crimson_pro_i5` |
| Crimson Pro Semi Bold | `crimson_pro_n6` |
| Crimson Pro Semi Bold Italic | `crimson_pro_i6` |
| Crimson Pro Bold | `crimson_pro_n7` |
| Crimson Pro Bold Italic | `crimson_pro_i7` |
| Crimson Pro Extra Bold | `crimson_pro_n8` |
| Crimson Pro Extra Bold Italic | `crimson_pro_i8` |
| Crimson Pro Black | `crimson_pro_n9` |
| Crimson Pro Black Italic | `crimson_pro_i9` |

[Didact Gothic](https://fonts.google.com/specimen/Didact+Gothic?query=Didact+Gothic)

Didact Gothic

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Didact Gothic | `didact_gothic_n4` |

[Eater](https://fonts.google.com/specimen/Eater?query=Eater)

Eater

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Eater | `eater_n4` |

[Eczar](https://fonts.google.com/specimen/Eczar?query=Eczar)

Eczar

5 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Eczar | `eczar_n4` |
| Eczar Medium | `eczar_n5` |
| Eczar Semi Bold | `eczar_n6` |
| Eczar Bold | `eczar_n7` |
| Eczar Extra Bold | `eczar_n8` |

[Exo 2](https://fonts.google.com/specimen/Exo+2?query=Exo+2)

Exo 2

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Exo 2 Thin | `exo_2_n1` |
| Exo 2 Thin Italic | `exo_2_i1` |
| Exo 2 Extra Light | `exo_2_n2` |
| Exo 2 Extra Light Italic | `exo_2_i2` |
| Exo 2 Light | `exo_2_n3` |
| Exo 2 Light Italic | `exo_2_i3` |
| Exo 2 | `exo_2_n4` |
| Exo 2 Italic | `exo_2_i4` |
| Exo 2 Medium | `exo_2_n5` |
| Exo 2 Medium Italic | `exo_2_i5` |
| Exo 2 Semi Bold | `exo_2_n6` |
| Exo 2 Semi Bold Italic | `exo_2_i6` |
| Exo 2 Bold | `exo_2_n7` |
| Exo 2 Bold Italic | `exo_2_i7` |
| Exo 2 Extra Bold | `exo_2_n8` |
| Exo 2 Extra Bold Italic | `exo_2_i8` |
| Exo 2 Black | `exo_2_n9` |
| Exo 2 Black Italic | `exo_2_i9` |

[Fira Sans](https://fonts.google.com/specimen/Fira+Sans?query=Fira+Sans)

Fira Sans

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Fira Sans Thin | `fira_sans_n1` |
| Fira Sans Thin Italic | `fira_sans_i1` |
| Fira Sans Extra Light | `fira_sans_n2` |
| Fira Sans Extra Light Italic | `fira_sans_i2` |
| Fira Sans Light | `fira_sans_n3` |
| Fira Sans Light Italic | `fira_sans_i3` |
| Fira Sans | `fira_sans_n4` |
| Fira Sans Italic | `fira_sans_i4` |
| Fira Sans Medium | `fira_sans_n5` |
| Fira Sans Medium Italic | `fira_sans_i5` |
| Fira Sans Semi Bold | `fira_sans_n6` |
| Fira Sans Semi Bold Italic | `fira_sans_i6` |
| Fira Sans Bold | `fira_sans_n7` |
| Fira Sans Bold Italic | `fira_sans_i7` |
| Fira Sans Extra Bold | `fira_sans_n8` |
| Fira Sans Extra Bold Italic | `fira_sans_i8` |
| Fira Sans Black | `fira_sans_n9` |
| Fira Sans Black Italic | `fira_sans_i9` |

[Fjalla One](https://fonts.google.com/specimen/Fjalla+One?query=Fjalla+One)

Fjalla One

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Fjalla One | `fjalla_one_n4` |

[Frank Ruhl Libre](https://fonts.google.com/specimen/Frank+Ruhl+Libre?query=Frank+Ruhl+Libre)

Frank Ruhl Libre

5 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Frank Ruhl Libre Light | `frank_ruhl_libre_n3` |
| Frank Ruhl Libre | `frank_ruhl_libre_n4` |
| Frank Ruhl Libre Medium | `frank_ruhl_libre_n5` |
| Frank Ruhl Libre Bold | `frank_ruhl_libre_n7` |
| Frank Ruhl Libre Black | `frank_ruhl_libre_n9` |

[Heebo](https://fonts.google.com/specimen/Heebo?query=Heebo)

Heebo

9 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Heebo Thin | `heebo_n1` |
| Heebo Extra Light | `heebo_n2` |
| Heebo Light | `heebo_n3` |
| Heebo | `heebo_n4` |
| Heebo Medium | `heebo_n5` |
| Heebo Semi Bold | `heebo_n6` |
| Heebo Bold | `heebo_n7` |
| Heebo Extra Bold | `heebo_n8` |
| Heebo Black | `heebo_n9` |

[Hind](https://fonts.google.com/specimen/Hind?query=Hind)

Hind

5 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Heebo Light | `heebo_n3` |
| Heebo | `heebo_n4` |
| Heebo Medium | `heebo_n5` |
| Heebo Semi Bold | `heebo_n6` |
| Heebo Bold | `heebo_n7` |

[Hind Siliguri](https://fonts.google.com/specimen/Hind+Siliguri?query=Hind)

Hind Siliguri

5 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Hind Siliguri Light | `hind_siliguri_n3` |
| Hind Siliguri | `hind_siliguri_n4` |
| Hind Siliguri Medium | `hind_siliguri_n5` |
| Hind Siliguri Semi Bold | `hind_siliguri_n6` |
| Hind Siliguri Bold | `hind_siliguri_n7` |

[Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans?query=Josefin+Sans)

Josefin Sans

14 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Josefin Sans Thin | `josefin_sans_n1` |
| Josefin Sans Thin Italic | `josefin_sans_i1` |
| Josefin Sans Extra Light | `josefin_sans_n2` |
| Josefin Sans Extra Light Italic | `josefin_sans_i2` |
| Josefin Sans Light | `josefin_sans_n3` |
| Josefin Sans Light Italic | `josefin_sans_i3` |
| Josefin Sans | `josefin_sans_n4` |
| Josefin Sans Italic | `josefin_sans_i4` |
| Josefin Sans Medium | `josefin_sans_n5` |
| Josefin Sans Medium Italic | `josefin_sans_i5` |
| Josefin Sans Semi Bold | `josefin_sans_n6` |
| Josefin Sans Semi Bold Italic | `josefin_sans_i6` |
| Josefin Sans Bold | `josefin_sans_n7` |
| Josefin Sans Bold Italic | `josefin_sans_i7` |

[Jost](https://fonts.google.com/specimen/Jost?query=Jost)

Jost

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Jost Thin | `jost_n1` |
| Jost Thin Italic | `jost_i1` |
| Jost Extra Light | `jost_n2` |
| Jost Extra Light Italic | `jost_i2` |
| Jost Light | `jost_n3` |
| Jost Light Italic | `jost_i3` |
| Jost | `jost_n4` |
| Jost Italic | `jost_i4` |
| Jost Medium | `jost_n5` |
| Jost Medium Italic | `jost_i5` |
| Jost Semi Bold | `jost_n6` |
| Jost Semi Bold Italic | `jost_i6` |
| Jost Bold | `jost_n7` |
| Jost Bold Italic | `jost_i7` |
| Jost Extra Bold | `jost_n8` |
| Jost Extra Bold Italic | `jost_i8` |
| Jost Black | `jost_n9` |
| Jost Black Italic | `jost_i9` |

[Karla](https://fonts.google.com/specimen/Karla?query=Karla)

Karla

14 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Karla Extra Light | `karla_n2` |
| Karla Extra Light Italic | `karla_i2` |
| Karla Light | `karla_n3` |
| Karla Light Italic | `karla_i3` |
| Karla | `karla_n4` |
| Karla Italic | `karla_i4` |
| Karla Medium | `karla_n5` |
| Karla Medium Italic | `karla_i5` |
| Karla Semi Bold | `karla_n6` |
| Karla Semi Bold Italic | `karla_i6` |
| Karla Bold | `karla_n7` |
| Karla Bold Italic | `karla_i7` |
| Karla Extra Bold | `karla_n8` |
| Karla Extra Bold Italic | `karla_i8` |

[Lato](https://fonts.google.com/specimen/Lato?query=Lato)

Lato

10 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Lato Thin | `lato_n1` |
| Lato Thin Italic | `lato_i1` |
| Lato Light | `lato_n3` |
| Lato Light Italic | `lato_i3` |
| Lato | `lato_n4` |
| Lato Italic | `lato_i4` |
| Lato Bold | `lato_n7` |
| Lato Bold Italic | `lato_i7` |
| Lato Black | `lato_n9` |
| Lato Black Italic | `lato_i9` |

[Lexend](https://fonts.google.com/specimen/Lexend?query=Lexend)

Lexend

9 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Lexend Thin | `lexend_n1` |
| Lexend Extra Light | `lexend_n2` |
| Lexend Light | `lexend_n3` |
| Lexend | `lexend_n4` |
| Lexend Medium | `lexend_n5` |
| Lexend Semi Bold | `lexend_n6` |
| Lexend Bold | `lexend_n7` |
| Lexend Extra Bold | `lexend_n8` |
| Lexend Black | `lexend_n9` |

[Lobster Two](https://fonts.google.com/specimen/Lobster+Two?query=Lobster+Two)

Lobster Two

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Lobster Two | `lobster_two_n4` |
| Lobster Two Italic | `lobster_two_i4` |
| Lobster Two Bold | `lobster_two_n7` |
| Lobster Two Bold Italic | `lobster_two_i7` |

[Lora](https://fonts.google.com/specimen/Lora?query=Lora)

Lora

8 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Lora | `lora_n4` |
| Lora Italic | `lora_i4` |
| Lora Medium | `lora_n5` |
| Lora Medium Italic | `lora_i5` |
| Lora Semi Bold | `lora_n6` |
| Lora Semi Bold Italic | `lora_i6` |
| Lora Bold | `lora_n7` |
| Lora Bold Italic | `lora_i7` |

[Lusitana](https://fonts.google.com/specimen/Lusitana?query=Lusitana)

Lusitana

2 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Lusitana | `lusitana_n4` |
| Lusitana Bold | `lusitana_n7` |

[Marcellus](https://fonts.google.com/specimen/Marcellus?query=Marcellus)

Marcellus

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Marcellus | `marcellus_n4` |

[Merriweather](https://fonts.google.com/specimen/Merriweather?query=Merriweather)

Merriweather

8 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Merriweather Light | `merriweather_n3` |
| Merriweather Light Italic | `merriweather_i3` |
| Merriweather | `merriweather_n4` |
| Merriweather Italic | `merriweather_i4` |
| Merriweather Bold | `merriweather_n7` |
| Merriweather Bold Italic | `merriweather_i7` |
| Merriweather Black | `merriweather_n9` |
| Merriweather Black Italic | `merriweather_i9` |

[Modern Antiqua](https://fonts.google.com/specimen/Modern+Antiqua?query=Modern+Antiqua)

Modern Antiqua

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Modern Antiqua | `modern_antiqua_n4` |

[Monda](https://fonts.google.com/specimen/Monda?query=Monda)

Monda

2 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Monda | `monda_n4` |
| Monda Bold | `monda_n7` |

[Montserrat](https://fonts.google.com/specimen/Montserrat?query=Montserrat)

Montserrat

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Montserrat Thin | `montserrat_n1` |
| Montserrat Thin Italic | `montserrat_i1` |
| Montserrat Extra Light | `montserrat_n2` |
| Montserrat Extra Light Italic | `montserrat_i2` |
| Montserrat Light | `montserrat_n3` |
| Montserrat Light Italic | `montserrat_i3` |
| Montserrat | `montserrat_n4` |
| Montserrat Italic | `montserrat_i4` |
| Montserrat Medium | `montserrat_n5` |
| Montserrat Medium Italic | `montserrat_i5` |
| Montserrat Semi Bold | `montserrat_n6` |
| Montserrat Semi Bold Italic | `montserrat_i6` |
| Montserrat Bold | `montserrat_n7` |
| Montserrat Bold Italic | `montserrat_i7` |
| Montserrat Extra Bold | `montserrat_n8` |
| Montserrat Extra Bold Italic | `montserrat_i8` |
| Montserrat Black | `montserrat_n9` |
| Montserrat Black Italic | `montserrat_i9` |

[Mukta Mahee](https://fonts.google.com/specimen/Mukta+Mahee?query=Mukta+Mahee)

Mukta Mahee

7 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Mukta Mahee Extra Light | `mukta_mahee_n2` |
| Mukta Mahee Light | `mukta_mahee_n3` |
| Mukta Mahee | `mukta_mahee_n4` |
| Mukta Mahee Medium | `mukta_mahee_n5` |
| Mukta Mahee Semi Bold | `mukta_mahee_n6` |
| Mukta Mahee Bold | `mukta_mahee_n7` |
| Mukta Mahee Extra Bold | `mukta_mahee_n8` |

[Mulish](https://fonts.google.com/specimen/Mulish?query=Mulish)

Mulish

16 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Mulish Extra Light | `mulish_n2` |
| Mulish Extra Light Italic | `mulish_i2` |
| Mulish Light | `mulish_n3` |
| Mulish Light Italic | `mulish_i3` |
| Mulish | `mulish_n4` |
| Mulish Italic | `mulish_i4` |
| Mulish Medium | `mulish_n5` |
| Mulish Medium Italic | `mulish_i5` |
| Mulish Semi Bold | `mulish_n6` |
| Mulish Semi Bold Italic | `mulish_i6` |
| Mulish Bold | `mulish_n7` |
| Mulish Bold Italic | `mulish_i7` |
| Mulish Extra Bold | `mulish_n8` |
| Mulish Extra Bold Italic | `mulish_i8` |
| Mulish Black | `mulish_n9` |
| Mulish Black Italic | `mulish_i9` |

[Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans?query=Noto+Sans)

Noto Sans

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Noto Sans | `noto_sans_n4` |
| Noto Sans Italic | `noto_sans_i4` |
| Noto Sans Bold | `noto_sans_n7` |
| Noto Sans Bold Italic | `noto_sans_i7` |

[Noto Serif](https://fonts.google.com/noto/specimen/Noto+Serif?query=Noto+Serif)

Noto Serif

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Noto Serif | `noto_serif_n4` |
| Noto Serif Italic | `noto_serif_i4` |
| Noto Serif Bold | `noto_serif_n7` |
| Noto Serif Bold Italic | `noto_serif_i7` |

[Nunito](https://fonts.google.com/specimen/Nunito?query=Nunito)

Nunito

16 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Nunito Extra Light | `nunito_n2` |
| Nunito Extra Light Italic | `nunito_i2` |
| Nunito Light | `nunito_n3` |
| Nunito Light Italic | `nunito_i3` |
| Nunito | `nunito_n4` |
| Nunito Italic | `nunito_i4` |
| Nunito Medium | `nunito_n5` |
| Nunito Medium Italic | `nunito_i5` |
| Nunito Semi Bold | `nunito_n6` |
| Nunito Semi Bold Italic | `nunito_i6` |
| Nunito Bold | `nunito_n7` |
| Nunito Bold Italic | `nunito_i7` |
| Nunito Extra Bold | `nunito_n8` |
| Nunito Extra Bold Italic | `nunito_i8` |
| Nunito Black | `nunito_n9` |
| Nunito Black Italic | `nunito_i9` |

[Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans?query=Nunito+Sans)

Nunito Sans

16 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Nunito Sans Extra Light | `nunito_sans_n2` |
| Nunito Sans Extra Light Italic | `nunito_sans_i2` |
| Nunito Sans Light | `nunito_sans_n3` |
| Nunito Sans Light Italic | `nunito_sans_i3` |
| Nunito Sans | `nunito_sans_n4` |
| Nunito Sans Italic | `nunito_sans_i4` |
| Nunito Sans Medium | `nunito_sans_n5` |
| Nunito Sans Medium Italic | `nunito_sans_i5` |
| Nunito Sans Semi Bold | `nunito_sans_n6` |
| Nunito Sans Semi Bold Italic | `nunito_sans_i6` |
| Nunito Sans Bold | `nunito_sans_n7` |
| Nunito Sans Bold Italic | `nunito_sans_i7` |
| Nunito Sans Extra Bold | `nunito_sans_n8` |
| Nunito Sans Extra Bold Italic | `nunito_sans_i8` |
| Nunito Sans Black | `nunito_sans_n9` |
| Nunito Sans Black Italic | `nunito_sans_i9` |

[Old Standard TT](https://fonts.google.com/specimen/Old+Standard+TT?query=Old+Standard+TT)

Old Standard TT

3 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Nunito Sans | `nunito_sans_n4` |
| Nunito Sans Italic | `nunito_sans_i4` |
| Nunito Sans Bold | `nunito_sans_n7` |

[Open Sans](https://fonts.google.com/specimen/Open+Sans?query=Open+Sans)

Open Sans

12 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Open Sans Light | `open_sans_n3` |
| Open Sans Light Italic | `open_sans_i3` |
| Open Sans | `open_sans_n4` |
| Open Sans Italic | `open_sans_i4` |
| Open Sans Medium | `open_sans_n5` |
| Open Sans Medium Italic | `open_sans_i5` |
| Open Sans Semi Bold | `open_sans_n6` |
| Open Sans Semi Bold Italic | `open_sans_i6` |
| Open Sans Bold | `open_sans_n7` |
| Open Sans Bold Italic | `open_sans_i7` |
| Open Sans Extra Bold | `open_sans_n8` |
| Open Sans Extra Bold Italic | `open_sans_i8` |

[Oranienbaum](https://fonts.google.com/specimen/Oranienbaum?query=Oranienbaum)

Oranienbaum

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Oranienbaum | `oranienbaum_n4` |

[Oswald](https://fonts.google.com/specimen/Oswald?query=Oswald)

Oswald

6 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Oswald Extra Light | `oswald_n2` |
| Oswald Light | `oswald_n3` |
| Oswald | `oswald_n4` |
| Oswald Medium | `oswald_n5` |
| Oswald Semi Bold | `oswald_n6` |
| Oswald Bold | `oswald_n7` |

[Overlock](https://fonts.google.com/specimen/Overlock?query=Overlock)

Overlock

6 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Overlock | `overlock_n4` |
| Overlock Italic | `overlock_i4` |
| Overlock Bold | `overlock_n7` |
| Overlock Bold Italic | `overlock_i7` |
| Overlock Black | `overlock_n9` |
| Overlock Black Italic | `overlock_i9` |

[Oxygen](https://fonts.google.com/specimen/Oxygen?query=Oxygen)

Oxygen

3 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Oxygen Light | `Oxygen_n3` |
| Oxygen | `Oxygen_n4` |
| Oxygen Bold | `Oxygen_n7` |

[PT Sans](https://fonts.google.com/specimen/PT+Sans?query=PT+Sans)

PT Sans

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| PT Sans | `pt_sans_n4` |
| PT Sans Italic | `pt_sans_i4` |
| PT Sans Bold | `pt_sans_n7` |
| PT Sans Bold Italic | `pt_sans_i7` |

[PT Serif](https://fonts.google.com/specimen/PT+Serif?query=PT+Serif)

PT Serif

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| PT Serif | `pt_serif_n4` |
| PT Serif Italic | `pt_serif_i4` |
| PT Serif Bold | `pt_serif_n7` |
| PT Serif Bold Italic | `pt_serif_i7` |

[Philosopher](https://fonts.google.com/specimen/Philosopher?query=Philosopher)

Philosopher

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Philosopher | `philosopher_n4` |
| Philosopher Italic | `philosopher_i4` |
| Philosopher Bold | `philosopher_n7` |
| Philosopher Bold Italic | `philosopher_i7` |

[Playfair Display](https://fonts.google.com/specimen/Playfair+Display?query=Playfair+Display)

Playfair Display

12 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Playfair Display | `playfair_display_n4` |
| Playfair Display Italic | `playfair_display_i4` |
| Playfair Display Medium | `playfair_display_n5` |
| Playfair Display Medium Italic | `playfair_display_i5` |
| Playfair Display Semi Bold | `playfair_display_n6` |
| Playfair Display Semi Bold Italic | `playfair_display_i6` |
| Playfair Display Bold | `playfair_display_n7` |
| Playfair Display Bold Italic | `playfair_display_i7` |
| Playfair Display Extra Bold | `playfair_display_n8` |
| Playfair Display Extra Bold Italic | `playfair_display_i8` |
| Playfair Display Black | `playfair_display_n9` |
| Playfair Display Black Italic | `playfair_display_i9` |

[Poly](https://fonts.google.com/specimen/Poly?query=Poly)

Poly

2 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Poly | `poly_n4` |
| Poly Italic | `poly_i4` |

[Poppins](https://fonts.google.com/specimen/Poppins?query=Poppins)

Poppins

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Poppins Thin | `poppins_n1` |
| Poppins Thin Italic | `poppins_i1` |
| Poppins Extra Light | `poppins_n2` |
| Poppins Extra Light Italic | `poppins_i2` |
| Poppins Light | `poppins_n3` |
| Poppins Light Italic | `poppins_i3` |
| Poppins | `poppins_n4` |
| Poppins Italic | `poppins_i4` |
| Poppins Medium | `poppins_n5` |
| Poppins Medium Italic | `poppins_i5` |
| Poppins Semi Bold | `poppins_n6` |
| Poppins Semi Bold Italic | `poppins_i6` |
| Poppins Bold | `poppins_n7` |
| Poppins Bold Italic | `poppins_i7` |
| Poppins Extra Bold | `poppins_n8` |
| Poppins Extra Bold Italic | `poppins_i8` |
| Poppins Black | `poppins_n9` |
| Poppins Black Italic | `poppins_i9` |

[Quattrocento Sans](https://fonts.google.com/specimen/Quattrocento+Sans?query=Quattrocento+Sans)

Quattrocento Sans

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Quattrocento Sans | `quattrocento_sans_n4` |
| Quattrocento Sans Italic | `quattrocento_sans_i4` |
| Quattrocento Sans Bold | `quattrocento_sans_n7` |
| Quattrocento Sans Bold Italic | `quattrocento_sans_i7` |

[Rakkas](https://fonts.google.com/specimen/Rakkas?query=Rakkas)

Rakkas

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Rakkas | `rakkas_n4` |

[Raleway](https://fonts.google.com/specimen/Raleway?query=Raleway)

Raleway

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Raleway Thin | `raleway_n1` |
| Raleway Thin Italic | `raleway_i1` |
| Raleway Extra Light | `raleway_n2` |
| Raleway Extra Light Italic | `raleway_i2` |
| Raleway Light | `raleway_n3` |
| Raleway Light Italic | `raleway_i3` |
| Raleway | `raleway_n4` |
| Raleway Italic | `raleway_i4` |
| Raleway Medium | `raleway_n5` |
| Raleway Medium Italic | `raleway_i5` |
| Raleway Semi Bold | `raleway_n6` |
| Raleway Semi Bold Italic | `raleway_i6` |
| Raleway Bold | `raleway_n7` |
| Raleway Bold Italic | `raleway_i7` |
| Raleway Extra Bold | `raleway_n8` |
| Raleway Extra Bold Italic | `raleway_i8` |
| Raleway Black | `raleway_n9` |
| Raleway Black Italic | `raleway_i9` |

[Roboto](https://fonts.google.com/specimen/Roboto?query=Roboto)

Roboto

12 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Roboto Thin | `roboto_n1` |
| Roboto Thin Italic | `roboto_i1` |
| Roboto Light | `roboto_n3` |
| Roboto Light Italic | `roboto_i3` |
| Roboto | `roboto_n4` |
| Roboto Italic | `roboto_i4` |
| Roboto Medium | `roboto_n5` |
| Roboto Medium Italic | `roboto_i5` |
| Roboto Bold | `roboto_n7` |
| Roboto Bold Italic | `roboto_i7` |
| Roboto Black | `roboto_n9` |
| Roboto Black Italic | `roboto_i9` |

[Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono?query=Roboto+Mono)

Roboto Mono

14 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Roboto Mono Thin | `roboto_mono_n1` |
| Roboto Mono Thin Italic | `roboto_mono_i1` |
| Roboto Mono Extra Light | `roboto_mono_n2` |
| Roboto Mono Extra Light Italic | `roboto_mono_i2` |
| Roboto Mono Light | `roboto_mono_n3` |
| Roboto Mono Light Italic | `roboto_mono_i3` |
| Roboto Mono | `roboto_mono_n4` |
| Roboto Mono Italic | `roboto_mono_i4` |
| Roboto Mono Medium | `roboto_mono_n5` |
| Roboto Mono Medium Italic | `roboto_mono_i5` |
| Roboto Mono Semi Bold | `roboto_mono_n6` |
| Roboto Mono Semi Bold Italic | `roboto_mono_i6` |
| Roboto Mono Bold | `roboto_mono_n7` |
| Roboto Mono Bold Italic | `roboto_mono_i7` |

[Roboto Slab](https://fonts.google.com/specimen/Roboto+Slab?query=Roboto+Slab)

Roboto Slab

9 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Roboto Slab Thin | `roboto_slab_n1` |
| Roboto Slab Extra Light | `roboto_slab_n2` |
| Roboto Slab Light | `roboto_slab_n3` |
| Roboto Slab | `roboto_slab_n4` |
| Roboto Slab Medium | `roboto_slab_n5` |
| Roboto Slab Semi Bold | `roboto_slab_n6` |
| Roboto Slab Bold | `roboto_slab_n7` |
| Roboto Slab Extra Bold | `roboto_slab_n8` |
| Roboto Slab Black | `roboto_slab_n9` |

[Rubik](https://fonts.google.com/specimen/Rubik?query=Rubik)

Rubik

14 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Rubik Light | `rubik_n3` |
| Rubik Light Italic | `rubik_i3` |
| Rubik | `rubik_n4` |
| Rubik Italic | `rubik_i4` |
| Rubik Medium | `rubik_n5` |
| Rubik Medium Italic | `rubik_i5` |
| Rubik Semi Bold | `rubik_n6` |
| Rubik Semi Bold Italic | `rubik_i6` |
| Rubik Bold | `rubik_n7` |
| Rubik Bold Italic | `rubik_i7` |
| Rubik Extra Bold | `rubik_n8` |
| Rubik Extra Bold Italic | `rubik_i8` |
| Rubik Black | `rubik_n9` |
| Rubik Black Italic | `rubik_i9` |

[Scheherazade New](https://fonts.google.com/specimen/Scheherazade+New?query=Scheherazade+New)

Scheherazade New

2 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Scheherazade New | `scheherazade_new_n4` |
| Scheherazade New Bold | `scheherazade_new_n7` |

[Spectral](https://fonts.google.com/specimen/Spectral?query=Spectral)

Spectral

14 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Spectral Extra Light | `spectral_n2` |
| Spectral Extra Light Italic | `spectral_i2` |
| Spectral Light | `spectral_n3` |
| Spectral Light Italic | `spectral_i3` |
| Spectral | `spectral_n4` |
| Spectral Italic | `spectral_i4` |
| Spectral Medium | `spectral_n5` |
| Spectral Medium Italic | `spectral_i5` |
| Spectral Semi Bold | `spectral_n6` |
| Spectral Semi Bold Italic | `spectral_i6` |
| Spectral Bold | `spectral_n7` |
| Spectral Bold Italic | `spectral_i7` |
| Spectral Extra Bold | `spectral_n8` |
| Spectral Extra Bold Italic | `spectral_i8` |

[Tangerine](https://fonts.google.com/specimen/Tangerine?query=Tangerine)

Tangerine

2 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Tangerine | `tangerine_n4` |
| Tangerine Bold | `tangerine_n7` |

[Teko](https://fonts.google.com/specimen/Teko?query=Teko)

Teko

5 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Teko Light | `teko_n3` |
| Teko | `teko_n4` |
| Teko Medium | `teko_n5` |
| Teko Semi Bold | `teko_n6` |
| Teko Bold | `teko_n7` |

[Ubuntu](https://fonts.google.com/specimen/Ubuntu?query=Ubuntu)

Ubuntu

8 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Ubuntu Light | `ubuntu_n3` |
| Ubuntu Light Italic | `ubuntu_i3` |
| Ubuntu | `ubuntu_n4` |
| Ubuntu Italic | `ubuntu_i4` |
| Ubuntu Medium | `ubuntu_n5` |
| Ubuntu Medium Italic | `ubuntu_i5` |
| Ubuntu Bold | `ubuntu_n7` |
| Ubuntu Bold Italic | `ubuntu_i7` |

[Unna](https://fonts.google.com/specimen/Unna?query=Unna)

Unna

4 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Unna | `unna_n4` |
| Unna Italic | `unna_i4` |
| Unna Bold | `unna_n7` |
| Unna Bold Italic | `unna_i7` |

[Varela Round](https://fonts.google.com/specimen/Varela+Round?query=Varela+Round)

Varela Round

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Varela Round | `varela_round_n4` |

[Vollkorn](https://fonts.google.com/specimen/Vollkorn?query=Vollkorn)

Vollkorn

12 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Vollkorn | `vollkorn_n4` |
| Vollkorn Italic | `vollkorn_i4` |
| Vollkorn Medium | `vollkorn_n5` |
| Vollkorn Medium Italic | `vollkorn_i5` |
| Vollkorn Semi Bold | `vollkorn_n6` |
| Vollkorn Semi Bold Italic | `vollkorn_i6` |
| Vollkorn Bold | `vollkorn_n7` |
| Vollkorn Bold Italic | `vollkorn_i7` |
| Vollkorn Extra Bold | `vollkorn_n8` |
| Vollkorn Extra Bold Italic | `vollkorn_i8` |
| Vollkorn Black | `vollkorn_n9` |
| Vollkorn Black Italic | `vollkorn_i9` |

[Work Sans](https://fonts.google.com/specimen/Work+Sans?query=Work+Sans)

Work Sans

18 variants

More info Less info

| Variant | Handle |
| --- | --- |
| Work Sans Thin | `work_sans_n1` |
| Work Sans Thin Italic | `work_sans_i1` |
| Work Sans Extra Light | `work_sans_n2` |
| Work Sans Extra Light Italic | `work_sans_i2` |
| Work Sans Light | `work_sans_n3` |
| Work Sans Light Italic | `work_sans_i3` |
| Work Sans | `work_sans_n4` |
| Work Sans Italic | `work_sans_i4` |
| Work Sans Medium | `work_sans_n5` |
| Work Sans Medium Italic | `work_sans_i5` |
| Work Sans Semi Bold | `work_sans_n6` |
| Work Sans Semi Bold Italic | `work_sans_i6` |
| Work Sans Bold | `work_sans_n7` |
| Work Sans Bold Italic | `work_sans_i7` |
| Work Sans Extra Bold | `work_sans_n8` |
| Work Sans Extra Bold Italic | `work_sans_i8` |
| Work Sans Black | `work_sans_n9` |
| Work Sans Black Italic | `work_sans_i9` |

[Yatra One](https://fonts.google.com/specimen/Yatra+One?query=Yatra+One)

Yatra One

1 variant

More info Less info

| Variant | Handle |
| --- | --- |
| Yatra One | `yatra_one_n4` |