استفاده از فونت اختصاصی در CSS
استفاده از فونت‌های اختصاصی در طراحی وب می‌تواند به جذابیت بصری و حرفه‌ای‌تر شدن سایت شما کمک کند. در این مقاله، با نحوه استفاده از فونت‌های اختصاصی در CSS آشنا خواهیم شد. این مقاله برای توسعه‌دهندگان وب با سطح پیشرفته نوشته شده است و مثال‌های کاربردی را نیز شامل می‌شود.
مراحل استفاده از فونت اختصاصی
۱. دانلود و آماده‌سازی فونت
اولین مرحله، تهیه فایل فونت مورد نظر است. برای این منظور، می‌توانید از سایت‌هایی مانند Google Fonts، Font Squirrel یا Adobe Fonts استفاده کنید. فرض کنیم که شما یک فونت اختصاصی به نام "MyCustomFont" دارید.
۲. تبدیل فونت به فرمت‌های مختلف
برای اینکه فونت شما در تمامی مرورگرها به درستی نمایش داده شود، نیاز است تا فونت را به فرمت‌های مختلف تبدیل کنید. فرمت‌های معمول شامل TTF، OTF، WOFF، WOFF2 و EOT هستند. سایت‌هایی مانند Font Squirrel امکان تبدیل فونت به فرمت‌های مختلف را فراهم می‌کنند.
۳. افزودن فونت به پروژه
پس از تهیه و تبدیل فونت‌ها، باید آنها را در پروژه خود اضافه کنید. برای این کار، معمولاً فونت‌ها را در پوشه‌ای مانند fonts در دایرکتوری پروژه قرار می‌دهیم.
ساختار پوشه‌ها
project-directory/
│
├── index.html
├── styles.css
├── fonts/
│ ├── MyCustomFont.woff2
│ ├── MyCustomFont.woff
│ └── MyCustomFont.ttf
└── images/
- project-directory/ : پوشه اصلی پروژه.
- index.html : فایل HTML اصلی.
- styles.css : فایل CSS اصلی که استایل‌ها را شامل می‌شود.
- fonts/ : پوشه‌ای که فونت‌های اختصاصی شما در آن قرار می‌گیرند.
- images/ : پوشه‌ای برای تصاویر (در این مثال استفاده نشده، اما در پروژه‌های واقعی ممکن است نیاز داشته باشید).
۴. تعریف فونت در CSS
حالا نوبت به تعریف فونت در فایل CSS می‌رسد. از قاعده @font-face برای این منظور استفاده می‌کنیم:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff'),
url('fonts/MyCustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
در اینجا، font-family نام فونتی است که به آن اختصاص داده‌ایم و src مسیر فایل‌های فونت در پروژه را مشخص می‌کند.
۵. استفاده از فونت در عناصر HTML
پس از تعریف فونت، می‌توانیم از آن در استایل‌دهی به عناصر HTML استفاده کنیم. برای این کار، کافی است نام فونت را در خاصیت font-family عناصر مورد نظر قرار دهیم:
body {
font-family: 'MyCustomFont', sans-serif;
}
در مثال بالا، فونت MyCustomFont به عنوان فونت اصلی برای بدنه سایت استفاده شده است. در صورت عدم دسترسی به این فونت، فونت پیش‌فرض sans-serif به کار خواهد رفت.
مثال کاربردی
بیایید یک مثال عملی با استفاده از فونت اختصاصی ایجاد کنیم. فرض کنیم که ما یک صفحه HTML ساده داریم که می‌خواهیم فونت اختصاصی را به آن اضافه کنیم.
فایل index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with custom font.</p>
</body>
</html>
فایل styles.css
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff'),
url('fonts/MyCustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
p {
font-size: 1.2em;
}- پوشه fonts/: فونت‌های شما باید در این پوشه قرار بگیرند و مسیرهای صحیح آنها در فایل CSS مشخص شود.
- لینک‌دهی به styles.css: در فایل HTML، لینک به فایل CSS به درستی انجام شده است تا استایل‌ها اعمال شوند.
نکات مهم
- پشتیبانی از مرورگرها: حتماً مطمئن شوید که از تمامی فرمت‌های لازم برای پشتیبانی در مرورگرهای مختلف استفاده کرده‌اید.
- بهینه‌سازی فونت‌ها: از ابزارهایی مانند Font Squirrel برای بهینه‌سازی فایل‌های فونت استفاده کنید تا زمان بارگذاری صفحات کاهش یابد.
