آموزش نحوه اضافه کردن فونت دلخواه در سایت

مقدمه

اضافه کردن فونت دلخواه به وبسایت باعث جذابیت بصری و یکپارچگی طراحی می‌شود. با CSS می‌توان فونت‌های محلی یا فونت‌های وب مانند Google Fonts را بارگذاری و استفاده کرد. برای یادگیری کامل CSS و مدیریت تایپوگرافی حرفه‌ای، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی اضافه کردن فونت‌ها

فونت‌ها در CSS با استفاده از @font-face یا لینک مستقیم از سرویس‌هایی مانند Google Fonts اضافه می‌شوند. سپس با ویژگی font-family استفاده می‌شوند.

بارگذاری فونت با @font-face برای فونت‌های محلی
استفاده از لینک CDN برای فونت‌های آنلاین مانند Google Fonts
اعمال فونت با font-family روی عناصر HTML
ترکیب فونت‌های fallback برای سازگاری با مرورگرها

مثال عملی با کد

استفاده از فونت Google Fonts:

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

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

فونت محلی با @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;
}

h1 {
  font-family: "MyCustomFont", Arial, sans-serif;
}