بهترین روش ها برای فونت ها

فونت‌های وب را برای Core Web Vitals بهینه کنید.

کیتی همپنیوس
Katie Hempenius
X
بری پولارد

این سند در مورد بهترین شیوه‌های عملکرد فونت‌ها بحث می‌کند. فونت‌های وب از طرق مختلفی بر عملکرد تأثیر می‌گذارند:

این سند سه بخش دارد: بارگذاری فونت ، تحویل فونت و رندر فونت . هر بخش نحوه عملکرد آن جنبه خاص از چرخه عمر فونت را توضیح می‌دهد و بهترین شیوه‌های مربوطه را ارائه می‌دهد.

بارگذاری فونت

فونت‌ها منابع مهمی هستند. بدون آنها، کاربر ممکن است قادر به مشاهده محتوای صفحه نباشد. بنابراین، بهترین شیوه‌ها برای بارگذاری فونت عموماً بر اطمینان از بارگذاری هرچه سریع‌تر فونت‌ها متمرکز است. باید به فونت‌هایی که از سایت‌های شخص ثالث بارگذاری می‌شوند توجه ویژه‌ای شود زیرا دانلود این فایل‌های فونت نیاز به تنظیمات اتصال جداگانه دارد.

اگر مطمئن نیستید که فونت‌های صفحه شما به موقع درخواست می‌شوند یا خیر، برای اطلاعات بیشتر، تب Timing را در پنل Network در Chrome DevTools بررسی کنید.

تب زمان‌بندی در DevTools.

@font-face را درک کنید

قبل از اینکه به بهترین شیوه‌های بارگذاری فونت بپردازیم، مهم است که بدانیم @font-face چگونه کار می‌کند و چگونه بر بارگذاری فونت تأثیر می‌گذارد.

اعلان @font-face بخش اساسی کار با هر فونت وب است. حداقل، نامی را که برای اشاره به فونت استفاده می‌شود، اعلان می‌کند و محل فایل فونت مربوطه را نشان می‌دهد.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

یک تصور غلط رایج این است که وقتی با اعلان @font-face مواجه می‌شویم، فونت درخواست می‌شود. این تصور غلط است. اعلان @font-face به خودی خود باعث دانلود فونت نمی‌شود. بلکه، یک فونت فقط در صورتی دانلود می‌شود که توسط استایلی که در صفحه استفاده می‌شود، ارجاع داده شده باشد. برای مثال:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

در این مثال، Open Sans فقط در صورتی دانلود می‌شود که صفحه حاوی عنصر <h1> باشد.

بنابراین، هنگام فکر کردن به بهینه‌سازی فونت، مهم است که به استایل‌شیت‌ها به اندازه خود فایل‌های فونت توجه شود. تغییر محتوا یا تحویل استایل‌شیت‌ها می‌تواند تأثیر قابل توجهی بر زمان رسیدن فونت‌ها داشته باشد. به طور مشابه، حذف CSSهای استفاده نشده و تقسیم استایل‌شیت‌ها می‌تواند تعداد فونت‌های بارگذاری شده توسط یک صفحه را کاهش دهد.

اعلان‌های فونت درون‌خطی

اکثر سایت‌ها به جای قرار دادن اعلان‌های فونت و سایر استایل‌های مهم در <head> سند اصلی، از درج آن‌ها در یک فایل استایل خارجی، به صورت درون‌خطی (inline) سود زیادی می‌برند. این کار به مرورگر اجازه می‌دهد تا اعلان‌های فونت را زودتر کشف کند، زیرا نیازی نیست مرورگر منتظر دانلود فایل استایل خارجی بماند.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

درج CSS بحرانی می‌تواند تکنیک پیشرفته‌تری باشد که همه سایت‌ها نمی‌توانند به آن دست یابند. مزایای عملکرد آن واضح است، اما به فرآیندهای اضافی و ابزارهای ساخت نیاز دارد تا اطمینان حاصل شود که CSS مورد نیاز، و در حالت ایده‌آل فقط CSS بحرانی، به درستی درج شده است و هرگونه CSS اضافی به روشی بدون مسدود کردن رندر ارائه می‌شود.

اتصال اولیه به منابع مهم شخص ثالث

