learndl learndl triboon

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

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

به این مطلب امتیاز دهید

امتیاز کلی : 2.5 / 5. تعداد آرا : 2

اولین نفر باید که به این مطلب امتیاز میدهید

وبیت این پست توسط نگارش شده است.

اسم من محمد پورداداش هست و متولد سال 1367 در خدمت شما هستیم . تخصص من طراحی گرافیک و کدنویسی وب است و سعی خواهم کرد بهترین خدمات را به شما وبمستران و گرافیست های عزیز ارائه کنم. به ترس هات غلبه کن تا در زندگی همیشه پیروز باشی.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 0 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
هنوز نظری ثبت نشده است ، اولین نفری باشید که نظر میدهید !
همکاران وبیت