روش افزودن فونت به سایت

ممکن است در بسیاری از سایت ها دیده باشید ک مطالب خود را با فونت های زیبایی نوشته اند ، فونت هایی که شباهتی به فونت های رایج موجود در وب ندارند

در این آموزش روش افزودن فونت به قالب های سایتتان را آموزش خواهیم داد ولی لازم است قبل از آموزش نکته ی مهمی را خاطر نشان کنیم که افزودن فونت به قالب مطمئنا حجم قالب شما را بالا خواهد برد و صد البته در بارگذاری صفحات شما تاثیر خواهد گذاشت.

روش افزودن فونت به سایت

ابتدا فونت مورد نظر خود را از این سایت دانلود کنید

برای افزودن فونت به وبگاه خود باید فونت شما با چهار فرمت مختلف باشد EOT و OTF و WOFF و SVG لذا پس از دریافت نسخه ی TTF فونت از ادرس بالا بایستی این فرمت را به چهار فرمت ذکر شده تبدیل کنید، برای تبدیل فونت ها نرم افزار خاصی موجود نمیباشد ولی سایت های متعددی وجود دارند که عمل تبدیل قالب را انجام می دهند

برای تبدیل پسوند TTF به فرمت EOT بهتر است از این سایت استفاده کنید و برای سه پسوند دیگر نیز به این سایت مراجعه کنید

حال ما فونت TTF و چهار فونت با فرمت های مختلف داریم

کد زیر را در پوشه ی استایل قالب خود قرار دهید و به جای عبارت fontname در کد زیر نام فونت خود را اضافه کنید البته باید ادرس فونت های خود را نیز به درستی وارد کنید برای مثال اگر فونت های شما درون پوشه ای قرار دارد بایستی ادرس دقیق فونت را در قسمت url وارد کنید

@font-face {
font-family: 'fontname';
src: url('fontname.eot'); /* IE9 Compat Modes */
src: url('fontname.eot?#') format('eot'), /* IE6–۸ */
url('fontname.ttf') format('truetype'), /* Saf3—۵, Chrome4+, FF3.5, Opera 10+ */
url('fontname.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('fontname.otf') format('opentype'),
url('fontname.svg') format('svg');
font-variant: normal;
font-weight: normal;
font-style: normal;
}

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

font-family: fontname;