یکی از امکاناتی که توسط css در اختیارمان قرار می گیرد امکان استفاده از فونت وب می باشد فونت وبها نسخه هایی استاندارد از فونتهای مورد استفاده در سایر برنامه ها و ویرایشگرهای متنی مانند: نرم افزارها آفیس و فتوشاپ و … می باشند که برای استفاده در صفحات وب و همچنین نمایش صحیح در مرورگرهای مختلف بهینه شده اند و معمولا حجم بسیار کمتری نسبت به نسخه خارج از وب و مخصوص سیستم عامل های کامپیوتری مانند ویندوز دارند. فونت وب معمولا با ۴ فرمت eot، woff، svg و ttf در صفحات وب بکار برده می شود در این پست قصد آموزش روش افزودن فونت دلخواه به قالب سایت با دستور استاندارد css را داریم پس همراه ما باشید.
برای استفاده از فونتهای دلخواه در کدنویسی قالب سایت ابتدا باید نسخه استاندارد آنرا در پوشه ای با نام fonts و در کنار فایل شیوه نامه style.css قالب سایت مان قرار دهیم سپس با استفاده از دستور font-face فونت را به صفحات وب می شناسانیم برای این منظور از کدهای زیر استفاده می کنیم.
@font-face {
font-family: 'yekan';
src: url('fonts/yekan.eot');
src: url('fonts/yekan.eot?#iefix') format('embedded-opentype'),
url('fonts/yekan.woff2') format('woff2'),
url('fonts/yekan.woff') format('woff'),
url('fonts/yekan.ttf') format('truetype');
font-weight: normal;
}
در کدهای Css بالا فونت یکان را با با نام yekan به قالب معرفی کردیم. چون فونت دلخواه استفاده کرده ایم نام آنرا درون عبارت ” تک کوتیشن قرار می دهیم. سپس برای استفاده در بخش مورد نظر تنها کافیست نوع فونت را توسط دستور font-family: ‘yekan’; فراخوانی کنیم.