Shopify正式商店自定义woff2字体部署后无法加载问题求助

按以下顺序逐一排查，90%以上的同类问题都能定位解决：

• 首先校验字体文件路径有效性
  进入正式店主题的Assets目录，确认woff2字体文件已成功上传，且文件名的大小写、后缀和代码中填写的完全一致——Shopify正式环境资源路径严格区分大小写，测试环境可能因为本地缓存容错没暴露这个问题。点击Assets里的字体文件获取实际访问链接，直接在浏览器打开该链接，如果返回404，就是文件名错误或文件未上传成功。
• 修正@font-face代码的存放位置
  不要把带Liquid标签的@font-face规则写在纯.css文件里：多数Shopify主题的.css后缀文件默认不会解析Liquid语法，你写的{{ [font-file-name] | asset_url }}会被原样输出为字符串，浏览器无法识别有效路径，测试店大概率是之前手动开启了.css文件的Liquid解析权限，正式店默认配置下会失效。
  把@font-face规则挪到主题layout/theme.liquid文件的<head>标签内，用<style>标签包裹，该位置会强制解析Liquid语法，参考可直接用的代码：

@font-face {
  font-family: "YourCustomFontName";
  src: url("{{ 'your-actual-font-filename.woff2' | asset_url }}") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

注意代码里的文件名、font-family名称要替换成你实际使用的值，补上font-weight、font-style和font-display: swap配置，避免字体匹配错误或加载阻塞。

• 通过浏览器开发者工具定位具体报错
  打开正式店页面，按F12调出开发者工具：
  1. 切到Console面板，看是否有跨域、资源加载类的报错
  2. 切到Network面板，筛选「Font」类型请求，刷新页面看字体文件的请求状态：404对应路径错误，403对应资源权限/CDN拦截，200状态码但字体不生效则是CSS优先级问题
  3. 选中需要应用字体的标题元素，切到Computed面板查看最终生效的font-family属性，如果你的自定义字体不在列表最前，说明样式规则被其他更高优先级的样式（比如插件自带样式、主题默认样式）覆盖，可临时给字体应用规则加!important标记验证，再调整选择器优先级即可。
• 排除缓存和CDN同步问题
  如果是刚上传字体、刚修改完代码，Shopify全球CDN节点同步最长需要5分钟，可先通过主题预览功能在后台预览环境验证效果，同时用浏览器无痕模式、强制刷新（Ctrl+F5 / Cmd+Shift+R）清除本地缓存后再测试，不要用普通刷新看效果。
• 校验字体文件本身有效性
  确认上传的woff2文件没有损坏、没有绑定域名级的版权锁：部分商业字体自带授权校验，测试店的myshopify二级域名不在拦截范围，正式店绑定自定义域名后会触发拦截导致字体加载失败，这种情况重新导出无域名限制的字体文件重新上传即可。

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