استفاده از font face در CSS برای اضافه کردن فونت‌های سفارشی: راهنمای کامل

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

مفهوم @font-face و کاربرد آن در CSS

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

ساختار کلی @font-face به صورت زیر است:

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.woff2') format('woff2'),
       url('fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

در اینجا:

• font-family نامی دلخواه برای فونت تعیین می‌کند که می‌توانید در استایل‌های CSS از آن استفاده کنید.

• src مسیر فایل فونت را مشخص می‌کند که می‌تواند محلی یا از طریق URL باشد.

• font-weight و font-style ویژگی‌هایی هستند که نوع وزن و استایل فونت را تعیین می‌کنند.

فرمت‌های رایج فونت‌ها برای وب

برای استفاده از فونت‌های سفارشی، باید به چندین فرمت مختلف فونت توجه کنید تا مرورگرهای مختلف به درستی آن‌ها را شناسایی کنند. برخی از فرمت‌های رایج عبارت‌اند از:

• WOFF و WOFF2: این فرمت‌ها بهینه‌ترین فرمت‌ها برای استفاده در وب هستند و توسط اکثر مرورگرها پشتیبانی می‌شوند.

• TTF (TrueType Font): این فرمت توسط بسیاری از مرورگرها پشتیبانی می‌شود اما نسبت به WOFF و WOFF2 حجم بیشتری دارد.

• EOT (Embedded OpenType): این فرمت توسط اینترنت اکسپلورر پشتیبانی می‌شود و در پروژه‌های مدرن کمتر استفاده می‌شود.

• SVG: این فرمت برای فونت‌های قدیمی‌تر و مرورگرهایی که SVG را پشتیبانی می‌کنند، به کار می‌رود و معمولاً برای آیکون‌ها استفاده می‌شود.

مثال کاربردی از @font-face برای بارگذاری فونت‌های سفارشی

در اینجا نمونه‌ای از تعریف @font-face برای فونت سفارشی و استفاده از آن در عناصر مختلف ارائه شده است:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

در اینجا:

• MyCustomFont به عنوان فونت پیش‌فرض برای body تعریف شده است و اگر به هر دلیلی این فونت بارگذاری نشود، فونت‌های Arial و sans-serif به عنوان جایگزین استفاده می‌شوند.

تعریف چندین وزن و استایل برای یک فونت

اگر یک فونت سفارشی شامل وزن‌ها و استایل‌های مختلف مانند Bold یا Italic باشد، می‌توانید از چندین @font-face برای تعریف هر یک از این استایل‌ها استفاده کنید.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

در اینجا:

• وزن و استایل‌های مختلف (Bold و Italic) برای MyCustomFont تعریف شده‌اند و در صورت نیاز می‌توانید در CSS از آن‌ها استفاده کنید.

نحوه استفاده از فونت سفارشی در عناصر مختلف

پس از تعریف فونت در @font-face، می‌توانید آن را به سادگی در CSS به عنوان مقدار font-family به کار ببرید.

h1 {
  font-family: 'MyCustomFont', sans-serif;
}

p {
  font-family: 'MyCustomFont', Arial, sans-serif;
  font-weight: bold;
}

در اینجا:

• MyCustomFont به عنوان فونت سفارشی برای عنوان h1 و پاراگراف p استفاده می‌شود.

نکات و بهترین شیوه‌ها برای استفاده از @font-face در CSS

بهینه‌سازی و کاهش حجم فایل‌های فونت

• از فرمت‌های WOFF2 و WOFF به دلیل بهینه‌بودن آن‌ها برای وب استفاده کنید.

• فایل‌های فونت را فشرده‌سازی کنید و مطمئن شوید که فقط وزن‌ها و استایل‌های مورد نیاز خود را بارگذاری می‌کنید.

استفاده از فرمت‌های جایگزین برای مرورگرهای قدیمی

برای اطمینان از سازگاری با مرورگرهای قدیمی‌تر، می‌توانید فرمت‌های EOT و SVG را نیز اضافه کنید:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.eot'); /* برای IE */
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype'),
       url('fonts/MyCustomFont.svg#MyCustomFont') format('svg');
}

استفاده از فونت‌های fallback

همیشه یک فونت جایگزین (مانند sans-serif یا Arial) تعریف کنید تا در صورتی که فونت سفارشی به هر دلیلی بارگذاری نشد، متن همچنان به خوبی نمایش داده شود.

body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

استفاده از lazy loading برای فونت‌ها

برای بهبود زمان بارگذاری صفحه، از تکنیک‌های lazy loading یا تاخیر در بارگذاری فونت‌ها استفاده کنید. برخی ابزارهای فونت مانند Google Fonts این امکان را فراهم می‌کنند.

نتیجه‌گیری

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