原【Shopify 主题开发】账号被盗，转到此账号继续分享与维护。
近期品牌日活动涉及更换设计师预设的品牌字体需求。针对 Shopify 2.0 主题，计划在模板中增强字体自定义功能，以实现更精细化的视觉控制。
需求背景与升级对比
| 原来的 | 计划中要上线的 |
|
|
原有主题模板较为简单，仅区分导航与正文（Body）字体，且未设置具体字号。新版本增加了对价格、数字、正文及导航的字重与字号独立设置。此举不仅能统一全站风格，也便于后续进行站点字体的批量升级与调整。
在自定义字体库中进行设置
Shopify 允许通过两种方式为主题添加字体选择器：一是从系统自定义字体库中选择，二是添加外部字体。本文重点介绍第一种方式。
配置 settings_schema.json
进入代码编辑器，找到 config/settings_schema.json 文件。添加如下示例代码以创建字体选择器：
{
"type": "font_picker",
"id": "compare_font",
"label": "Compare Price Font",
"default": "dm_sans_n4"
}若需添加多种字体，可复制多段代码，除 type 外其他属性可根据需求修改，多项之间用逗号分隔。注意必须设置默认值（default）。
理解 default 属性规则
默认值格式通常为“字体名称_权重样式”，例如 dm_sans_n4。其中：
- 字体名称：如
dm_sans、helvetica。 - 权重编码：
n代表 Normal（正常）。n3：Light (300)n4：Regular (400)n7：Bold (700)n8：Extra Bold (800)
常见报错排查
若保存时出现错误，请检查以下方面：
- 拼写检查：确保字体名称和权重编码（如
helvetica_n4）拼写无误。 - 字体支持：确认所选字体在 Shopify 官方字体库支持列表中。
- 格式规范：严格遵循
字体名称_权重格式。 - 缓存问题：尝试清除浏览器缓存或使用隐私模式重新加载页面。
在主题中应用字体
使用 Liquid 过滤器加载
在 CSS 文件中，利用 Liquid 字体过滤器加载用户选择的字体：
{{ settings.font_heading | font_face }}通过 CSS 变量全局调用
为提高效率，建议在 theme.liquid 中定义 CSS 变量，而非单独创建字体 CSS 文件。将字体设置注入 :root，以便全局调用：
:root {
--compare-font-family: {{ settings.compare_font.family }}, {{ settings.compare_font.fallback_families }};
--compare-font-style: {{ settings.compare_font.style }};
--compare-font-weight: {{ settings.compare_font.weight }};
--compare-font-size: {{ settings.compare_font_size }};
--mobile-compare-font-size: {{ settings.mobile_compare_font_size }};
}通过上述方法，可将字体家族、样式、权重及字号封装为变量，实现多字体设置的模块化与便捷调用。至此，字体安装与配置即告完成。