اگر سایت شما فونت‌ها را از یک سایت شخص ثالث بارگذاری می‌کند، اکیداً توصیه می‌شود که از preconnect resource hint برای ایجاد اتصال(های) اولیه با مبدا شخص ثالث استفاده کنید. resource hint ها باید در <head> سند قرار گیرند. resource hint زیر یک اتصال برای بارگذاری font stylesheet ایجاد می‌کند.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

برای پیش‌اتصال اتصالی که برای دانلود فایل فونت استفاده می‌شود، یک راهنمای منبع preconnect جداگانه اضافه کنید که از ویژگی crossorigin استفاده می‌کند. برخلاف stylesheets، فایل‌های فونت باید از طریق اتصال CORS ارسال شوند.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

هنگام استفاده از اشاره‌گر منبع preconnect ، به خاطر داشته باشید که یک ارائه‌دهنده فونت ممکن است stylesheetها و فونت‌ها را از منابع جداگانه ارائه دهد. برای مثال، این نحوه استفاده از اشاره‌گر منبع preconnect برای فونت‌های گوگل است.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

هنگام استفاده preload برای بارگذاری فونت‌ها احتیاط کنید

اگرچه preload در قابل تشخیص کردن فونت‌ها در مراحل اولیه بارگذاری صفحه بسیار مؤثر است، اما این به قیمت از دست دادن منابع مرورگر از بارگذاری سایر منابع تمام می‌شود.

درج اعلان‌های فونت و تنظیم شیوه‌نامه‌ها می‌تواند رویکرد مؤثرتری باشد. این تنظیمات به جای ارائه صرفاً یک راه حل موقت، به ریشه‌یابی علت فونت‌های دیرکشف‌شده نزدیک‌تر می‌شوند.

علاوه بر این، استفاده از preload به عنوان یک استراتژی بارگذاری فونت نیز باید با دقت مورد استفاده قرار گیرد زیرا برخی از استراتژی‌های مذاکره محتوای داخلی مرورگر را نادیده می‌گیرد. به عنوان مثال، preload اعلان‌های unicode-range را نادیده می‌گیرد و در صورت استفاده محتاطانه، فقط باید برای بارگذاری یک قالب فونت واحد استفاده شود.

با این حال، هنگام استفاده از stylesheet های خارجی، پیش بارگذاری مهمترین فونت ها می تواند بسیار مؤثر باشد زیرا مرورگر در غیر این صورت تا مدت ها بعد متوجه نخواهد شد که آیا به فونت نیاز است یا خیر.

تحویل فونت

تحویل سریع‌تر فونت، رندر متن را سریع‌تر می‌کند. علاوه بر این، اگر یک فونت به موقع تحویل داده شود، می‌تواند به از بین بردن تغییرات طرح‌بندی ناشی از تعویض فونت کمک کند.

از فونت‌های خود-میزبان استفاده کنید

روی کاغذ، استفاده از یک فونت خود-میزبان باید عملکرد بهتری داشته باشد زیرا نیاز به راه‌اندازی اتصال شخص ثالث را از بین می‌برد. در عمل، تفاوت عملکرد بین این دو گزینه چندان واضح نیست. به عنوان مثال، Web Almanac دریافت که سایت‌هایی که از فونت‌های شخص ثالث استفاده می‌کنند، رندر سریع‌تری نسبت به فونت‌هایی که از فونت‌های شخص ثالث استفاده می‌کنند، دارند.

اگر به استفاده از فونت‌های خود-میزبان فکر می‌کنید، مطمئن شوید که سایت شما از شبکه تحویل محتوا (CDN) و HTTP/2 استفاده می‌کند. بدون استفاده از این فناوری‌ها، احتمال اینکه فونت‌های خود-میزبان عملکرد بهتری ارائه دهند، بسیار کمتر است.

اگر از فونت خود-میزبان استفاده می‌کنید، توصیه می‌شود برخی از بهینه‌سازی‌های فایل فونت را که ارائه‌دهندگان فونت شخص ثالث معمولاً به‌طور خودکار ارائه می‌دهند، اعمال کنید. به‌عنوان‌مثال، تنظیم فونت و فشرده‌سازی WOFF2. میزان تلاش مورد نیاز برای اعمال این بهینه‌سازی‌ها تا حدودی به زبان‌هایی که سایت شما پشتیبانی می‌کند بستگی دارد. به‌ویژه، توجه داشته باشید که بهینه‌سازی فونت‌ها برای زبان‌های CJK می‌تواند به‌طور ویژه چالش‌برانگیز باشد.

از WOFF2 استفاده کنید

