如何在Shopify后台添加自定义字体？

1. 修正@font-face代码错误 #

你当前的代码未区分不同字重的字体，导致浏览器无法识别Lexend的不同粗细样式，修改后的代码如下：

@font-face {
  font-family: "Lexend";
  src: url('{{ "Lexend-Light.woff2" | asset_url }}') format("woff2"),
    url('{{ "Lexend-Light.woff" | asset_url }}') format("woff"),
    url('{{ "Lexend-Light.ttf" | asset_url }}') format("truetype");
  font-weight: 300; /* 对应Light字重 */
  font-style: normal;
}

@font-face {
  font-family: "Lexend";
  src: url('{{ "Lexend-SemiBold.woff2" | asset_url }}') format("woff2"),
    url('{{ "Lexend-SemiBold.woff" | asset_url }}') format("woff"),
    url('{{ "Lexend-SemiBold.ttf" | asset_url }}') format("truetype");
  font-weight: 600; /* 对应SemiBold字重 */
  font-style: normal;
}

2. 验证字体文件上传状态 #

确认所有字体文件（Lexend-Light.woff2、Lexend-Light.woff、Lexend-Light.ttf、Lexend-SemiBold.woff2等）已正确上传到Shopify后台的在线商店 > 主题 > 操作 > 编辑代码 > Assets文件夹，文件名需和代码中的完全一致（注意大小写匹配）。

3. 在主题设置中添加自定义字体选项 #

要让字体出现在后台的字体选择器里，需修改主题的settings_schema.json文件：

1. 打开在线商店 > 主题 > 操作 > 编辑代码，找到并打开settings_schema.json
2. 定位到包含font_picker类型的配置块（比如标题字体、正文字体的设置项）
3. 在对应font_picker字段中添加自定义字体配置，示例如下：

{
  "type": "font_picker",
  "id": "heading_font",
  "label": "标题字体",
  "default": "helvetica_n4",
  "fonts": [
    {
      "name": "Lexend",
      "font_family": "Lexend, sans-serif",
      "font_weights": [300, 600]
    }
  ]
}

4. 保存文件后刷新后台的主题设置页面，即可看到Lexend字体出现在下拉选项中。

4. 强制应用字体到前台（可选） #

如果需要让前台页面直接使用该字体，可在base.css中添加全局字体设置：

body, h1, h2, h3 {
  font-family: "Lexend", sans-serif;
}

内容的提问来源于stack exchange，提问作者yanksi_