کاهش حجم فونت فارسی با subsetting و WOFF2
۳ دقیقه مطالعهبروزرسانی:
یک فونت فارسی کامل می‌تواند چند صد کیلوبایت باشد، و مرورگر باید آن را دانلود کند تا متن را درست نشان دهد. این یعنی فونت مستقیم روی سرعت نمایش متن (LCP) و پایداری چیدمان (CLS) اثر می‌گذارد. خوشبختانه با چند کار ساده حجمش را چند برابر کم می‌کنیم.
چرا فونت فارسی سنگین است؟
- هر حرف فارسی چند شکل دارد (جدا، اول، وسط، آخر)
- اعداد فارسی و عربی، علائم و حروف عربی و گاهی زبان‌های دیگر هم داخل فایل است
- فونت‌های «متغیر» (variable) چند وزن را در یک فایل دارند
- قواعد پیچیده‌ی شکل‌دهی و لیگاتور برای اتصال درست حروف
بیشتر سایت‌ها فقط بخش کوچکی از این‌ها را لازم دارند؛ بقیه وزن اضافی است.
سه کار برای کاهش حجم
۱. قالب WOFF2
فایل‌های TTF و OTF فشرده نیستند. WOFF2 همان فونت را با فشرده‌سازی Brotli به‌طور محسوس کوچک‌تر می‌کند و همه‌ی مرورگرهای امروزی آن را می‌شناسند. برای اغلب سایت‌ها فقط همین قالب لازم است.
۲. Subsetting (نگه‌داشتن فقط حروف لازم)
Subsetting یعنی از فونت فقط حروف و علائمی را نگه می‌داریم که واقعاً استفاده می‌شود. در آزمایش‌های ما روی فونت وزیرمتن (وزن Regular)، فقط با نگه داشتن حروف فارسی، اعداد و علائم رایج، حجم حدود ۸۴٪ کم شد، در حالی که متن فارسی در مرورگر دقیقاً مثل فونت اصلی رسم می‌شد.
۳. بارگذاری هوشمند
فونت را از خود سایت بدهید (self-host)، برای فونت مهم صفحه preload بگذارید و font-display: swap بنویسید تا متن تا آمدن فونت با فونت جایگزین دیده شود و صفحه‌ی خالی نبینید.
گام‌به‌گام با ابزار
- فایل فونت (TTF، OTF، WOFF یا WOFF2، تا ۵ مگابایت) را در ابزار بهینه‌سازی فونت فارسی بارگذاری کنید. فونت را حتماً با مجوزی استفاده کنید که اجازه‌ی استفاده در وب و تغییر را می‌دهد (مثل مجوز OFL وزیرمتن).
- پیش‌تنظیم‌ها را انتخاب کنید: حروف فارسی و عربی، اعداد فارسی، علائم فارسی، لاتین پایه و علائم تایپوگرافی. اگر متن خاصی دارید (مثلاً فقط یک عنوان)، آن را در کادر «متن دلخواه» بنویسید.
- قالب خروجی را WOFF2 بگذارید و نام خانواده، وزن و
font-displayرا تعیین کنید. - پیش‌نمایش زنده را با یک متن فارسی واقعی بررسی کنید و گزارش «حروف جاافتاده» را ببینید.
- فایل و کد CSS آماده را دانلود و در سایت قرار دهید.
کد آماده‌ی @font-face
@font-face {
font-family: "Vazirmatn";
src: url("/fonts/vazirmatn-subset.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}unicode-range به مرورگر می‌گوید این فایل فقط وقتی لازم است که صفحه نویسه‌ای از این محدوده داشته باشد. ابزار ما این بخش را هم می‌سازد.
چیزهایی که حتماً باید بمانند
- ویژگی‌های شکل‌دهی (GSUB/GPOS): بدون آن‌ها حروف درست به هم نمی‌چسبند. ابزار ما آن‌ها را نگه می‌دارد.
- نیم‌فاصله (ZWNJ): بدون آن «می‌روم» خراب نمایش داده می‌شود.
- اعداد فارسی (و در صورت نیاز لاتین)
- علائم فارسی مثل «،»، «؛»، «؟» و « »
بعد از ساخت کنترل کنید
- متن واقعی خودتان را با فونت جدید در مرورگر ببینید، با تمرکز روی نیم‌فاصله، اعداد و حروف پایانی.
- اگر بعداً حرفی خارج از مجموعه لازم شد (مثلاً یک نماد)، فونت را دوباره بسازید.
- با واکاوی سایت حجم فونت و LCP را قبل و بعد مقایسه کنید.
با ابزار امتحان کنید
سؤالات متداول
با کاهش حجم، اتصال حروف خراب نمی‌شود؟
اگر ویژگی‌های شکل‌دهی نگه داشته شود، نه. ما در آزمایش خود رندر متن فارسی را در مرورگر با فونت اصلی مقایسه کردیم و نتیجه یکسان بود. با این حال همیشه پیش‌نمایش را با متن واقعی خودتان ببینید.
از Google Fonts استفاده کنم یا فونت را خودم میزبانی کنم؟
میزبانی از خود سایت، وابستگی به سرویس بیرونی را حذف می‌کند و کنترل کامل کش و حجم را می‌دهد. برای فونت فارسی که معمولاً باید subset شود هم راحت‌تر است.
فونت متغیر (variable) بهتر است یا چند فایل جدا؟
اگر چند وزن لازم دارید، یک فایل متغیر معمولاً کمتر از مجموع چند فایل جدا است؛ ولی اگر فقط یک یا دو وزن لازم دارید، چند فایل کوچک‌شده ممکن است سبک‌تر باشد. هر دو حالت را امتحان کنید.