از بین فونت‌های مدرن، WOFF2 جدیدترین است، وسیع‌ترین پشتیبانی مرورگر را دارد و بهترین فشرده‌سازی را ارائه می‌دهد. از آنجا که از Brotli استفاده می‌کند، WOFF2 30٪ بهتر از WOFF فشرده‌سازی می‌کند که منجر به دانلود داده‌های کمتر و در نتیجه عملکرد سریع‌تر می‌شود.

با توجه به پشتیبانی مرورگرها، متخصصان اکنون فقط استفاده از WOFF2 را توصیه می‌کنند:

در واقع، ما فکر می‌کنیم وقت آن رسیده که اعلام کنیم: فقط از WOFF2 استفاده کنید و هر چیز دیگری را فراموش کنید.

این کار CSS و گردش کار شما را به طور چشمگیری ساده می‌کند و همچنین از دانلود تصادفی فونت‌های تکراری یا نادرست جلوگیری می‌کند. WOFF2 اکنون در همه جا پشتیبانی می‌شود. بنابراین، مگر اینکه نیاز به پشتیبانی از مرورگرهای بسیار قدیمی داشته باشید، فقط از WOFF2 استفاده کنید. اگر نمی‌توانید، اصلاً هیچ فونت وب را به آن مرورگرهای قدیمی ارائه ندهید. اگر یک استراتژی پشتیبان قوی داشته باشید، این مشکلی ایجاد نمی‌کند. بازدیدکنندگان مرورگرهای قدیمی فونت‌های پشتیبان شما را خواهند دید.

برام استاین، از سالنامه وب ۲۰۲۲

فونت‌های زیرمجموعه

فایل‌های فونت معمولاً شامل تعداد زیادی گلیف برای تمام کاراکترهای مختلفی هستند که پشتیبانی می‌کنند. اما ممکن است شما به تمام کاراکترهای صفحه خود نیاز نداشته باشید و بتوانید با تنظیم فونت‌ها، اندازه فایل‌های فونت را کاهش دهید.

توصیفگر unicode-range در اعلان @font-face به مرورگر اطلاع می‌دهد که یک فونت برای کدام کاراکترها قابل استفاده است.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

اگر صفحه حاوی یک یا چند کاراکتر مطابق با محدوده یونیکد باشد، یک فایل فونت دانلود می‌شود. unicode-range معمولاً برای ارائه فایل‌های فونت مختلف بسته به زبان مورد استفاده محتوای صفحه استفاده می‌شود.

unicode-range اغلب همراه با تکنیک subsetting استفاده می‌شود. یک فونت subset شامل بخش کوچکتری از گلیف‌هایی است که در فایل فونت اصلی وجود داشته‌اند. برای مثال، به جای ارائه همه کاراکترها به همه کاربران، یک سایت ممکن است فونت‌های subset جداگانه‌ای برای کاراکترهای لاتین و سیریلیک ایجاد کند.

تعداد گلیف‌ها در هر فونت بسیار متفاوت است:

  • فونت‌های لاتین معمولاً بین ۱۰۰ تا ۱۰۰۰ گلیف در هر فونت دارند.
  • فونت‌های CJK ممکن است بیش از ۱۰۰۰۰ کاراکتر داشته باشند.

حذف گلیف‌های استفاده نشده می‌تواند حجم فایل یک فونت را به میزان قابل توجهی کاهش دهد.

برخی از ارائه‌دهندگان فونت ممکن است نسخه‌های مختلفی از فایل‌های فونت را با زیرمجموعه‌های مختلف به طور خودکار ارائه دهند. به عنوان مثال، فونت‌های گوگل این کار را به طور پیش‌فرض انجام می‌دهند:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

هنگام انتقال به هاست شخصی، این یک بهینه‌سازی است که می‌تواند از دست برود و منجر به فایل‌های فونت بزرگتر به صورت محلی شود.

اگر ارائه‌دهنده فونت شما این امکان را فراهم کند، می‌توانید فونت‌ها را به صورت دستی زیرمجموعه‌بندی کنید، یا با یک API ( فونت‌های گوگل با ارائه یک پارامتر text از این پشتیبانی می‌کنند )، یا با ویرایش دستی فایل‌های فونت و سپس میزبانی خودکار. ابزارهایی برای تولید زیرمجموعه‌های فونت شامل subfont و glyphanger هستند.

