[{"value":"添加谷歌字体到主题","id":"MfKwz","hLevel":2,"level":1,"children":[{"value":"通过主题编辑器添加","id":"cSLur","hLevel":3,"level":2},{"value":"通过嵌入式代码添加","id":"VUD6z","hLevel":3,"level":2}]},{"value":"添加自定义字体到主题","id":"P1Qr5","hLevel":2,"level":1,"children":[{"value":"通过第三方托管平台引用字体文件","id":"D7YtG","hLevel":3,"level":2},{"value":"将文件上传到主题 public 目录中","id":"m9eIP","hLevel":3,"level":2}]}]

添加字体到主题

你可以通过以下两种方式为主题添加字体：

使用谷歌字体
使用自定义字体

提示：字体是一种独立的资源文件，当访问页面时，浏览器会优先下载字体文件，这会导致页面的其它内容渲染受到阻塞。因此，请谨慎选择字体，并确保字体文件的大小适合你的网站。

添加谷歌字体到主题

SHOPLINE 主题默认使用谷歌字体库作为字体库，该字体库字体种类繁多、风格各异，能适配多种设计风格，能为用户带来美观舒适的视觉体验。

通过主题编辑器添加

在主题全局设置中，找到字体设置，选择更换，然后输入你想要的字体名称，点击完成即可。

通过嵌入式代码添加

获取谷歌字体嵌入代码块

在谷歌字体官网中搜索你想要的字体，然后选择你想要的字体：

点击 Get font 按钮：

点击 Get embed code 按钮。

点击 Copy code 复制嵌入代码块

将嵌入代码块添加到主题

将代码块添加到主题布局文件 layout/theme.html 的 <head> 标签中，如下所示：

<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- 新增字体代码块 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&display=swap" rel="stylesheet">
  </head>
  <body>
    ...
  </body>
</html>

在主题代码中使用该字体，以下是自定义 HTML 组件中，为 h2 标题添加 Big Shoulders Stencil 字体的示例：

/* sections/custom-html/custom-html.css */
.custom-html {
  background-color: rgb(var(--color-background));
}
/* 引用字体 */
.custom-html h2 {
  font-family: "Big Shoulders Stencil", sans-serif;
}

字体效果展示

应用 Big Shoulders Stencil 字体前：

应用 Big Shoulders Stencil 字体后：

提示：更详细的谷歌字体使用细节，请参考谷歌字体官方文档。

添加自定义字体到主题

使用自定义字体能塑造品牌形象、增强设计感、提升用户体验，助力产品在竞争中脱颖而出。如下是两种添加自定义字体的引用方式：

通过第三方托管平台引用字体文件

一般而言，当你的字体文件托管在第三方平台，他们会提供一个字体的引用代码块，方便你添加到主题当中，以下是在主题布局文件中的引用字体文件的示例：

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- 
      第三方托管提供的代码块
      {{<font-url}}: 远程字体文件地址
    -->
    <link href="{{font-url}}" rel="stylesheet">
  </head>
  <body>
    ...
  </body>
</html>

将文件上传到主题 public 目录中

你可以通过以下几种方式，把你的字体文件上传到主题的静态资源目录（public）中：

通过 SHOPLINE 商家后台上传主题 zip 包。
通过 SHOPLINE CLI 推送主题到你的店铺。
通过主题代码编辑器上传字体文件。

假设你有一个名为 my-font.woff 的字体文件，上传到主题后的目录结构如下：

public
└── fonts               
     └── my-font.woff

然后，你需要为这个字体创建一个 @font-face 的规则，以便主题的任意地方使用该字体：

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    ...
    {{#content "header" /}}
    <!-- 新建 @font-face 字体规则 -->
    <style>
      @font-face {
        font-family: 'My Font';
        src: url("{{`fonts/my-font.woff` | asset_url()}}") format('woff');
      }
    </style>
  </head>
  <body>
    ...
  </body>
</html>