مدیریت فونت‌ها با CSS @font-face

استفاده از فونت‌های سفارشی در وب‌سایت‌های مدرن یکی از روش‌های اصلی برای تقویت برند و تجربه کاربری است. دستور @font-face در CSS به شما اجازه می‌دهد فونت دلخواه را بارگذاری، کنترل و برای عناصر مختلف اعمال کنید. در این مقاله به جنبه‌های فنی، بهترین روش‌ها و بهینه‌سازی عملکرد می‌پردازیم.

چرا از @font-face استفاده کنیم؟

هماهنگی ظاهری بین مرورگرها و سیستم‌ها
استفاده از فونت‌های اختصاصی برند بدون نیاز به نصب کاربر
پشتیبانی از وزن‌ها، استایل‌ها و متغیرها (variable fonts)

ساختار پایه @font-face

@font-face {
  font-family: "MyBrand";
  src: url("/fonts/MyBrand.woff2") format("woff2"),
       url("/fonts/MyBrand.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

این نمونه فونت نسخه‌های woff2 و woff را تعریف می‌کند، وزن‌های 400 تا 700 را پشتیبانی می‌کند و با font-display: swap از رخداد FOIT جلوگیری می‌کند؛ یعنی متن با فونت پشتیبان نمایش داده و سپس فونت سفارشی جایگزین می‌شود.

توضیح آیتم‌های مهم

font-family: نامی که در CSS برای استفاده از فونت به کار می‌برید.
src: مسیر فایل‌های فونت و فرمت آن‌ها (woff2، woff، ttf، eot، svg).
font-display: نحوه نمایش در زمان بارگذاری (auto, block, swap, fallback, optional).
unicode-range: تعیین بازه‌ی یونیکد برای ایجاد بخش‌هایی از فونت (subsetting).
font-weight و font-style: تعیین وزن‌ها و حالت‌ها برای رندر صحیح.

بهینه‌سازی عملکرد و تجربه کاربری

فونت‌های وب می‌توانند تاثیر زیادی روی زمان بارگذاری و CLS داشته باشند. نکات زیر را رعایت کنید:

از فرمت woff2 به‌عنوان اولویت استفاده کنید؛ فشرده و بهینه است.
فونت‌ها را با preload بارگذاری کنید تا رندر متن سریع‌تر شود.
از font-display: swap استفاده کنید تا FOIT (Flash of Invisible Text) کاهش یابد.
با unicode-range فونت‌ها را خرد (subset) کنید تا فقط کاراکترهای لازم دانلود شوند.
از فونت‌های متغیر (variable fonts) بهره ببرید تا به‌جای چند فایل وزن‌های مختلف با یک فایل مدیریت شوند.

مثال: استفاده از preload و crossorigin

<link rel="preload" href="/fonts/MyBrand.woff2" as="font" type="font/woff2" crossorigin>

این تگ در بخش HTML (معمولاً در <head>) باعث می‌شود مرورگر دانلود فونت را در اولویت قرار دهد. crossorigin زمانی ضروری است که فونت از دامنه‌ی دیگری بارگذاری شود یا هدر CORS لازم باشد.

مثال پیشرفته: تعریف چند وزن و local fallback

@font-face {
  font-family: "InterCustom";
  src: local("Inter"), 
       url("/fonts/inter-roman-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterCustom";
  src: url("/fonts/inter-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

در این مثال، ابتدا با local(“Inter”) سعی می‌کنیم اگر فونت روی سیستم کاربر نصب است از آن استفاده کنیم تا دانلود کمتری لازم باشد. سپس نسخه‌ی وب را به‌عنوان fallback تعریف می‌کنیم. همچنین برای ایتالیک و وزن‌های مختلف مجزا تعریف شده‌اند.

استفاده از unicode-range برای کاهش حجم

@font-face {
  font-family: "MyBrand";
  src: url("/fonts/mybrand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "MyBrand";
  src: url("/fonts/mybrand-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F;
}

با تقسیم فونت بر اساس بازه‌های یونیکد، مرورگر فقط بخش مورد نیاز زبان را دانلود می‌کند — مثلاً انگلیسی یا عربی — که موجب صرفه‌جویی در پهنای‌باند می‌شود.

فونت‌های متغیر (Variable Fonts)

فونت‌های متغیر یک فایل شامل تمامی وزن‌ها و استایل‌ها هستند. این قابلیت می‌تواند تعداد درخواست‌ها را کاهش و انعطاف‌پذیری طراحی را افزایش دهد.

@font-face {
  font-family: "VF-Brand";
  src: url("/fonts/brand-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

سپس می‌توانید با CSS مانند font-weight: 350; یا استفاده از font-variation-settings کنترل دقیق‌تری روی ظاهر فونت داشته باشید.

جداول مقایسه فرمت‌ها

فرمت	مزایا	معایب
woff2	فشرده‌ترین، پشتیبانی مدرن	مرورگرهای قدیمی‌تر ممکن است پشتیبانی نکنند
woff	پشتیبانی گسترده	حجم بیشتر نسبت به woff2
ttf/otf	کیفیت خوب، برای برخی نیازهای خاص	حجم بالاتر، امنیت و مجوز

مسائل امنیتی و مجوز

قبل از استفاده از هر فونتی، مجوز آن را بررسی کنید. برخی فونت‌ها نیاز به لایسنس خاص دارند و ارائه آن‌ها روی CDN یا در محیط تجاری ممکن است محدود باشد. همچنین تنظیم هدرهای CORS برای سرو کردن فونت‌ها ضروری است تا مرورگر بتواند آن‌ها را بارگذاری کند.

نکات نهایی و چک‌لیست

از woff2 استفاده کنید و woff را برای fallback نگه دارید.
font-display را برای تجربه کاربری بهتر تنظیم کنید (معمولاً swap).
برای سرعت، از preload و caching مناسب بهره ببرید.
از unicode-range و subsetting برای کاهش حجم استفاده کنید.
در صورت امکان، از فونت‌های متغیر برای کاهش درخواست‌ها و انعطاف طراحی استفاده کنید.
همیشه مجوز فونت و تنظیمات CORS را بررسی کنید.

مدیریت صحیح فونت‌ها با @font-face ترکیبی از ملاحظات طراحی و عملکرد است. با پیروی از بهترین روش‌ها می‌توانید هم تجربه بصری مطلوب و هم سرعت بارگذاری خوب را تضمین کنید.

آیا این مطلب برای شما مفید بود ؟

خیر

بله