你网站上的那套字体，成本比你想的高

一位客户慌慌张张地给我发了封邮件。字体公司检测到了她的网站，要求补交授权差价：四千多雷亚尔，因为流量超出了三年前签下的上限。团队里没人知道还有上限这回事。网站的字体变成了一笔要付的账。

这种事比你想的更常见。网站字体是那种看起来纯粹是审美问题的决定，某个人在 Figma 里花五分钟就定了，然后从三个方向向你收利息：钱、速度和品牌识别。这三点我一个个拆开讲。

为什么字体要按页面浏览量收费

字体是软件。你买不到它，你只是获得授权。而 webfont 的授权通常按每月页面浏览量的区间来卖。

大致是这样运作的：

• 桌面授权：在 Figma、Illustrator、PowerPoint 里用。便宜。
• 网页授权：在浏览器里提供服务。按流量区间收费。
• 应用授权：嵌入到 App 里。按安装数量收费。

残酷的细节在于，这些授权是分开的。设计师买了桌面版，做出漂亮的稿子，交付。开发拿到字体文件传到网站上。没有人买网页授权。过了两年，网站变大了，邮件就来了。

在大的字体厂商那里，一个完整字族加上中等流量的网页授权，价格在 500 到 3000 美元之间。如果你有网站、App 还有印刷物料，那就乘上去。对一家营收不错的公司来说，这是噪音。对一个刚起步的 SaaS 来说，这是一个月的基础设施钱。

免费字体真的变好了

十年前，"免费字体"意味着 Arial，或者某个一眼看上去就在喊"模板"的 Google Fonts。这件事变了。

Nebula Sans 就是今天的一个好例子。它是免费的无衬线字族，开放授权，而且看起来不像免费的。字重齐全，支持可变字体（一个文件从 light 覆盖到 black，不用加载六个文件），字形足够中性，适合界面，又不至于无趣。字符支持也很完整，这一点就已经淘汰掉一半的国外选项了。

它不是唯一的。Inter、Geist、Public Sans、Instrument Sans、Söhne（这个是付费的，但很多人会搞混，所以提一下）。重点是，"想要像样的字体排印就得花大钱"这个说法已经死了。

贵的字体不会让产品变好。错的字体会让产品变慢。

没人测量的那份重量

这里是性能报告讲不清楚的部分。

一个四种字重的字族，WOFF2 格式，覆盖 latin 和 latin-extended，大概在 60 到 120 KB 之间。听起来什么都不是。问题是字体会阻塞渲染。浏览器下载 CSS，发现需要字体，去请求字体，在字体到达之前文字要么是隐形的，要么闪一下换个形状。那种"网站加载完文字又跳一下"的效果是有名字的：字体迟到了，把布局重新排了一遍。

这会直接算进 Cumulative Layout Shift，也就是 Google 用来排名的指标之一。而且它会进入用户的感知，那才是更要紧的指标。

三件事能解决几乎所有问题：

1. 把字体托管在你自己的域名下。 从 Google Fonts 加载等于多一个服务器连接。自从浏览器按站点隔离缓存之后，"用户在别的网站已经缓存过了"这个理由就一文不值了。
2. 用可变字体。 一个文件代替四个。更少请求，更小体积。
3. 把回退字体配好。 font-display: swap 加上一个度量接近的系统字体。文字立刻出现，切换几乎察觉不到。

去年我在一个电商网站上做了这些。从外部 CDN 加载的三个字体文件，变成一个本地可变字体文件。Largest Contentful Paint 从 2.8 秒降到 1.6 秒。只动了字体。没有做任何其他改动。

真正重要的部分：这个网站看起来像你吗

现在说不太好承认的那部分。如果你用的是所有人都在用的那款免费字体，你的网站就会长得跟所有人一样。

有一种 SaaS 美学已经成了设计师之间的内部笑话。正文用 Inter，紫色渐变，等距插画，圆角小边框的"New"徽章。好看吗？好看。让人记得住吗？不。我把其中三个网站的 logo 互换，没有人会发现。

字体排印是区分品牌最便宜的东西。你不需要定制专属字体。你需要的是一个有意图的选择：

• 正文用一款中性的无衬线体，因为可读性不是发挥创意的地方。
• 标题用一款有个性的字体。可以是衬线体、展示体，或者带点奇怪细节的怪诞体。品牌是在这里出现的。
• 尺寸阶梯要一致。不是因为每个页面在不同的日子做的，就出现六个随机字号。

这种两款字体的组合，一款中性一款有主张，能解决 90% 的情况，而且只要在免费字体里选得好，成本是零。

怎么决定，又不变成三个月的项目

如果你现在正在做或者重做一个产品，捷径是这样的：

从阅读开始。 用你真实的文字，不是 "Lorem ipsum"，放进候选字体里看。一段你的 FAQ，一张价格表，一个报错页面。读着累，就淘汰。

测试数字。 很多 SaaS 要展示金额、日期、指标。数字宽度不等的字体会让表格的列对不齐。找有 tabular-nums 支持的。这是一个十秒钟的细节，能避免一个永久的视觉 bug。

检查字符覆盖。 把你实际要用的字符打出来看看，包括标点、货币符号和多语言内容。我见过昂贵的国外字体，某些符号画得敷衍，几乎贴在字母上。

下载之前先读授权。 如果是 SIL Open Font License，你自由了：网页、App、商业产品都能用，没有流量限制。如果是字体厂商的授权，找到写页面浏览量的那一行，跟你的 Analytics 对一下。然后把授权 PDF 存在一个你的团队两年后还能找到的地方。

一周之内决定。 认真的。字体选择是那种会无限拖下去的讨论，因为每个人都有意见，没有人有标准。把上面的标准定下来，测三个选项，选一个，往前走。选错了以后还能换。它只是一个 CSS 变量。

换成我会怎么做

如果你的网站今天还在从 Google Fonts 加载字体，跑着三四个字重，而且没人说得出那款字体是谁选的、为什么选，那你面前有两个小时的工作量，和一个实实在在等着的收益。

把字体下载下来，托管在你自己的域名，有可变版本就转成可变，把回退配好。然后再展开更有意思的那场对话：这款字体，能说明你的公司是什么样的吗？如果答案是"不知道"，那你刚刚找到了一个能用的网站和一个让人记住的网站之间的差别。

这类调整我在客户项目里做得很频繁，几乎总是和其他积压下来的性能与品牌问题一起处理。想聊聊你的情况的话，看看我在做什么。

一位客户慌慌张张地给我发了封邮件：因为网站字体，被追缴了四千多雷亚尔。

那份授权有页面浏览量上限。流量涨了，团队里没人知道，字体就变成了一笔要付的账。

字体是软件。你买不到它，你只是获得授权。设计师买了桌面版授权，开发把字体文件传上服务器，这就是两年后那封邮件的经典配方。

但钱还是小事。字体加载没做好，会阻塞渲染，把布局推来推去，拖垮你的 Core Web Vitals。去年在一个电商项目里，我把三个外部 CDN 字体文件换成一个本地可变字体：LCP 从 2.8 秒降到 1.6 秒。没有做任何其他改动。

还有一个几乎没人问的问题：这款字体，能说明你的公司是什么样的吗？如果答案是"不知道"，那你的网站可能和所有人的网站长得一样。

完整的操作步骤我写在博客里了，包括下载前该怎么读授权条款。想聊聊你自己的情况，随时找我。

#字体排印 #网页性能 #产品设计 #CoreWebVitals #品牌