微信小程序自定义字体教程｜控制字体加载体积与首屏闪烁 – MPForge

一、先判断：这个页面真的需要自定义字体吗

结论先立住：字体是锦上添花，不是必须品——能系统字体就别硬上，上之前先过「必要性」这一关。

小程序里引入自定义字体，代价是三件事同时发生：包体变大、首屏多一次网络加载、文字渲染可能出现闪动。换来的是品牌观感提升，而这个提升只在少数页面成立。按页面分层给出口径：

• 品牌页可用：首页头图区、活动专题页、会员开卡页这类「一屏定调性」的页面，标题用品牌字体收益明显。
• 列表页慎用：商品列表、订单列表正文量大，字体加载慢一拍就是整页闪动，收益低干扰大。
• 交易页不用：下单、支付、表单页以稳定为先，系统字体零风险，也避免审核时多解释一处。

把「哪些页用、哪些页不用」先写成关键页清单，后面子集化范围、加载策略都跟着这份清单走，避免做到一半反复改。

二、三件准备工作：授权、子集化、回退字体栈

少一样都会停在半路，开工前把三样凑齐。

第一是字体授权文件。商用字体必须有明确授权范围，线上小程序属于商用场景；开源字体（如思源系列）也要留好协议出处。审核如果问询字体来源，授权凭证就是你的底气。

第二是子集化方案。中文字体全量动辄几 MB 到十几 MB，必须按关键页清单里实际出现的字符做子集，常见能压到原来的三成以下。工具产出 woff2 优先——较新基础库支持好、体积最小；如果你们仍要覆盖低版本基础库，准备 woff 或 ttf 做兜底。

第三是回退字体栈。字体加载失败或未完成时，页面用系统字体先渲染，写清 font-family 的兜底顺序，避免文字长时间空白。回退栈不是可选项，是必写项。

三、接入与加载时机：按五步走

顺序不能乱：先确认必要性，再压体积，最后才谈加载策略。

1. 评估必要性：按第一节口径圈定关键页清单，写明每页用字体的位置（仅标题/正文全量），这是后面所有工作的边界。
2. 子集化减体积：用字体子集工具按清单字符集裁剪，导出 woff2，逐个字体文件核对体积，单文件控制在几百 KB 内。
3. 选择加载方式：体积小的直接打进包内随包加载；偏大的走 wx.loadFontFace 从 CDN 拉取，避开主包体积红线，上传环节可参考代码包上传注意。
4. 控制加载时机：在首屏渲染前发起，配合 loading 占位；列表页正文不做字体替换，杜绝滚动中反复闪动。
5. 真机验收：低端真机走一遍弱网与离线，确认回退栈生效、无长时间空白，再对照体验评分优化看加载项有没有被字体拖垮。

四、验收口径：体积、闪烁、降级逐项过

字体好不好验收看三点：多小算小、多快算快、挂了怎么办。按下表逐项核对：

五、审核说明与被拒点：把必要性讲清楚

审核不是反对自定义字体，是反对说不清用途的字体。提审材料里补一句说明：字体用于品牌标识与指定页面视觉统一，不涉及功能诱导。有授权、有清单、有说明，这一项基本不会成为卡点。

实地见过的三类被拒/翻车：整包字体打进主包导致包体检不过；用了无授权字体被投诉；闪烁严重又不处理被用户当成 bug 差评。遇到类似情况，对照第四节表格逐项修完再提，比反复硬提省时间。其他常见驳回原因可看小程序审核被拒常见原因。

六、避坑清单

三条坑都和「先做还是后做」有关：授权、子集、图标。

• 别等做完再找授权：选型阶段就确认授权范围，做完了发现不能商用，返工是全量的。
• 别跳过子集直接上：先整包试效果、想着「之后再压」，几乎一定忘掉；子集化放在设计定稿后立即做。
• 图标别用字体凑：图标字体不如 SVG 或图片替代，体积更小、无加载闪烁、色彩可控。
• 中文全量子集化是底线：任何中文字体不子集化就上线，都属于包体事故而不是风格选择。

七、常见问题 FAQ