快速傳遞字型極為重要：字型傳遞速度加快不只表示使用者能更快看到文字，也會大幅影響字型是否會導致版面配置位移。如果無法在需要之前傳送字型，則在切換字型時，版面配置通常會變動。這個版面配置位移的大小可能因備用字型與網路字型的相符程度而異。如要瞭解此現象的實際應用，請查看示範，並比較快速連線和連線速度緩慢時的版面配置位移。
以下範例結合了兩種效能技術，協助您盡快載入第三方字型：使用內嵌字型宣告並使用 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>