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

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

1. ساختار کلی @font-face در CSS

برای تعریف یک فونت سفارشی در CSS از کد زیر استفاده می‌شود:

@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 : مسیر فایل فونت و نوع فرمت آن (WOFF2، WOFF، TTF و …).
• font-weight و font-style : تعیین وزن و استایل فونت (می‌توان مقدار bold، italic یا مقدار پیش‌فرض normal را مشخص کرد).

2. پشتیبانی از چندین فرمت فونت

برای اینکه فونت در تمامی مرورگرها به درستی نمایش داده شود، بهتر است چندین فرمت فونت را مشخص کنید:

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff'),
         url('fonts/CustomFont.ttf') format('truetype'),
         url('fonts/CustomFont.eot') format('embedded-opentype');
}

✅ WOFF و WOFF2 بهترین گزینه برای وب هستند، زیرا فشرده‌تر بوده و سریع‌تر بارگذاری می‌شوند.

3. اعمال فونت سفارشی در CSS

پس از تعریف @font-face، می‌توان فونت را در المان‌های مختلف صفحه اعمال کرد:

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

🔹 مقدار sans-serif به عنوان فونت جایگزین در صورت عدم بارگذاری فونت سفارشی استفاده می‌شود.

4. نحوه بارگذاری فونت از سرور خارجی

اگر فونت روی یک سرور خارجی قرار دارد، می‌توان از @import استفاده کرد:

@import url('https://fonts.example.com/customfont.css');

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

5. نکات بهینه‌سازی فونت سفارشی

• استفاده از WOFF2: این فرمت کم‌حجم‌تر و سریع‌تر است.
• بارگذاری تنبل (Lazy Loading): در صورت نیاز، فونت‌ها را فقط در صفحات خاص بارگذاری کنید.
• کش کردن فونت‌ها: تنظیم cache-control برای کاهش درخواست‌های مجدد فونت.

نتیجه‌گیری

ویژگی @font-face در CSS امکان استفاده از فونت‌های سفارشی را فراهم می‌کند و با رعایت اصول بهینه‌سازی، می‌توان عملکرد و نمایش مناسب در تمامی مرورگرها را تضمین کرد.