تحویل سریع فونت ها بسیار مهم است: تحویل سریعتر فونت نه تنها به این معنی است که متن زودتر برای کاربر قابل مشاهده خواهد بود - بلکه تأثیر زیادی بر اینکه آیا فونت باعث تغییر طرح بندی می شود نیز دارد. اگر فونت را نتوان قبل از نیاز تحویل داد، معمولاً هنگام تعویض فونت، یک تغییر طرح وجود دارد. اندازه این تغییر چیدمان بسته به اینکه فونت برگشتی چقدر با فونت وب مطابقت دارد، می تواند متفاوت باشد. برای مشاهده عملی این پدیده، دمو را مشاهده کنید و تغییرات طرح‌بندی را که در اتصال سریع در مقابل اتصال آهسته رخ می‌دهد، مقایسه کنید.
مثال زیر دو تکنیک عملکرد را برای بارگیری هرچه سریعتر فونت شخص ثالث ترکیب می‌کند: استفاده از اعلان‌های فونت درون خطی و استفاده از نکات منبع preconnect . اگرچه این قطعه کد نحوه بارگیری فونت ها از فونت های Google را نشان می دهد، اما این تکنیک ها برای سایر ارائه دهندگان فونت شخص ثالث نیز اعمال می شود.
اعلان‌های فونت درون خطی : اعلان‌های
font-familyدر سند اصلی، به‌جای گنجاندن این اطلاعات در یک شیوه نامه خارجی، به مرورگر اجازه می‌دهد تا بدون نیاز به منتظر ماندن برای دانلود فایل سبک جداگانه، تعیین کند که کدام فایل فونت در صفحه استفاده می‌شود. این مهم است زیرا به طور کلی مرورگرها فایل های فونت را تا زمانی که بدانند در صفحه استفاده می شوند دانلود نمی کنند. در بیشتر موقعیت‌ها، اعلان‌های فونت درون خطی به استفاده ازpreloadبرای بارگذاری فونت‌ها ترجیح داده می‌شوند.پیش اتصال : روش پیشنهادی برای بارگیری فونت های گوگل استفاده از تگ
<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>