字体（Fonts）

你可以通过以下几种方式将字体添加到你的主题中：

提示

一般来说，字体是一个独立资源，浏览器需要在渲染文本之前先下载字体，这会影响商店的整体性能。为了提升主题性能，选择使用来自 Shopify 字体库中 系统字体 分类的字体，商家可以利用客户电脑上已安装的系统字体。

Shopify 字体库（Shopify font library）

Shopify 的字体库是一个 字体集合，包含系统字体、部分 Google 字体，以及来自 Monotype 的授权字体。这些字体可在所有 Shopify 在线商店中免费使用，并提供 WOFF 和 WOFF2 格式。

每种字体文件会包含以下 Unicode 范围（如果该字体支持）：

部分字体还包括用于日文书写的 CJK（中日韩）Unicode 范围，例如 CJK Unified Ideographs。

这个字体集合覆盖了各种常见用途。但由于授权限制，有些字体 Shopify 无法提供。如果你需要支持更广泛字符集的字体，可以使用系统字体、Typekit 或其他解决方案。

想了解更多关于 Shopify 字体库的使用方式，请参考 将 Shopify 字体添加到你的主题中。

注意

目前不支持直接访问字体文件。

系统字体（System fonts）

系统字体是指用户电脑上已经安装好的字体。这样浏览器就无需下载字体文件即可渲染文本，从而提升主题性能。系统字体在 字体列表 中会显示 “System” 标签，并在主题编辑器的字体选择器中显示在 System fonts 分类下。

如果你选择使用系统字体，那么实际使用哪种字体取决于用户的操作系统。以下是三种通用系统字体类型及其示例：

  • mono - Menlo、Consolas、Monaco、Liberation Mono、Lucida Console
  • 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

自定义字体（Custom fonts）

如果你想使用不在 Shopify 字体库中的字体，可以使用第三方服务提供的字体，比如 Typekit。

大多数第三方字体解决方案提供以下两种集成方式：

如果你在主题中包含了自定义字体，并希望让商家可以选择这些字体，那么你需要创建一个用于选择的设置，比如 select 类型设置。然后在 CSS 中通过设置值引用对应字体。

第三方托管字体

如果字体是由第三方托管的，通常他们会提供一个 <link> 标签供你在主题中引入该字体：

  1. <link rel="stylesheet" href="[font-url]">

在主题中托管字体

如果你有自己的字体文件，可以按照以下步骤将其添加到你的主题中：

非 admin 用户

如果你计划通过 Shopify CLI 推送主题、上传 ZIP 文件、使用 Shopify GitHub 集成，或者通过 Shopify Theme Store 分发主题，那么应该将字体文件存储在主题的 assets 文件夹中。操作建议在本地代码编辑器中完成，而不是在 Shopify 管理后台的代码编辑器中。

  1. 将字体文件添加到 assets 目录
  2. 创建一个 @font-face CSS 规则以引用该字体。使用 asset_url filter 来生成字体文件的 URL：
  1. @font-face {
  2.   font-family: "Font name";
  3.   src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
  4. }

Shopify 管理后台

如果你希望通过 Shopify 管理后台将字体添加到已有主题中，建议将字体文件上传到 Shopify admin 的 Files 区域。因为通过后台代码编辑器上传某些字体到 assets 目录可能会导致文件损坏。

  1. 将字体文件上传到 Shopify 管理后台的 Content > Files 区域
  2. 创建一个 @font-face CSS 规则来引用字体。使用 file_url filter 输出字体文件的 URL：
  1. @font-face {
  2.   font-family: "Font name";
  3.   src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
  4. }

将 Shopify 字体添加到你的主题中

以下是如何在主题中使用 Shopify 字体库字体的步骤：

  1. 添加一个 font_picker 类型的设置，让商家可以在主题编辑器中选择字体。该设置值会作为 font 对象 返回。

  2. 使用以下任一 字体 filter 来加载所选字体或其变体：

    • 使用 font_face filter 插入默认的 @font-face 声明
    • 使用 font_url filter 获取 CDN URL，以便创建自定义的 @font-face 声明
    • 使用 font_modify filter 获取同一字体家族下的不同样式，比如加粗或斜体
  3. 在 CSS 中引用所选字体，设置如 font-family、font-weight、font-style 等样式属性。

可用字体

参考字体

已经废弃的字体

参考字体