网站字体本地化，减少外部资源加载延迟：网站字体本地化
网站打开时字体加载慢，或者文字先以默认字体显示再突然跳变，多半是因为 CSS 里引用了 Google Fonts 这类外部字体服务。
把这些字体文件下载到自己的服务器，用 @font-face 本地调用，就能减少一个外部域名请求，页面渲染会更稳定。
下面从确认字体来源开始，一步步完成字体本地化。
先确认当前字体是从哪里加载的
打开浏览器开发者工具，按 F12，切到 Network 面板，刷新页面，在筛选框输入 font 或 woff。
如果看到请求域名是 fonts.googleapis.com 或 fonts.gstatic.com，说明字体确实来自外部。
同时查看网页源代码里是否存在类似这样的引用：
或者 CSS 文件里有 @import url('https://fonts.googleapis.com/...')。
把这些地址记下来，后面要用到对应的字体文件。
下载字体文件并上传到服务器
在浏览器中直接打开那个 Google Fonts 的 CSS 链接，会看到里面定义了 @font-face，其中 src 指向 .woff2 或 .woff 文件。
把这些字体文件下载到本地。
以宝塔面板为例，上传路径可以放在网站根目录下的 fonts 文件夹：
/www/wwwroot/你的域名/fonts/roboto-regular.woff2如果用命令行，可以先创建目录再上传：
mkdir -p /www/wwwroot/你的域名/fonts
# 然后用 scp 或宝塔文件管理上传字体文件到该目录上传完成后，在浏览器访问 https://你的域名/fonts/roboto-regular.woff2，能正常下载就说明文件可访问。
修改 CSS，改用本地 @font-face
删除原来的外部字体 或 @import，在你自己的 CSS 文件里加入本地定义。
示例：
@font-face {
font-family: 'Roboto Local';
src: url('/fonts/roboto-regular.woff2') format('woff2'),
url('/fonts/roboto-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Roboto Local', Arial, sans-serif;
}font-display: swap 的作用是先用系统字体显示文字，等本地字体加载完再替换，避免文字长时间空白。
路径 /fonts/... 是相对于网站根目录的绝对路径，实际使用时按你的目录结构调整。
配置服务器缓存，让字体只下载一次
字体文件体积不小，建议在 Nginx 里给字体设置长期缓存。
在网站配置文件中加入：
location ~* \.(woff2?|ttf|otf|eot)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}保存后重载 Nginx：
nginx -t && nginx -s reload这样浏览器第一次下载后会缓存 30 天，后续访问不再重复请求。
容易踩坑的地方
字体文件名不要用中文或空格，否则部分服务器或浏览器解析路径会出错，建议用英文和短横线。
跨域问题：如果字体文件和网站不同域，需要在 Nginx 里加 Access-Control-Allow-Origin 头。
本地化后同域引用一般不会触发。
版权风险：不是所有字体都允许免费商用。
下载前确认字体授权，尤其是企业网站，建议使用开源字体或已购买授权的字体。
只保留需要的字重：一个字体家族可能有多个字重文件，全部加载会拖慢速度，按页面实际用到的字重保留即可。
检查字体本地化是否生效
再次打开开发者工具 Network 面板，刷新页面，筛选 font。
此时字体请求的域名应该变成你自己的域名，不再出现 fonts.gstatic.com。
查看请求状态是否为 200 或 304（缓存命中），响应头里能看到 Cache-Control 和过期时间。
用 Lighthouse 或 PageSpeed Insights 跑一次，对比优化前后“减少第三方代码影响”和“字体显示”相关的评分变化。
只要外部字体请求消失、页面文字不再闪烁，字体本地化就算完成。
如果后续更换字体，重复下载、上传、改 CSS 这三步即可，不需要改动服务器其他配置。
