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

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

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

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

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

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

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

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

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

اسکرین شات از زبانه Timeming در 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 و فایرفاکس، ارائه متن را تا 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 برای نام تجاری و سایر عناصر صفحه از نظر بصری متمایز. use font-display: optional .

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

برای کاهش تأثیر CLS، می‌توانید از ویژگی‌های جدید size-adjust استفاده کنید. برای اطلاعات بیشتر به مقاله size-adjust CSS مراجعه کنید. این یک افزودنی بسیار جدید به مجموعه ابزار ما است، بنابراین در حال حاضر پیشرفته تر و کمی دستی است. اما قطعاً یکی برای آزمایش و تماشای بهبود ابزار در آینده!

نتیجه

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