Shopify 页面里 @font-face 重复输出怎么清理

现象#

首页 4 个 section 各输出一段相同的 @font-face，同一 woff2 请求 4 条，内联样式多出 6KB。

原因#

• 每个 section 独立渲染，font_face 写在 section 里就会各输出一遍
• 同一份 @font-face 重复声明时浏览器会重新解析，命中率下降并可能重复发请求
• section 被 section group 引用时内外各写一次，声明数量按层级翻倍
• font_face 没有跨 section 的去重能力，Liquid 不会共享已输出的声明

处理步骤#

1. 在页面源码里搜 @font-face，先数清楚出现了几次、分别在哪段
2. 把字体声明统一收敛到 layout/theme.liquid 的 <head>，只保留一处
3. 需要按 section 换字体时，用 CSS 变量覆盖 font-family，不要重复声明字形
4. 检查 section group 文件，删掉从外层继承来的重复块
5. 用 Coverage 面板确认 CSS 未使用字节确实下降

验收标准#

源码中 @font-face 只出现 1 次，同一 woff2 只有一条网络请求，CSS 体积回落。