فونت فارسی سایت: خوانایی، سرعت و مجوز را کنار هم بسنجیم
فونت فارسی هم خوانایی را می‌سازد و هم می‌تواند رندر را کند کند. مجوز، WOFF2، subset، preload، font-display و size-adjust با روش اندازه‌گیری قبل و بعد.
SE
3 min readSoheil Ebrahimpour
Founder & product engineer
فونت فارسی دو کار هم‌زمان می‌کند: خوانایی را می‌سازد و بارگذاری صفحه را تحت تأثیر می‌گذارد. این مقاله سه تصمیم جدا را روشن می‌کند: مجوز، تحویل و رندر. هیچ اندازهٔ فایل یا نمرهٔ سرعتی برای فونت‌های فارسی ادعا نمی‌کنیم چون اندازه‌گیری نکرده‌ایم؛ روش اندازه‌گیری را می‌دهیم تا خودتان انجام دهید.
مجوز: پیش از هر چیز
فونتی که روی سایت می‌گذارید باید مجوز استفادهٔ وب داشته باشد. به‌عنوان یک نمونه، README پروژهٔ Vazirmatn می‌گوید این فونت فارسی/عربی تحت SIL Open Font License نسخهٔ ۱٫۱ منتشر شده و از راه دانلود، npm و CDN قابل نصب است. این فقط مجوز همین پروژه را تأیید می‌کند؛ مجوز هر فونت دیگری را باید خودتان از منبع رسمی همان فونت بخوانید و بررسی حقوقی با شماست.
تحویل فونت: WOFF2 و subset
web.dev می‌گوید فونت وب می‌تواند رندر متن را به تأخیر بیندازد (FCP و گاهی LCP) و با جایگزینی فونت باعث جابه‌جایی چیدمان (CLS) شود. WOFF2 را جدیدترین قالب با بیشترین پشتیبانی و بهترین فشرده‌سازی معرفی می‌کند. چون فایل‌های فونت اغلب نویسه‌های زیادی دارند، می‌توان با subset کردن و توصیف‌گر unicode-range اندازه را کم کرد. اینکه subset برای فونت فارسی چقدر صرفه دارد، به فونت و محتوای شما بستگی دارد و ما آن را اندازه نگرفته‌ایم.
preload و میزبانی
web.dev هشدار می‌دهد @font-face به‌تنهایی دانلود فونت را آغاز نمی‌کند؛ فونت فقط وقتی دانلود می‌شود که استایلی از آن در صفحه استفاده شود. preload کشف زودهنگام را بهتر می‌کند، اما منابع مرورگر را از منابع دیگر می‌گیرد و گاهی درج مستقیم تعریف فونت و اصلاح stylesheet مؤثرتر است. دربارهٔ میزبانی خودی هم می‌گوید در کاغذ سریع‌تر است ولی عملاً تفاوت همیشه روشن نیست، و پیشنهاد می‌کند فونت را از سرور خودتان بدهید و زمان انتقال را مقایسه کنید.
رندر: font-display و size-adjust
MDN می‌گوید font-display روش نمایش فونت را بر اساس زمان آماده‌شدنش تعیین می‌کند؛ مقدارهای block، swap، fallback و optional هر کدام دورهٔ «block» و «swap» متفاوتی دارند (مثلاً swap دورهٔ block بسیار کوتاه و دورهٔ swap بی‌نهایت می‌دهد، و optional اصلاً دورهٔ swap ندارد). web.dev گزینه‌ها را چنین جمع‌بندی می‌کند: اگر می‌خواهید متن سریع نشان داده شود و باز هم فونت وب را به‌کار ببرید، swap بگذارید اما فونت را آن‌قدر زود برسانید که جابه‌جایی چیدمان نشود؛ و برای کاهش اثر CLS از size-adjust می‌توان استفاده کرد.
اندازه‌گیری قبل و بعد
- در Lighthouse یا ابزار شبکهٔ مرورگر اندازه و زمان بارگیری فونت را یادداشت کنید.
- یک تغییر بدهید (مثلاً WOFF2 یا subset) و دوباره اندازه بگیرید.
- نتیجه را روی چند صفحهٔ واقعی ببینید، نه فقط صفحهٔ اصلی. برای ارتباط سرعت و ماندن کاربر، چرا کاربران بعضی سایت‌ها را سریع ترک می‌کنند را بخوانید.
چک‌لیست پیش از انتشار
- مجوز فونت برای استفادهٔ وب مکتوب و بایگانی شده.
- فقط وزن‌هایی که واقعاً استفاده می‌شوند بارگیری می‌شوند.
- قالب WOFF2 و در صورت صرفه، subset.
- تصمیم دربارهٔ preload بر پایهٔ اندازه‌گیری گرفته شده.
- font-display انتخاب و جابه‌جایی چیدمان آزموده شده است. برای تعریف آمادگی تولید Production-Ready را ببینید.
اگر می‌خواهید فونت و سرعت سایت خودتان را بازبینی کنیم، صفحهٔ شروع پروژه را ببینید؛ ارسال فرم تعهدی ایجاد نمی‌کند.
منابع و مراجع
- Best practices for fonts — web.dev (Katie Hempenius، Barry Pollard).
- font-display (CSS at-rule descriptor) — MDN Web Docs.
- Vazirmatn (README) — Saber Rastikerdar — GitHub.
Author
SE
Soheil Ebrahimpour is the founder of FutureForge. He works on product design, architecture, and getting custom software into production.
Related notes
If you are unsure about architecture or the build path, we can talk about the project.
Describe the problem and the constraints. If there is a fit, we will schedule a conversation.
