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

آخرین بروزرسانی در تاریخ : 15, تیر, 1402

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

راهنمای مطالعه:

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

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

نحوه استفاده از font-face

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

برای استفاده از font-face، ابتدا باید فایل فونت را در پروژه خود قرار داده و به آن ارجاع دهید. معمولاً فایل‌های فونت در فرمت‌هایی مانند TTF، OTF، WOFF یا WOFF2 موجود هستند. سپس می‌توانید در CSS خود، با استفاده از خاصیت font-face، این فونت را تعریف کنید و برای المان‌های مختلف وبسایت‌تان از آن استفاده کنید.

نحوه استفاده از font-face در CSS به صورت زیر است:

@font-face {
  font-family: 'نام-فونت';
  src: url('مسیر-فایل-فونت.woff2') format('woff2'),
       url('مسیر-فایل-فونت.woff') format('woff');
  /* سایر خاصیت‌های مورد نیاز مانند font-weight و font-style */
}

.selector {
  font-family: 'نام-فونت', سایر-فونت‌ها, sans-serif;
}

در کد بالا، ابتدا با استفاده از @font-face، فونت مورد نظر را تعریف می‌کنیم. در خاصیت font-family، نام دلخواهی برای فونت مشخص می‌کنیم. سپس با استفاده از خاصیت src، مسیر فایل فونت را مشخص می‌کنیم و فرمت‌های قابل قبول را نیز تعیین می‌کنیم. در مثال بالا، دو فرمت WOFF2 و WOFF برای فایل فونت در نظر گرفته شده است. شما می‌توانید فرمت‌های دیگری را نیز استفاده کنید، اما برای پشتیبانی بهتر برروی مرورگرهای مختلف، توصیه می‌شود حداقل دو فرمت WOFF2 و WOFF را در نظر بگیرید.

در بخش .selector، با استفاده از خاصیت font-family، نام فونت را مشخص می‌کنیم و آن را به المان‌های مورد نظر اعمال می‌کنیم. در این قسمت، شما می‌توانید فونت‌های دیگری را هم به صورت پشت سر هم مشخص کنید. در صورتی که فونت اصلی در دسترس نباشد، مرورگر به ترتیب فونت‌های بعدی را امتحان می‌کند و در صورت عدم وجود آن‌ها، به فونت پیش‌فرض خود می‌پردازد که در مثال بالا sans-serif است.

با استفاده از font-face و تعریف فونت‌های سفارشی، می‌توانید ظاهر وبسایت خود را با فونت‌های منحصر به فرد و زیبا ترکیب کنید و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم کنید.

کدهای اضافه کردن فونت فارسی به 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 برای شما کاربردی بوده باشد و توانسته باشید فونت‌های دلخواه خود را به سایت خود اضافه کنید، هر گونه مشکل و سوالی در رابطه با این جلسه دارید، در بخش دیدگاه‌های همین جلسه مطرح کنید تا پاسخ سوالات شما را در کمترین زمان بدهیم. با تشکر از همراهی شما.

4.2/5 - (10 امتیاز)

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

پوریا میگوید:
عالی بود ممنون

در
پاسخ
امید میگوید:
ممنون از شما مفید بود

در
پاسخ
صبا میگوید:
سلام من اینکارهایی که گفتید رو انجام دادم حتی کد هایی که گذاشتین سایت رو کپی کردم اما نشد چیکار باید انجام بدم؟

در
پاسخ
- پشتیبانی میگوید:
  سلام، اطمینان حاصل کنید که مسیر فایل CSS شما به درستی تنظیم شده و فایل فونت به درستی در دسترس است. همچنین مطمئن شوید که نام فایل‌ها و مسیرها در کد CSS و HTML شما مطابقت دارند.
  
  در
  پاسخ
zahra میگوید:
سلام وقت شما بخیر
جناب تگ head در قالب فلت سام کجاست ؟ در کدام گزینه اس تگ head اصلیه سایت
ممنون میشم راهنماییم کنید

در
پاسخ
- پشتیبانی میگوید:
  درود، دقت کنید که در این رابطه باید تسلط کافی به برنامه‌نویسی داشته باشید تا بتوانید موارد را داخل قالب وردپرس انجام دهید، برای انجام این کار راه‌های بهتری نیز وجود دارد.
  
  در
  پاسخ
الیاس میگوید:
سلام چرا برای فرمت eot از src جدا استفاده شده است؟نمی شد مثل بقیه همه رو تحت یک src نوشت؟

در
پاسخ
- پشتیبانی میگوید:
  سلام، فرمت های مختلف برای پشتیبانی از فونت در مرورگر های مختلف است، نحوه نوشتن کدها در برخی از مرورگر ها کمی متفاوت است.
  
  در
  پاسخ
امین میگوید:
ارادت و وقت به خیر
تمام مراحلی که شما فرموده بودین رو انجام دادم اما فونتم تغییر نکرد. آیا میتونین بگین مشکل از کجاست؟

در
پاسخ
- پشتیبانی میگوید:
  دقت کنید که اگر موارد را به درستی انجام دهید، صد درصد کار خواهد کرد! مشکل از کدهای شماست.
  
  در
  پاسخ
ارام زرینه میگوید:
سلام ممنون از اموزشهای خوبتون . یک مشکل دارم این قسمت style.css درقسمت برنامه من فعال نیست چه جوری فعالش کنم استاد

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

در
پاسخ
- پشتیبانی میگوید:
  ممنون از همراهی شما.
  
  در
  پاسخ
سپهر میگوید:
سلام یه سوال داشتم اگه داخل یه سند دوتا تگ body استفاده کنیم اشتباهه؟

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

زبان برنامه نویسی html چیست و چه کاربردی دارد؟

CSS چیست و چه کاربردی دارد؟

بهترین ویرایشگر کد برای HTML و CSS کدام است؟

آموزش ساخت فایل html در VSCode (سند خام html)

مفاهیم پایه زبان HTML | آشنایی با تگ‌ ها و صفت ها

آموزش 3 روش افزودن کدهای CSS به HTML

آموزش حل مشکل نوشتن فارسی در HTML و CSS