خانه » آموزش html و css » اضافه کردن فونت به سایت
10 مهر 1400

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

برای اضافه کردن فونت به سایت مراحل زیر را دنبال کنید:

۱- فونت را دانلود کنید.

یک مجموعه فونت را دانلود کنید تا بتوانید ادامه مراحل را با این فونت انجام دهید. در مقاله بهترین فونت‌های وب لیستی از فونت‌های برتر فارسی معرفی شده‌اند که البته اکثر آنها پولی هستند اما برای شروع شما می‌توانید از یک فونت رایگان مثل وزیر استفاده کنید.

۲- آپلود فونت در پروژه

فونت‌های دانلود شده‌ی خود از حالت فشرده (zip) خارج کرده و آنها را در پوشه‌ای در مسیر پروژه‌ قرار دهید. برای مثال در پوشه‌ی اصلی پروژه خود یک فولدر جدید به نام fonts‌ ایجاد کنید و تمامی فرمت‌های فونت را در آن قرار دهید.

توجه کنید که تمامی فونت‌ها به صورت مستقیم در فولدر fonts قرار بگیرند و در هیچ فولدر دیگری نباشند. برای راحتی کار ما تمامی فرمت‌های فونت وزیر را در فولدری به نام fonts قرار داده‌ایم. پس فقط کافیست این فایل را از حالت zip خارج کرده و در فولدر پروژه خود قرار دهید.

بهتر است از فرمت‌های ttf، woff، woff2 و eot استفاده کنید. چنانچه مجموعه فونت‌هایی که دارید کامل نیستند بهتر است به کمک ابزار Webfont Generator سایر فرمت‌های فونت‌ را بسازید.

۳- فراخوانی فونت در فایل CSS

خب حالا وقت آن رسیده که به فایل CSS پروژه مراجعه کنیم و فونت‌ها را به پروژه اضافه کنیم. به کمک دستور font-face@ در CSS می‌توان یک فونت به صفحه وب اضافه کرد.

@font-face {

  font-family: myFont;

  src: url(fonts/font.woff) format(‘woff’);

}

برای اضافه کردن فونت به صفحه وب کافیست از قطعه کد بالا استفاده کنیم. به کمک font-family نام فونت رو ایجاد می‌کنیم تا در طول پروژه برای استفاده از این فونت از همین نام استفاده کنیم.

۴- استفاده از فونت اضافه در صفحه وب

کد کامل اضافه کردن یک فونت به صفحه سایت:

@font-face {

 font-family: Vazir;

 font-style: normal;

 font-weight: normal;

 src: url(‘fonts/Vazir.eot’);

 src: url(‘fonts/Vazir.eot?#iefix’) format(’embedded-opentype’),

 url(‘fonts/Vazir.woff2’) format(‘woff2’),

 url(‘fonts/Vazir.woff’) format(‘woff’),

 url(‘fonts/Vazir.ttf’) format(‘truetype’);

}

@font-face {

 font-family: Vazir;

 font-style: normal;

 font-weight: bold;

 src: url(‘fonts/Vazir-Bold.eot’);

 src: url(‘fonts/Vazir-Bold.eot?#iefix’) format(’embedded-opentype’),

 url(‘fonts/Vazir-Bold.woff2’) format(‘woff2’),

 url(‘fonts/Vazir-Bold.woff’) format(‘woff’),

 url(‘fonts/Vazir-Bold.ttf’) format(‘truetype’);

}

body{

font-family: ‘Vazir’, Arial, sans-serif;

font-weight:normal;

}

حالا فونت وزیری که قرار داده بودیم را به این طریق به پروژه اضافه می‌کنیم. خروجی این کد تصویر زیر است. برای تمرین بیشتر شما وزن سبک این فونت که به نام light مشخص شده را به پروژه خود اضافه کنید.

در ضمن برای آموزش بیشتر کدنویسی می توانید در دوره آموزش html و css هم میهن ثبت نام کنید.

شهریار سلطانی

عضو هیات علمی در رشته مهندسی نرم افزار کانپیوتر و مدرس برنامه نویسی وب

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

preloader