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

مقدمه‌ای بر @font-face

استفاده از دستور @font-face به شما این امکان را می‌دهد که فونت‌های سفارشی را به وب‌سایت خود اضافه کنید. به این ترتیب، بدون نیاز به فونت‌های پیش‌فرض سیستم، می‌توانید ظاهر متن‌های خود را تغییر دهید و طراحی وب‌سایت‌تان را بهبود بخشید.

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

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

نحوه تعریف @font-face

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

نکات کلیدی

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

@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;
}
  

بررسی خط به خط کد

@font-face {
این خط بخش تعریف فونت سفارشی را شروع می‌کند.

font-family: 'MyCustomFont';
نامی برای فونت سفارشی تعیین می‌کند که بعداً از آن استفاده خواهیم کرد.

src: url('fonts/MyCustomFont.woff2') format('woff2'),
آدرس فایل فونت و فرمت آن را مشخص می‌کند. اینجا فرمت ووف2 برای عملکرد بهتر در بسیاری از مرورگرها استفاده می‌شود.

url('fonts/MyCustomFont.woff') format('woff');
فرمت ووف برای پشتیبانی از مرورگرهایی که ووف2 را پشتیبانی نمی‌کنند.

font-weight: normal;
وزن (ضخامت) فونت را عادی تنظیم می‌کند.

font-style: normal;
سبک فونت (مانند ایتالیک) را عادی تنظیم می‌کند.

}
پایان دستور @font-face.

body {
تنظیمات استایل برای تگ body.

font-family: 'MyCustomFont', Arial, sans-serif;
مشخص می‌کند که فونت بدنه سایت ابتدا باید فونت سفارشی باشد و اگر در دسترس نبود، به دنبال آرایل یا فونت‌های سیستمی برود.