مدرس دوره

نبی عبدی

زمان ویدیو

18:09 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

اضافه کردن فونت فارسی در CSS و HTML

آخرین بروزرسانی در تاریخ : 27, مرداد, 1401

در ادامه دوره رایگان آموزش HTML و CSS، با آموزش اضافه کردن فونت فارسی در CSS و HTML در خدمت شما همراهان گرامی آکادمی وبکیما هستیم، همان‌طور که می‌دانید تا زمانی که فونت‌های فارسی را به سند HTML و CSS و در واقع به وب‌سایت خودمان اضافه نکنیم، سایت ما از نظر ظاهری بسیار زشت خواهد بود، به همین دلیل تصمیم گرفتیم که آموزش فونت فارسی در css و افزودن فونت فارسی به سند HTML را در همین جلسات ابتدایی آموزش دهیم تا شما عزیزان بتوانید به سادگی هر نوع فونت دلخواه را به فایل html خود اضافه کنید.

فونت فارسی در css

باید دقت کنید که افزودن فونت به سند HTML توسط کدهای CSS انجام میشود، مراحل کار به این صورت است که ابتدا باید فونت ها را توسط font-face به سند CSS خود اضافه کنید و در مراحل بعدی از آن استفاده کنید.

کدهای اضافه کردن فونت فارسی به CSS و HTML

در این بخش می‌توانید کدهای فونت فارسی در CSS و فونت فارسی در html را مشاهده کنید:

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Vazir-Thin.eot");
  src: url("fonts/Vazir-Thin.woff") format("woff"),
    url("fonts/Vazir-Thin.ttf") format("ttf"),
    url("fonts/Vazir-Thin.woff2") format("woff2");
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Vazir-Light.eot");
  src: url("fonts/Vazir-Light.woff") format("woff"),
    url("fonts/Vazir-Light.ttf") format("ttf"),
    url("fonts/Vazir-Light.woff2") format("woff2");
}

@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Vazir-Regular.eot");
  src: url("fonts/Vazir-Regular.woff") format("woff"),
    url("fonts/Vazir-Regular.ttf") format("ttf"),
    url("fonts/Vazir-Regular.woff2") format("woff2");
}
@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 950;
  src: url("fonts/Vazir-Black.eot");
  src: url("fonts/Vazir-Black.woff") format("woff"),
    url("fonts/Vazir-Black.ttf") format("ttf"),
    url("fonts/Vazir-Black.woff2") format("woff2");
}

body {
  font-family: vazir;
  direction: rtl;
}

دانلود فونت وزیر

برای اینکه فونت‌هایی که در این جلسه از آن استفاده کردیم را دانلود کنید و در نهایت بتوانیم فونت فارسی در html و فونت فارسی در CSS را داشته باشید، به کانال تلگرام آکادمی وبکیما مراجعه کنید و با جستجوی عبارت فونت در کانال، به ده‌ها فونت مختلف دسترسی خواهید داشت و هر کدام را بنا به نیاز خودتان دانلود کنید و در وب‌سایت‌های خود استفاده کنید.

جمع بندی

در انتها امیدواریم که جلسه آموزش افزودن فونت فارسی در CSS و اضافه کردن فونت به html برای شما کاربردی بوده باشد و توانسته باشید فونت‌های دلخواه خود را به سایت خود اضافه کنید، هر گونه مشکل و سوالی در رابطه با این جلسه دارید، در بخش دیدگاه‌های همین جلسه مطرح کنید تا پاسخ سوالات شما را در کمترین زمان بدهیم. با تشکر از همراهی شما.

5/5 - (2 امتیاز)

نظرات در “اضافه کردن فونت فارسی در CSS و HTML

  1. ارام زرینه میگوید:

    سلام ممنون از اموزشهای خوبتون . یک مشکل دارم این قسمت style.css درقسمت برنامه من فعال نیست چه جوری فعالش کنم استاد

    • پشتیبانی میگوید:

      سلام، منظورتون چیه که فعال نیست؟ سوال‌تون رو واضح و با جزئیات بپرسید تا بتوانیم بهتر کمک تان کنیم.
      اگر منظورتان این است که شما فایل style.css را ندارید، طبق آموزش باید خودتان آن را بسازید، اگر نمی‌دانید چگونه باید جلسات قبلی را با دقت مشاهده کنید.

  2. محمود عظیمی میگوید:

    بسیار ممنون از راهنمایی خوب شما

    • پشتیبانی میگوید:

      ممنون از همراهی شما.

  3. سپهر میگوید:

    سلام یه سوال داشتم اگه داخل یه سند دوتا تگ body استفاده کنیم اشتباهه؟

    • پشتیبانی میگوید:

      باسلام، بله در هر سند html بهتر است که فقط یک تگ body وجود داشته باشد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بیش از 60 درصد تخفیف روی تمامی دوره‌ها، مهلت محدود ...تخفیف‌تو بگیر!
+