سازنده‌ی @font-face

چطور فونت فارسی به سایت اضافه کنم؟

1. فایل‌های فونت را با فرمت WOFF2 تهیه کن. فونت‌های رایگانی مثل وزیرمتن، استعداد و ساحل فایل WOFF2 دارند؛ برای فونت‌های تجاری هم معمولاً همراه بسته است.
2. فایل‌ها را در یک پوشه مثل /fonts/ روی سرور بگذار.
3. برای هر وزن یک قاعده‌ی ‎@font-face بنویس؛ این ابزار همین را می‌سازد.
4. نام فونت را در font-family روی body یا هر بخشی که می‌خواهی استفاده کن.
5. وزن اصلی متن را preload کن تا زودتر بارگذاری شود.

چند وزن فونت لازم است؟

هر وزن یک فایل جداست و دانلود اضافه دارد. بیشتر سایت‌ها با سه وزن کار راه می‌اندازند: معمولی (۴۰۰) برای متن، متوسط یا نیمه‌پررنگ (۵۰۰ یا ۶۰۰) برای دکمه و منو، و پررنگ (۷۰۰ یا ۸۰۰) برای تیترها. اگر طرح فیگما بیش از چهار وزن استفاده کرده، بهتر است نسخه‌ی متغیر (Variable) فونت را بگیری که همه‌ی وزن‌ها در یک فایل است:

‎@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn[wght].woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

اعداد فارسی در فونت

بیشتر فونت‌های فارسی دو نسخه دارند: یکی که رقم‌های انگلیسی را هم فارسی نشان می‌دهد (معمولاً با پسوند FD یا Farsi Digits) و یکی با رقم انگلیسی. اگر قیمت و تاریخ باید فارسی دیده شوند ولی در کد انگلیسی بمانند، نسخه‌ی FD را انتخاب کن. بعضی فونت‌ها مثل وزیرمتن این را با یک ویژگی OpenType انجام می‌دهند:

.price {
  font-feature-settings: "ss01";
}

برای تبدیل خود رقم‌ها در متن هم ابزار تبدیل اعداد فارسی و انگلیسی را داریم.

اشتباه‌های رایج

• نام‌گذاری جدا برای هر وزن: اگر برای پررنگ نام «Vazir-Bold» بگذاری، font-weight: 700 کار نمی‌کند و مرورگر پررنگی مصنوعی می‌سازد. همه‌ی وزن‌ها باید یک font-family داشته باشند.
• مسیر نسبی اشتباه: آدرس داخل url() نسبت به فایل CSS حساب می‌شود؛ مسیر مطلق مثل /fonts/… مطمئن‌تر است.
• فراموش کردن crossorigin در preload: بدون آن فونت دو بار دانلود می‌شود.
• بارگذاری فونت از CDN خارجی: برای کاربران ایرانی ممکن است کند یا قطع باشد؛ فونت را روی هاست خودت بگذار.

در پروژه‌های تبدیل فیگما به HTML فونت‌ها با همین روش، به‌صورت محلی و بهینه بارگذاری می‌شوند تا سایت در اینترنت داخلی هم سریع و درست نمایش داده شود.