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

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

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

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

  • تأخیر در ارائه متن: اگر یک فونت وب بارگیری نشده باشد، مرورگرها معمولاً رندر متن را به تأخیر می اندازند. در بسیاری از موقعیت‌ها، این کار First Contentful Paint (FCP) را به تاخیر می‌اندازد. در برخی شرایط، این کار بزرگترین رنگ محتوایی (LCP) را به تاخیر می اندازد.
  • تغییر چینش: عمل تعویض فونت این پتانسیل را دارد که باعث تغییر چیدمان شود و بر تغییر چیدمان تجمعی (CLS) تأثیر بگذارد. این تغییرات چیدمان زمانی اتفاق می‌افتد که یک فونت وب و فونت بازگشتی آن مقادیر متفاوتی از فضای صفحه را اشغال کنند.

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

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

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

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

تب Timeing در 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> سند اصلی سود می‌برند. این به مرورگر اجازه می‌دهد تا اعلان‌های فونت را زودتر کشف کند زیرا مرورگر نیازی به صبر کردن برای بارگیری صفحه سبک خارجی ندارد.

<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 برای ایجاد اتصال(های) اولیه با منبع شخص ثالث استفاده کنید. نکات منبع باید در <head> سند قرار گیرد. راهنمایی منبع زیر یک اتصال را برای بارگیری شیوه نامه فونت ایجاد می کند.

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

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

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

هنگام استفاده از راهنمایی منبع preconnect ، به خاطر داشته باشید که یک ارائه‌دهنده فونت ممکن است برگه‌های سبک و فونت‌هایی را از مبدا جداگانه ارائه دهد. به عنوان مثال، به این صورت است که از راهنمایی منبع 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 را نادیده می‌گیرد و در صورت استفاده محتاطانه، باید فقط برای بارگیری یک قالب فونت استفاده شود.

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

تحویل فونت

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

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

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

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

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

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

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

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

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

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

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

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

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

توصیفگر 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 اغلب همراه با تکنیک زیرمجموعه استفاده می شود. فونت زیرمجموعه شامل بخش کوچکتری از گلیف هایی است که در فایل فونت اصلی موجود است. به عنوان مثال، به جای ارائه همه کاراکترها به همه کاربران، یک سایت ممکن است فونت های زیر مجموعه جداگانه ای برای کاراکترهای لاتین و سیریلیک تولید کند.

تعداد حروف در هر فونت بسیار متفاوت است:

  • فونت های لاتین معمولاً در بزرگی 100 تا 1000 گلیف در هر فونت هستند.
  • فونت های CJK ممکن است بیش از 10000 کاراکتر داشته باشند.

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

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

/* 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 ( فونت‌های Google با ارائه یک پارامتر text از این امر پشتیبانی می‌کند )، یا با ویرایش دستی فایل‌های فونت و سپس میزبانی خودکار. ابزارهای تولید زیرمجموعه فونت ها عبارتند از subfont و glyphanger .

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

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

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

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

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

font-family: system-ui

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

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

رندر فونت

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

مرورگرهای مختلف این سناریو را به طور متفاوتی مدیریت می کنند. به‌طور پیش‌فرض، اگر فونت وب مرتبط بارگیری نشده باشد، مرورگرهای مبتنی بر Chromium و Firefox، ارائه متن را تا 3 ثانیه مسدود می‌کنند. سافاری رندر متن را به طور نامحدود مسدود می کند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتیجه گیری

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