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

فونت‌های وب به شما این امکان رو میدن که به جای فونت‌های پیش‌فرض سیستم، از فونت‌های خاص و زیبا توی سایتتون استفاده کنید.

🔹 ۱. استفاده از فونت‌های پیش‌فرض سیستم

در CSS میشه از فونت‌های معمولی مثل:

p {
  font-family: Arial, Helvetica, sans-serif;
}

📌 این فونت‌ها روی همه سیستم‌ها وجود دارن.

🔹 ۲. استفاده از Web Safe Fonts

فونت‌هایی هستن که تقریباً روی همه دستگاه‌ها نصب هستن:

  • Arial

  • Verdana

  • Times New Roman

  • Georgia

  • Courier New

مثال:

body {
  font-family: "Times New Roman", Times, serif;
}

🔹 ۳. استفاده از Google Fonts (رایج‌ترین روش)

۱. برو به سایت Google Fonts
۲. فونت مورد نظر رو انتخاب کن (مثلاً Roboto)
۳. کدی که گوگل میده رو توی <head> قرار بده:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

۴. حالا در CSS:

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

🔹 ۴. استفاده از @font-face (فونت سفارشی)

اگر بخوای فونت دلخواه خودت (مثلاً فارسی) رو اضافه کنی:

@font-face {
  font-family: "MyFont";
  src: url("fonts/MyFont.woff2") format("woff2"),
       url("fonts/MyFont.woff") format("woff");
}

body {
  font-family: "MyFont", sans-serif;
}

📌 این روش برای فونت‌های فارسی مثل ایران‌سنس، وزیر، شبنم خیلی کاربردیه.

🔹 ۵. استفاده از چند وزن فونت

با Google Fonts می‌تونی وزن‌های مختلف رو لود کنی:

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Bold */
}
p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400; /* Regular */
}

🔹 ۶. ترکیب چند فونت در سایت

h1 {
  font-family: 'Poppins', sans-serif;
}
p {
  font-family: 'Roboto', sans-serif;
}

✅ نتیجه:
با Web Fonts می‌تونی طراحی سایتت رو جذاب‌تر و حرفه‌ای‌تر کنی و نوشته‌هات دقیقاً همونطوری که می‌خوای روی همه دستگاه‌ها نمایش داده بشه.