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

فونت های خود میزبانی شده فایل های فونتی هستند که از سرورهای خود شما ارائه می شوند - به جای فونت های یک ارائه دهنده فونت شخص ثالث (مثلاً فونت های Google).

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

مثال زیر دو تکنیک عملکرد را برای ارائه یک فونت خود میزبانی شده در سریع ترین زمان ممکن ترکیب می کند: استفاده از اعلان فونت درون خطی و استفاده از فرمت فونت WOFF2.

  • اعلان‌های فونت درون خطی : درون‌نویسی اعلان‌های @font-face و font-family در سند اصلی، به جای گنجاندن این اطلاعات در یک شیوه نامه خارجی، به مرورگر امکان می‌دهد بدون نیاز به منتظر ماندن برای یک صفحه جداگانه، تعیین کند که کدام فایل فونت در صفحه استفاده می‌شود. فایل شیوه نامه برای دانلود. این مهم است زیرا به طور کلی مرورگرها فایل های فونت را تا زمانی که بدانند در صفحه استفاده می شوند دانلود نمی کنند. در بیشتر موقعیت‌ها، اعلان‌های فونت درون خطی به استفاده از preload برای بارگذاری فونت‌ها ترجیح داده می‌شوند.

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

برای بهبود بیشتر عملکرد، استفاده از زیرمجموعه فونت را در نظر بگیرید. زیرمجموعه فونت، عمل شکستن یک فایل فونت به زیرمجموعه های کوچکتر است - معمولاً با هدف حذف حروف بلااستفاده. این می تواند اندازه فایل یک فونت را به میزان قابل توجهی کاهش دهد. ابزارهای ایجاد زیرمجموعه فونت عبارتند از fontkit , subfont و glyphhanger .

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

مثال:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>