برای استعلام یا ارسال سفارش اینجا کلیک کنید.

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

How-Add-Font-Web افزودن فونت دلخواه به قالب وردپرس

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

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

افزودن فونت دلخواه به قالب وردپرس یکی از مهمترین نکات در امر طراحی وب است و میشه گفت به زیبایی سایت شما کمک زیادی میکند. اکثر قالب های وردپرس بصورت پیشفرض از فونت تاهما 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

هاست و دامنه ندارید!؟ سفارش دهید
من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.
در کانال ما عضو شوید و از آخرین اخبار ، محصولات و تخفیف با خبر شوید... کانال تلگرام وبیت

محصولات پیشنهادی به شما

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده اید و با آن موافق هستید.

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

آخرین نمونه کار ها مشاهده همه

آخرین طرح های اختصاصی اجرا شده
وبیت