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

دسته : آموزش رایگان CSS

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

استفاده از 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 یکی از ابزارهای قدرتمند برای افزودن فونت‌های سفارشی به وب‌سایت شما است. با استفاده از این ویژگی، می‌توانید به طراحی سایت خود ظاهری منحصر به فرد ببخشید و تجربه کاربری بهتری ایجاد کنید. با رعایت نکات بهینه‌سازی و استفاده از فرمت‌های مناسب، می‌توانید از فونت‌های سفارشی به طور کارآمد و سازگار با مرورگرهای مختلف بهره ببرید.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش ایجاد تصویر و لینک در HTML: نحوه استفاده از تگ‌های img و a

آموزش ایجاد تصویر و لینک در HTML: نحوه استفاده از تگ‌های img و a

21م مرداد 1402

مطالعه بیشتر

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

29م مهر 1403

مطالعه بیشتر

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

29م مرداد 1402

مطالعه بیشتر

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

1م آبان 1403

مطالعه بیشتر

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

5م شهریور 1402

مطالعه بیشتر

مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثال‌ها

مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثال‌ها

30م مهر 1403

مطالعه بیشتر

آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

11م آبان 1403

مطالعه بیشتر

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

9م آبان 1403

مطالعه بیشتر

آموزش ارث‌بری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپ‌ها و کلاس‌ها

آموزش ارث‌بری (Inheritance) در جاوا اسکریپت: نحوه استفاده از پروتوتایپ‌ها و کلاس‌ها

28م مهر 1403

مطالعه بیشتر

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

16م آبان 1403

مطالعه بیشتر

بررسی کتابخانه‌های محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها

بررسی کتابخانه‌های محبوب جاوا اسکریپت: آشنایی با Lodash و Moment.js - مزایا و کاربردها

4م آبان 1403

مطالعه بیشتر

آموزش اصول Web APIs و نحوه استفاده از آن‌ها در جاوا اسکریپت: راهنمای کامل با مثال‌ها

آموزش اصول Web APIs و نحوه استفاده از آن‌ها در جاوا اسکریپت: راهنمای کامل با مثال‌ها

1م آبان 1403

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد