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

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

+ بهمراه ۴۰ فونت فارسی اصلاح شده

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

قدم اول :

• آپلود فونت ها :

برای این کار شما نیاز به آپلود فونت ها بر روی هاست خود دارید. فونت ها در چهار فرمت svg ,ttf , woff , eot می باشند. فونت های ttf همان فونت های کامپیوتر خود می باشد و سه فونت دیگر هم فونت های وب هستند ، بنابراین فونت ها را در یک پوشه دلخواه آپلود کنید.

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

قدم دوم :

• آموزش نوشتن کد css :

@font-face {
 font-family: 'Yekan';
 src: url('Fonts/Yekan.eot');
 src: local('BYekan'), url('Fonts/Yekan.woff') format('woff'), url('Fonts/Yekan.ttf') format('truetype'), url('Fonts/Yekan.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

 کد فوق برای فونت یکان Yekan است و شما می توانید اسم هر فونت دیگری که دوست داشتید اضافه کنید. همچنین محل فونت ها برای این کد پوشه Fonts می باشد شما آدرس کامل فونت خود را وارد کنید.

1. فراخوانی کد ها :

در فایل استایل وب خود محلی که می خواهید فونت یکان نمایش داده شود شبیه استایل زیر کد بنویسید. قسمت font : Yekan خیلی مهم است و نام فوق باید بصورت صحیح وارد شود (حساس به حروف بزرگ یا کوچک نیست).

.posts .title h1 {
font: 20px/15px Yekan,Tahoma;
letter-spacing:1px;
margin: 10px 0px;
}

خوب حال برای فراخونی در صفحه HTML وب خود به صورت زیر عمل کنید. (کد فوق عنوان مطلب شما در وردپرس می باشد.)

<div class="posts">
<div class="title">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
</div>
<?php the_content(''); ?>
</div>

موفق باشید.