快速传送字体至关重要：加快字体传送速度不仅意味着用户可以更快地看到文本，还极大地影响着字体是否会导致布局偏移。如果某种字体在需要之前无法传送，那么在切换字体时，通常会发生布局偏移。这种布局偏移的大小可能因回退字体与网页字体的匹配程度而异。如需查看这种现象的实际运用情况，请查看演示并比较快速连接和慢速连接时发生的布局偏移。
以下示例结合了以下两种性能技术，以尽快加载第三方字体：使用内嵌字体声明和使用 preconnect 资源提示。虽然以下代码段演示了如何从 Google Fonts 加载字体，但这些技术也适用于其他第三方字体提供程序。
内嵌字体声明：通过在主文档中内嵌
font-family声明（而不是在外部样式表中包含此信息），浏览器可以确定网页上将使用的字体文件，而无需等待单独的样式表文件下载。这一点很重要，因为通常浏览器只有在确定网页使用了这些字体文件后才会下载它们。在大多数情况下，内嵌字体声明最好使用preload加载字体。预连接：加载 Google Fonts 的推荐方法是将
<link>标记与preconnect资源提示结合使用。preconnect资源提示可与第三方来源建立早期连接。在以下代码段中，第一个资源提示会设置用于下载字体样式表的连接；第二个资源提示会设置用于下载字体文件的连接。
例如：
HTML
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>