افزودن فونت دلخواه به قالب وردپرس

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

شاید دوست داشته باشید تا فونت قالب سایت وردپرسی خود را عوض کنید یا اگر فونت زیبایی ندارید به قالب وردپرس خود فونت فارسی اضافه کنید. این کار مستلزم دانش استایل نویسی است و چندان سخت نیست.

افزودن فونت دلخواه به قالب وردپرس یکی از مهمترین نکات در امر طراحی وب است و میشه گفت به زیبایی سایت شما کمک زیادی میکند. اکثر قالب های وردپرس بصورت پیشفرض از فونت تاهما tahoma ویندوز ساخته شده است که این حالت بی روحی و تکراری به قالب می بخشد.
اما اگر شما بتوانید فونت قالب وردپرس خود را تعویض یا اضافه کنید میتونید حالت زیبایی به پوسته سایت خود ببخشید. پس با ما همراه باشید.

پیش نیاز این آموزش

برای درک بهتر این آموزش داشتن کمی دانش css کافی می باشد و در سطح بسیار مبتدی می باشد.

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

دقت کنید که قبل از هر کاری از قالب خود نسخه پشتیبان بگیرید تا در صورت وجود مشکل آن را بازگردانید.

خیلی آسونه! ابتدا فایل استایل style.css قالب خود را ویرایش کنید.
سپس کدهای زیر را به اول فایل مورد نظر اضافه کنید.
ما در این آموزش از فونت یکان استفاده کرده ایم.

@font-face {
    font-family: 'Yekan';
    src: url('fonts/BYekan.eot?#') format('eot'),  /* IE6–8 */
    url('fonts/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

خوب حال باید یک پوشه با نام fonts در پوشه قالب خود ایجاد کنید و فونت وب های زیر را درون این پوشه کپی کنید.

دانلود فونت های وب یکان

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

برای مثال میتونید فایل استایل style.css را ویرایش کنید و فونت را درون تگ body اضافه کنید بصورت زیر:

body{
font:11px/2 yekan,tahoma
}

دقت کنید 11px سایز فونت ، مقدار 2 ارتفاع فونت و yekan,tahoma فونت های فراخوانی می باشد.

حال میتوانید در هر مکانی که میخواهید فونت مورد نظر را فراخوانی کنید.

خصوصیات فونت ها رو بیشتر بشناسید :

• خاصیت font-family : این گزینه هم نام فونت رو مشخص میکنه (برای مثال font-family:yekan,tahoma;)
• خاصیت font-size : سایز فونت رو مشخص می کنه. (برای مثال font-size:11px;)
• خاصیت color : رنگ فونت را مشخص می کنه. (برای مثال color:#000;)
• خاصیت letter-spacing : فاصله کاراکترها را مشخص میکنه از سمت چپ (برای مثال letter-spacing:2;)
• خاصیت text-align : متن را ترازبندی میکنه (برای مثال text-align:right;)
• خاصیت direction : این خاصیت هم مثل text-align تراز بندی رو مشخص می کنه (برای مثال direction:rtl;)
• خاصیت text-transform : برای بزرگ و کوچک کردن حروف انگلیسی (برای مثال text-transform: capitalize;)
• خاصیت text-indent : تو رفتگی متن را مشخص می کنه (برای مثال text-indent:5px;)
• خاصیت text-shadow : متن را اگر استفاده بشه سایه دار می کنه (برای مثال text-shadow: 1px 1px 0px rgb(0, 0, 0);)
• خاصیت font-style : استایل نمایش فونت مثلا italic کمی متن رو کج می کنه (برای مثال font-style:normal;)
• خاصیت font-weight : عرض کاراکتر رو مشخص می کنه (برای مثال color:bold;)
• خاصیت line-height : این خاصیت هم ارتفاع نوشته رو تعیین میکنه (برای مثال line-height:2;)

میتونید در سایت زیر آموزش جامع CSS به زبان ساده را بخونید.

http://www.websiteha.com/page/CSS-Learning