Shopify 自定义字体加载慢怎么优化

现象#

中文字体文件 8MB，首屏文字先空白再闪现，或者一直等到字体下载完才显示。

原因#

• 直接上传完整中文 TTF/OTF，字符集巨大
• 没有 font-display 设置，浏览器阻塞文本渲染
• 字体文件放在主题 assets 且未压缩

处理步骤#

1. 用子集化工具只保留常用汉字与拉丁字符，体积可降到 200KB 内
2. 转成 WOFF2 格式，配 font-display: swap
3. 只对标题用自定义字体，正文用系统字体栈
4. 用 <link rel="preload" as="font" crossorigin> 预加载首屏用到的字重

验收标准#

字体文件小于 300KB，首屏文字立即可见无长时间空白，FOUT 不明显。