همیشه مجوزهای فونت را بررسی کنید تا تأیید کنید که اجازه زیرمجموعه‌سازی و میزبانی خودکار را می‌دهند .

از فونت‌های وب کمتری استفاده کنید

سریع‌ترین فونت برای ارائه، فونتی است که از ابتدا درخواست نشده باشد. فونت‌های سیستمی و فونت‌های متغیر دو راه برای کاهش بالقوه تعداد فونت‌های وب مورد استفاده در سایت شما هستند.

فونت سیستم ، فونت پیش‌فرض مورد استفاده توسط رابط کاربری دستگاه کاربر است. فونت‌های سیستم معمولاً بسته به سیستم عامل و نسخه متفاوت هستند. از آنجا که فونت از قبل نصب شده است، نیازی به دانلود آن نیست. فونت‌های سیستم می‌توانند به ویژه برای متن بدنه به خوبی کار کنند.

برای استفاده از فونت سیستم در CSS خود، system-ui به عنوان font-family لیست کنید:

font-family: system-ui

ایده پشت فونت‌های متغیر این است که یک فونت متغیر واحد می‌تواند به عنوان جایگزینی برای چندین فایل فونت استفاده شود. فونت‌های متغیر با تعریف یک سبک فونت "پیش‌فرض" و ارائه "محورها" برای دستکاری فونت کار می‌کنند. به عنوان مثال، یک فونت متغیر با محور Weight می‌تواند برای پیاده‌سازی حروفی استفاده شود که قبلاً برای فونت‌های روشن، معمولی، پررنگ و خیلی پررنگ به فونت‌های جداگانه نیاز داشت.

همه از تغییر به فونت‌های متغیر سود نمی‌برند. فونت‌های متغیر شامل سبک‌های زیادی هستند، بنابراین معمولاً اندازه فایل بزرگتری نسبت به فونت‌های غیر متغیر منفرد که فقط شامل یک سبک هستند، دارند. سایت‌هایی که بیشترین بهبود را از استفاده از فونت‌های متغیر مشاهده می‌کنند، سایت‌هایی هستند که از سبک‌ها و وزن‌های فونت متنوعی استفاده می‌کنند (و نیاز به استفاده از آنها دارند).

رندر فونت

وقتی مرورگر با یک فونت وب مواجه می‌شود که هنوز بارگذاری نشده است، با یک دوراهی مواجه می‌شود: آیا باید رندر کردن متن را تا زمان رسیدن فونت وب به تعویق بیندازد؟ یا باید متن را با یک فونت جایگزین رندر کند تا فونت وب از راه برسد؟

مرورگرهای مختلف این سناریو را به طور متفاوتی مدیریت می‌کنند. به طور پیش‌فرض، مرورگرهای مبتنی بر کرومیوم و فایرفاکس، در صورت عدم بارگذاری فونت وب مرتبط، رندر متن را تا ۳ ثانیه مسدود می‌کنند. سافاری رندر متن را به طور نامحدود مسدود می‌کند.

این رفتار را می‌توان با استفاده از ویژگی font-display پیکربندی کرد. این انتخاب می‌تواند پیامدهای قابل توجهی داشته باشد: font-display پتانسیل تأثیرگذاری بر LCP، FCP و پایداری طرح‌بندی را دارد.

یک استراتژی font-display مناسب انتخاب کنید

font-display به مرورگر اطلاع می‌دهد که چگونه باید رندر متن را زمانی که فونت وب مرتبط بارگذاری نشده است، ادامه دهد. این ویژگی برای هر font-face تعریف می‌شود. 

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

پنج مقدار ممکن برای font-display وجود دارد:

ارزش دوره بلوک دوره سوآپ
خودکار بسته به مرورگر متفاوت است بسته به مرورگر متفاوت است
بلوک ۲-۳ ثانیه بی نهایت
تعویض 0 میلی‌ثانیه بی نهایت
بازگشت به عقب ۱۰۰ میلی‌ثانیه ۳ ثانیه
اختیاری ۱۰۰ میلی‌ثانیه هیچکدام
  • دوره بلوک : دوره بلوک زمانی شروع می‌شود که مرورگر یک فونت وب را درخواست می‌کند. در طول دوره بلوک، اگر فونت وب در دسترس نباشد، فونت با یک فونت جایگزین نامرئی رندر می‌شود و بنابراین متن برای کاربر نامرئی است. اگر فونت در پایان دوره بلوک در دسترس نباشد، با فونت جایگزین رندر می‌شود.
  • دوره تعویض : دوره تعویض بعد از دوره مسدودسازی می‌آید. اگر فونت وب در طول دوره تعویض در دسترس قرار گیرد، "تعویض" می‌شود.

