فونتها بخش مهم UI هستن ولی اگه بد لود بشن، Layout Shift و کندی ایجاد میکنن. تو این مقاله راههای بهینهسازی.
مشکل فونت
مرورگر باید فونت رو دانلود کنه قبل نمایش. تا اون موقع FOIT (Flash of Invisible Text) یا FOUT (Flash of Unstyled Text).
font-display
@font-face {
font-family: MyFont;
src: url('font.woff2') format('woff2');
font-display: swap;
}
font-display Values
auto: پیشفرض
block: FOIT کم
swap: FOUT کم
fallback: تعادل
optional: اگه سریع لود شد
Preload
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
WOFF2
بهترین فرمت. حجم کم، سازگاری خوب.
Subsetting
فقط کاراکترهایی که استفاده میکنید. حجم کم میشه.
Variable Fonts
یه فایل شامل همه Weight ها. مثل Inter Variable.
System Fonts
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
بدون دانلود.
Self-hosting
بهتر از Google Fonts CDN. حریم خصوصی و سرعت.
Persian Fonts
وزیر، ایرانسنس، ایرانیکان. Subsetting برای حروف فارسی.
Font Loading API
document.fonts.ready.then(...)
Critical CSS
CSS ضروری Inline کنید.
سباهاست
هاست سریع سباهاست + Preload = فونت سریع.
جمعبندی
با استراتژی درست، فونت زیبا بدون کاهش سرعت.
