فونت‌ها علاوه بر زیباسازی سایت، نقش کلیدی در تجربه کاربری (UX)، سرعت بارگذاری، سئو، و حتی درآمد وب‌سایت دارند. بهینه‌سازی فونت فقط یک کار تزئینی نیست؛ بلکه یک سرمایه‌گذاری واقعی روی عملکرد و رضایت کاربران است.
فهرست مطالب
- اهمیت بهینه‌سازی فونت
- فرمت‌های فونت و مقایسه آن‌ها
- ساب‌ستینگ (حذف کاراکترهای اضافی)
- فشرده‌سازی فونت‌ها
- تکنیک‌های بارگذاری بهینه (font-display)
- استفاده از CDN و کشینگ
- بهترین نکات و توصیه‌های web.dev
- ابزارهای حرفه‌ای بهینه‌سازی
- نمونه کدها و مثال‌ها
- مشکلات رایج و راه‌حل
- جمع‌بندی و منابع بیشتر
اهمیت بهینه‌سازی فونت
۱- تاثیر مستقیم بر سرعت سایت و تجربه کاربر
- فونت‌های سنگین و بزرگ زمان بارگذاری سایت را زیاد می‌کنند و کاربران را فراری می‌دهند.
- هر میلی‌ثانیه تاخیر، نرخ تبدیل (Conversion Rate) و سئوی سایت را کاهش می‌دهد.
- در موبایل، اهمیت این موضوع بیشتر است؛ چون سرعت اینترنت کاربران پایین‌تر و منابع محدودتر است.
۲- تاثیر بر شاخص‌های کلیدی عملکرد (Core Web Vitals)
| شاخص | توضیح | نقش فونت |
|---|---|---|
| LCP | بزرگ‌ترین محتوای قابل مشاهده | فونت سنگین تاخیر در نمایش متن اصلی ایجاد می‌کند |
| FID | تاخیر اولین تعامل کاربر | فونت دیر لود شده مانع تعامل سریع می‌شود |
| CLS | جابجایی چیدمان صفحه | تغییر فونت ناگهانی باعث جابجایی متن و عناصر می‌شود |
استفاده از فونت‌های بهینه و سبک، سرعت سایت را تا چندین برابر افزایش می‌دهد و مستقیماً بر سئو و تجربه کاربری تاثیر مثبت دارد.
web.dev: Best practices for fonts
۳- تاثیر بر برندینگ و اعتماد کاربران
- فونت زیبا و صحیح، حس حرفه‌ای بودن سایت را منتقل می‌کند.
- فونت‌های ناهمگون یا دیر لود شده، حس بی‌نظمی و ضعف ایجاد می‌کنند.
۴- تاثیر بر درآمد و فروش
- بر اساس تحقیقات OpenReplay، هر ثانیه تاخیر در بارگذاری فونت می‌تواند تا ۲۰٪ درآمد فروشگاه‌های اینترنتی را کاهش دهد.
۵- بهینه‌سازی فونت، هنر و علم
بهینه‌سازی فونت تنها محدود به کم کردن حجم نیست؛ بلکه برای حفظ کیفیت رندر، پشتیبانی از مرورگرهای مختلف، کاهش مصرف منابع و جلوگیری از مشکلات رایج (مثل نمایش ناقص یا بهم‌ریختگی متن) باید چندین تکنیک را باهم به کار گرفت.
فرمت‌های رایج فونت و مقایسه آن‌ها
| فرمت فونت | توضیح | حجم (میانگین) | پشتیبانی مرورگر |
|---|---|---|---|
| TTF/OTF | قدیمی، بدون فشرده‌سازی، سازگار | بالا | اکثر مرورگرها |
| WOFF | فشرده و مخصوص وب | متوسط | همه مرورگرهای مدرن |
| WOFF2 | بهینه‌تر و بسیار فشرده | کم | همه مرورگرهای مدرن (جدیدتر) |
| EOT | مخصوص IE | متوسط | فقط IE |
| SVG | مخصوص موبایل‌های قدیمی | بالا | منسوخ |
توصیه: حداقل فرمت‌های WOFF و WOFF2 را ارائه دهید. WOFF2 بهترین گزینه است.
WOFF2 is the best choice for web font delivery due to its high compression and widespread browser support.
nitropack.io
ساب‌ستینگ (Font Subsetting) یا حذف کاراکترهای اضافی
ساب‌ستینگ چیست و چرا مهم است؟
- فونت‌ها معمولاً هزاران گلیف دارند (انگلیسی، فارسی، عربی، نمادها و ...)
- با حذف کاراکترهای اضافی و نگه‌داشتن فقط کاراکترهای مورد نیاز (مثلاً فقط فارسی و اعداد)، حجم فونت را تا ۹۰٪ می‌توان کاهش داد.
ابزارهای ساب‌ستینگ:
مثال عملی با fonttools:
pyftsubset myfont.ttf --unicodes="U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF,U+200C,U+200D,U+0020-0039" --flavor=woff2 --output-file=myfont-fa.woff2
Subsetting fonts by removing unused characters is the most effective way to reduce font file size.
debugbear.com
فشرده‌سازی فونت‌ها (Font Compression)
- حجم فونت رابطه مستقیم با سرعت دانلود دارد.
- WOFF2 بهترین فرمت برای فشرده‌سازی است.
- ابزارهای آنلاین و آفلاین (fonttools, Font Squirrel, Transfonter) خروجی WOFF2 می‌دهند.
مقایسه حجم فونت (قبل و بعد از بهینه‌سازی):
| نوع فونت | حجم اولیه | بعد از Subset | بعد از WOFF2 |
|---|---|---|---|
| TTF کامل | 250KB | 80KB | 24KB |
| TTF کامل | 500KB | 120KB | 40KB |
تکنیک‌های لودینگ بهینه (font-display و ...)
خصوصیت font-display در CSS کنترل می‌کند که متن هنگام لود فونت چگونه نمایش داده شود:
| مقدار | توضیح | کاربرد |
|---|---|---|
| auto | رفتار پیش‌فرض مرورگر | معمولاً توصیه نمی‌شود |
| block | تا ۳ ثانیه هیچ متنی نمایش نمی‌دهد، بعد فونت لود شد نمایش می‌دهد | برای فونت‌های حیاتی اما ممکن است باعث FOIT شود |
| swap | متن بلافاصله با فونت پیش‌فرض نمایش داده می‌شود و بعد از دانلود فونت، فونت عوض می‌شود | پیشنهادی برای تجربه کاربری بهتر |
| fallback | شبیه swap اما تایم‌اوت کوتاه‌تر | برای فونت‌های غیرحیاتی |
| optional | اگر فونت زود نرسید، هرگز لود نمی‌شود | برای فونت‌های تزئینی |
@font-face { font-family: 'IranSans'; src: url('IranSans.woff2') format('woff2'); font-display: swap; }
Using font-display: swap improves perceived performance by showing text immediately using a fallback font.
developer.chrome.com
توجه:
- همیشه یک fallback font-family نزدیک به فونت اصلی انتخاب کنید.
- برای فونت فارسی، Tahoma یا Arial بهترین گزینه fallback هستند.
استفاده از CDN و کشینگ
مزایای استفاده از CDN:
- افزایش سرعت بارگذاری برای کاربران مناطق مختلف
- کاهش بار سرور اصلی و افزایش پایداری
- امکان کش طولانی مدت (Cache-Control: public, max-age=31536000, immutable)
نمونه هدر مناسب:
Cache-Control: public, max-age=31536000, immutable
نمونه بارگذاری فونت از CDN:
<link rel="preload" href="https://cdn.example.com/fonts/myfont-fa.woff2" as="font" type="font/woff2" crossorigin>
بهترین نکات و توصیه‌های web.dev
۱. فقط وزن‌ها و استایل‌های مورد نیاز را نگه دارید
- هر وزن (مثلاً 400, 700) و استایل (italic, bold) یک فایل جداگانه است.
- اگر از یک وزن یا دو وزن بیشتر استفاده نمی‌کنید، بقیه را حذف کنید تا حجم و تعداد درخواست‌ها کم شود.
۲. فونت‌های اصلی را preload کنید
مثال:
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
نکته: همیشه attribute crossorigin را ست کنید تا مرورگر بتواند فونت را کش کند.
۳. استفاده از fallback مناسب و نزدیک به فونت اصلی
- مثلاً اگر فونت فارسی شما کمی ضخیم‌تر از Tahoma است، وزن و ارتفاع خط fallback را تا حد ممکن با font-style-matcher تنظیم کنید.
- Font Style Matcher ابزار رایگان برای تنظیم دقیق است.
۴. استفاده از font-metric override (CSS جدید)
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; ascent-override: 90%; descent-override: 20%; line-gap-override: 0%; }
- این ویژگی‌ها کمک می‌کند خط مبنا و فاصله خطوط fallback و فونت اصلی یکی شود و پرش چیدمان (CLS) رخ ندهد.
۵. برای آیکون‌ها از SVG استفاده کنید
- آیکون‌فون (icon font)ها مشکلات دسترس‌پذیری و رندر دارند.
- SVGها یا فونت‌های متغیر (Variable Fonts) راه‌حل بهتری هستند.
۶. تست عملکرد با ابزارهای تخصصی
- Performance panel در DevTools کروم، Lighthouse و WebPageTest برای بررسی تاثیر فونت بسیار عالی‌اند.
- حتماً Network panel را چک کنید تا مطمئن شوید فونت‌ها از کش بارگذاری می‌شوند.
۷. نکات ویژه فونت فارسی
- برای فونت فارسی، features مثل init, medi, fina, isol را حتماً نگه دارید تا اتصال حروف درست باشد.
- برای اعداد و علائم، subset فقط همان بخش‌ها را نگه دارید (اگر فقط نیاز دارید).
ابزارهای حرفه‌ای بهینه‌سازی فونت
| ابزار | توضیح | لینک |
|---|---|---|
| fonttools | ساب‌ستینگ و فشرده‌سازی فونت (پایتون) | GitHub |
| glyphhanger | استخراج کاراکترها و ساب‌ستینگ (CLI) | GitHub |
| Font Squirrel | ابزار آنلاین و اتوماتیک | Font Squirrel |
| Transfonter | ابزار آنلاین با تنظیمات حرفه‌ای | Transfonter |
| Google Fonts | فونت‌های رایگان با CDN و بهینه‌سازی | Google Fonts |
نمونه کدها و مثال‌های عملی
ساب‌ستینگ و فشرده‌سازی برای فونت فارسی:
pyftsubset myfont.ttf \ --unicodes="U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF,U+200C,U+200D,U+0020-0039" \ --flavor=woff2 \ --output-file=myfont-fa.woff2 \ --no-hinting \ --drop-tables="DSIG,LTSH,VDMX" \ --layout-features="init,medi,fina,isol,ccmp" \ --name-IDs="1,2,3,4,6"
CSS با font-display و font-metric override:
@font-face { font-family: 'MyFont'; src: url('myfont-fa.woff2') format('woff2'); font-display: swap; ascent-override: 90%; descent-override: 20%; line-gap-override: 0%; }
مشکلات رایج و راه‌حل
| مشکل | دلیل | راه‌حل |
|---|---|---|
| فونت دیر لود می‌شود | حجم بالا، فرمت اشتباه، نبود CDN | ساب‌ستینگ، WOFF2، استفاده از CDN |
| FOIT (متن نامرئی تا لود فونت) | font-display: block | استفاده از swap یا fallback |
| FOUT (تغییر فونت ناگهانی) | swap یا fallback | انتخاب fallback مناسب و نزدیک به فونت اصلی |
| فونت در برخی مرورگرها نمایش نمی‌یابد | فرمت نامناسب یا ناقص | ارائه همزمان WOFF و WOFF2 |
جمع‌بندی و منابع بیشتر
- فونت سایت را ساب‌ست و فشرده کنید؛ فقط کاراکترهای لازم را نگه دارید.
- همیشه از WOFF2 و در صورت نیاز WOFF استفاده کنید.
- در CSS مقدار font-display: swap را برای فونت‌ها تنظیم کنید.
- فونت را روی CDN قرار دهید و کشینگ مناسب اعمال کنید.
- فونت خروجی را روی همه مرورگرها و دستگاه‌ها تست کنید.
منابع و رفرنس‌های معتبر
- Best practices for fonts | web.dev
- The Ultimate Guide to Font Performance Optimization | DebugBear
- Web Font Optimization For Web Designers | Dodonut
- Font loading optimization | NitroPack
- Definitive Guide to Web Fonts Optimization | OpenReplay
- developer.chrome.com: Font Display
- FontTools Documentation
- Font Squirrel Webfont Generator
- Transfonter
- Google Fonts
- Font Style Matcher
- WebPageTest
پرسش یا ابهام داری؟
اگر سوال یا نیاز به راهنمایی بیشتر داری، همین‌جا بپرس یا منابع بالا را به دقت مطالعه کن.