استراتژی‌های font-display دیدگاه‌های مختلفی را در مورد تعادل بین عملکرد و زیبایی‌شناسی منعکس می‌کنند. به همین دلیل، توصیه یک رویکرد دشوار است زیرا به ترجیحات فردی، میزان اهمیت فونت وب برای صفحه و برند و میزان نامطلوب بودن یک فونت دیرهنگام هنگام تعویض بستگی دارد.

برای اکثر سایت‌ها، این سه استراتژی، بر اساس اولویت اصلی شما، کاربردی‌ترین هستند:

  • عملکرد : از font-display: optional استفاده کنید. این "عملکردی‌ترین" رویکرد است: رندر متن بیش از ۱۰۰ میلی‌ثانیه تأخیر ندارد و اطمینان وجود دارد که تغییرات طرح‌بندی مرتبط با تعویض فونت وجود ندارد. نکته منفی این است که اگر فونت وب دیر برسد، استفاده نخواهد شد.

  • نمایش سریع متن و استفاده از فونت وب : از font-display: swap استفاده کنید، اما مطمئن شوید که فونت را به موقع تحویل می‌دهید تا باعث تغییر طرح‌بندی نشود. نکته منفی این گزینه، تغییر نامطلوب فونت در صورت دیر رسیدن فونت است.

  • متن با فونت وب نمایش داده می‌شود : از font-display: block استفاده کنید، اما مطمئن شوید که فونت را به اندازه کافی زود تحویل می‌دهید تا تأخیر متن به حداقل برسد. نمایش اولیه متن با تأخیر انجام می‌شود. با وجود این تأخیر، همچنان می‌تواند باعث تغییر طرح‌بندی شود زیرا متن در واقع نامرئی ترسیم می‌شود و بنابراین از فضای فونت جایگزین برای رزرو فضا استفاده می‌شود. پس از بارگذاری فونت وب، ممکن است به فضای متفاوت نیاز باشد، از این رو یک تغییر ایجاد می‌شود. این تغییر ممکن است نسبت به font-display: swap کمتر آزاردهنده باشد، زیرا خود متن تغییر نمی‌کند.

همچنین به خاطر داشته باشید که این دو رویکرد را می‌توان با هم ترکیب کرد: برای مثال، از font-display: swap برای برندسازی و سایر عناصر صفحه که از نظر بصری متمایز هستند استفاده کنید. برای فونت‌های استفاده شده در متن بدنه، font-display: optional استفاده کنید.

فونت آیکون‌ها

استراتژی‌های font-display که برای فونت‌های وب معمولی به خوبی کار می‌کنند، برای فونت‌های آیکون به خوبی کار نمی‌کنند. فونت جایگزین برای یک فونت آیکون معمولاً به طور قابل توجهی متفاوت از فونت آیکون به نظر می‌رسد و کاراکترهای آن ممکن است معنای کاملاً متفاوتی را منتقل کنند. در نتیجه، فونت‌های آیکون به احتمال زیاد باعث تغییرات قابل توجهی در طرح‌بندی می‌شوند.

علاوه بر این، استفاده از یک فونت جایگزین ممکن است عملی نباشد. در صورت امکان، فونت‌های آیکون را با SVG جایگزین کنید، که برای دسترسی‌پذیری نیز بهتر است. نسخه‌های جدیدتر فونت‌های آیکون محبوب معمولاً از SVG پشتیبانی می‌کنند. برای اطلاعات بیشتر در مورد تغییر به SVG، به صفحه Font Awesome در مورد SVG Sprites و راهنمای آیکون‌های متریال ما مراجعه کنید.

تغییر بین فونت جایگزین و فونت وب خود را کاهش دهید

برای کاهش تأثیر CLS، می‌توانید از ویژگی‌های size-adjust استفاده کنید.

نتیجه‌گیری

فونت‌های وب هنوز هم یک گلوگاه عملکرد هستند، اما ما طیف وسیعی از گزینه‌ها را در اختیار داریم که به ما امکان می‌دهد آنها را بهینه کنیم تا این گلوگاه را تا حد امکان کاهش دهیم.