در ادامه دوره رایگان آموزش 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 برای شما کاربردی بوده باشد و توانسته باشید فونتهای دلخواه خود را به سایت خود اضافه کنید، هر گونه مشکل و سوالی در رابطه با این جلسه دارید، در بخش دیدگاههای همین جلسه مطرح کنید تا پاسخ سوالات شما را در کمترین زمان بدهیم. با تشکر از همراهی شما.
سلام وقت شما بخیر
جناب تگ head در قالب فلت سام کجاست ؟ در کدام گزینه اس تگ head اصلیه سایت
ممنون میشم راهنماییم کنید
درود، دقت کنید که در این رابطه باید تسلط کافی به برنامهنویسی داشته باشید تا بتوانید موارد را داخل قالب وردپرس انجام دهید، برای انجام این کار راههای بهتری نیز وجود دارد.
سلام چرا برای فرمت eot از src جدا استفاده شده است؟نمی شد مثل بقیه همه رو تحت یک src نوشت؟
سلام، فرمت های مختلف برای پشتیبانی از فونت در مرورگر های مختلف است، نحوه نوشتن کدها در برخی از مرورگر ها کمی متفاوت است.
ارادت و وقت به خیر
تمام مراحلی که شما فرموده بودین رو انجام دادم اما فونتم تغییر نکرد. آیا میتونین بگین مشکل از کجاست؟
دقت کنید که اگر موارد را به درستی انجام دهید، صد درصد کار خواهد کرد! مشکل از کدهای شماست.
سلام ممنون از اموزشهای خوبتون . یک مشکل دارم این قسمت style.css درقسمت برنامه من فعال نیست چه جوری فعالش کنم استاد
سلام، منظورتون چیه که فعال نیست؟ سوالتون رو واضح و با جزئیات بپرسید تا بتوانیم بهتر کمک تان کنیم.
اگر منظورتان این است که شما فایل style.css را ندارید، طبق آموزش باید خودتان آن را بسازید، اگر نمیدانید چگونه باید جلسات قبلی را با دقت مشاهده کنید.
بسیار ممنون از راهنمایی خوب شما
ممنون از همراهی شما.
سلام یه سوال داشتم اگه داخل یه سند دوتا تگ body استفاده کنیم اشتباهه؟
باسلام، بله در هر سند html بهتر است که فقط یک تگ body وجود داشته باشد.