فونت‌های WOFF در CSS

آشنایی با فرمت WOFF

هرچقدر که طراحی وب بهتر و جذاب‌تر باشه، تجربه کاربری بهتری هم رقم می‌زنه. یکی از عواملی که به زیبایی طراحی کمک می‌کنه، استفاده از فونت‌های متنوع و مناسب به کمک CSS هست. خب چه بهتر که استفاده از فونت‌ها هم بهینه و استاندارد باشه. اینجاست که فرمت WOFF وارد صحنه میشه. فرمت Web Open Font Format یا همون WOFF در واقع یک استاندارد برای استفاده از فونت‌های وب به شکلی بهینه و کارآمده که توسط W3C معرفی شده.

یک تفاوت عمده‌ای که WOFF با دیگر فرمت‌های فونت داره، فشرده‌سازی اونه که باعث میشه فونت‌ها سریع‌تر لود بشن و در نتیجه سرعت بارگذاری صفحات افزایش پیدا کنه؛ این شامل فونت‌های TrueType (.ttf) و OpenType (.otf) هست که به فرمت WOFF تبدیل شده‌اند.

چرا از WOFF استفاده کنیم؟

استفاده از فرمت WOFF دلایل و مزایای مختلفی داره. شاید مهم‌ترینش پشتیبانی بسیار خوب مرورگرها از این فرمت باشه؛ اکثر مرورگرها از جمله Chrome، Firefox، Safari و Edge از این فرمت پشتیبانی می‌کنند. افزون بر این، به دلیل فشرده سازی، زمان بارگذاری فونت کمتر می‌شود که این مسئله به‌ویژه در دستگاه‌های همراه و با اینترنت کند اهمیت دارد.

نحوه استفاده از WOFF در CSS

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

@font-face {
  font-family: 'MyWebFont';
  src: url('my-webfont.woff') format('woff');
}
body {
  font-family: 'MyWebFont', sans-serif;
}

توضیح کد بالا

@font-face
این قانون CSS برای تعریف یک فونت سفارشی استفاده می‌شود که بعداً می‌تواند در عناصر دیگر استفاده شود.

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

src: url('my-webfont.woff') format('woff');
آدرس فایل WOFF که می‌خواهیم لود کنیم را مشخص می‌کند و نوع فرمت را معلوم می‏کند که "woff" می‌باشد.

body {
font-family: 'MyWebFont', sans-serif;
}
در این جا به عناصر body می‌گوییم که از فونت تعریف شده به همراه یک فونت ذخیره برای موارد اضطراری استفاده کنند.