82% 的桌面网页 使用网络字体。自定义字体对于网站的品牌、设计以及跨浏览器/设备的一致性非常重要。但是，使用网络字体不应该以牺牲性能为代价。
Next.js 内置了 自动网络字体优化。默认情况下，Next.js 会在构建时自动内联字体 CSS，从而避免了额外的字体声明获取请求。这可以提升首次内容绘制 (FCP) 和最大内容绘制 (LCP) 的性能。
例如，以下是 Next.js 优化字体的前后对比。
优化前，需要额外的网络请求
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
优化后，Next.js 为你内联字体 CSS
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
@font-face{font-family:'Inter';font-style:normal.....
</style>