如何让网站自定义字体加载更快，避免每次下载完整字体？

• 字体子集化
  只保留网站实际用到的字符（比如英文、数字、常用符号），砍掉生僻字或未使用的语言字符。用字体子集化工具处理后，字体体积能大幅缩减——比如原本几十KB的文件，子集化后可能只剩几KB。

• 优先使用WOFF2格式
  WOFF2的压缩率比WOFF、TTF高30%左右，且主流浏览器都支持（仅IE不兼容，可留WOFF作为降级方案）。CSS写法参考：

  @font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  

• 配置长期缓存
  在服务器上给字体文件设置HTTP缓存头，比如Cache-Control: public, max-age=31536000（缓存1年），让浏览器下载一次后就存本地，后续访问不用重复下载。如果需要更新字体，记得修改文件名（比如加版本号custom-font-v2.woff2），避免缓存冲突。

• 预加载关键字体
  用<link rel="preload">让浏览器提前加载首屏必需的字体，减少渲染等待时间。代码示例：

  <link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>
  

  注意只预加载核心字体，别滥用导致带宽浪费。

• 设置字体显示策略
  在@font-face里添加font-display: swap，让浏览器先显示系统 fallback 字体，等自定义字体下载完成后再替换，彻底避免页面空白（FOIT）。如果是非关键文本，也可以用font-display: optional（加载失败就用系统字体）或font-display: fallback（短时间等待后降级）。示例：

  @font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2');
    font-display: swap;
  }
  

• 开启服务器端压缩
  给字体文件开启gzip或Brotli压缩（服务器端配置），哪怕WOFF2本身已经压缩，额外的压缩还能进一步减小体积。比如Nginx里可以开启Brotli，并针对字体文件设置更高的压缩级别。

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