سایت آموزشی

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

امروز سه شنبه ۵ بهمن ۱۳۹۵ به همراه آموز خوش آمدید.

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

Add Custom Fonts To WordPress

دانلود ۶۳ فونت وب برای وردپرس در ادامه ..

همراه آموز : در ادامه ی این مطلب با ما همراه باشید با آموزش تصویری اضافه کردن فونت دلخواه به قالب وردپرس + دانلود ۶۳ فونت مخصوص وب

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

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

ما میخواهیم یاد بگیریم که چگونه قسمتی یا کل متن های قالب وردپرسی مون به فونت دلخواه خودمون تغییر بدیم،یعنی ما میتونیم هر بخش از سایتمون رو یک فونت دلخواه براش درنظر بگیریم،برای مثال منوی اصلی سایت با یک فونت،بدنه اصلی سایت با یک فونت ،بخش نظرات یک فونت،ستون ها با یک فونت جداگانه ،ولی خب درسته اینکار باعث میشه وبسایتمون زیباتر شه ولی اینم باید در نظر بگیریم که همین کار باعث کاهش سرعت بارگزاری سایتمون به طرز عجیبی میشه .

دلیلش هم اینه که وقتی ما از چندین فونت ،برای مثال ۵ فونت در وبسایتمون استفاده کنیم تعداد درخواست ها برای بازیابی فونت ها و نمایش آنها در وبسایت بالا میره در نتیجه موجب کاهش سرعت بارگزاری سایتمون میشه.پس همراه آموز پیشنهاد میکنه حداقل از یک فونت تا دو فونت در وبسایتتون استفاده نمایید که بهترین حالتش همون یک فونت است.

همراه آموز برای شما ۶۳ فونت با پسوندهای (eot,woff,ttf) براتون آماده کرده که به راحتی میتوانید در وبسایتتون از این فونت ها استفاده نمایید.

 

بهتر است اول از هرچیزی کمی با فونت های وب یا Web Fonts آشنا شوید :

فونت های وب همانطور که از اسمش هم پیداست فونت های مخصوص وب می باشند که باید در اکثر مرورگرها این فونت ها پشتیبانی شوند تا اگر مخاطب سایت ما با مرورگری همانند Internet Explorer به وبسایت ما آمد بتواند نوشته های سایت ما را با همان فونتی که ما میخواهیم مشاهده نماید. پس ما نیاز داریم از فونت هایی استفاده کنیم که اکثر مرورگرها آن فونت را پشتیبانی کند.

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

در تصویر زیر شما میتوانید مشاهده نمایید که چه مرورگرهایی چه فرمت هایی را پشتیبانی میکنند.

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

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

همانطور که در جدول هم مشاهده مینمایید فرمت های (TTF,WOFF,EOT) فرمت هایی هستند که در تمامی مرورگرها نمایش داده می شوند.

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

چگونه میتوانم فونت مورد علاقه ام را به فرمت های بالا تبدیل کنم؟

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

از طریق آموزش بالا شما میتوانید هرچند فونت که بخواهید به فرمت های مختلف تبدیل نمایید.

خب بهتره زیاد از آموزش اصلی مون فاصله نگیریم ولی لازم دونستم موارد بالارو توضیح بدم تا هیچ مشکلی و کم کسری در آموزش وجود نداشته باشد. و در صورتی که مشکلی یا کم کسری و همچنین انتقادی در نحوه ی آموزش مشاهده مینمایید لطفا حتما در قسمت نظرات با من در میون بگذارید. (نظرات شما برای من مهم است)

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

بطور کلی برای اضافه کردن / افزودن فونت های دلخواه به قالب وردپرس باید کارهای زیر رو انجام بدیم.

  1. فونت هایی که تبدیل کردیم یا از قبل داشته ایم رو در یک پوشه همانند (Fonts) در قالب سایتمون قرار بدیم.
  2. یک تکه کد css که در ادامه مشاهده خواهید نمود را باید در فایل شیوه نامه یا style.css سایتتون قرار بدید.
  3. در هرکجای وبسایتتون که میخواهید کافیست یک دستور بنویسید و از فونت مورد نظرتون استفاده نمایید.

چگونه فونت هایی که تبدیل کردیم یا از قبل داشته ایم رو در یک پوشه همانند (Fonts) در قالب سایتمون قرار بدیم ؟

شما باید از طریق کنترل پانل / پنل هاستتون فونت هارو به قالب سایتتون اضافه نمایید. در هاست به wp-content بروید سپس themes و وارد پوشه ی قالب سایتتون شوید سپس میتوانید فونت های مورد نظرتون رو مستقیما توی پوشه ی قالب سایتتون قرار بدهید یا یک پوشه (Fonts) ایجاد نمایید و فونت ها را داخلش قرار بدید.

خب ما فونت هامون رو به سایتمون اضافه کردیم حالا میریم تا یک تکه کد Css رو در داخل فایل شیوه نامه یا همان فایل استایل سایتمون یعنی Style.css یا rtl.css قرار بدیم..

قالب های جدیدی که توسط هموطنان ما ترجمه می شوند معمولا فایل شیوه نامه شون rtl.css است پس اگر قالب سایت شما این فایل رو داشت باید در ادامه کدهایی که میگیم رو در این فایل اضافه نمایید و در غیراینصورت باید در فایل style.css که تمامی قالب ها دارنش اضافه نمایید.

شما باید تکه کد زیر را در ابتدای فایل rtl.css یا style.css قرار بدید.


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


 

توجه داشته باشید : در قسمت نام فونت باید آدرس دقیق فونت با نامش را قرار دهید. برای مثال همانطور که در تکه کد اولی مشاهده مینمایید فونت من در پوشه ی fonts قرار دارد و نامش هست kufi با پسوند فلان..

اگر فونت شما و فایل شیوه نامه ی سایتتون یا همان style.css یا rtl.css در یک مکان در کنار هم قرار داشته باشند دیگر لازم نیست آدرس فونت را وارد نمایید بلکه باید بصورت زیر عمل نمایید.

 


اگر توجه کرده باشید در قسمت font-family اسم فونت رو kufi نوشتم،در واقع ما از طریق همین اسم هست که میتوانیم هر قسمتی از سایتمون رو با این فونت نمایش بدیم.. پس توجه داشته باشید که این اسم مهم است و دقیقا همینجوری که هست باید کمی جلوتر ازش استفاده کنیم.

خب حالا میرسیم که به آخرین بخش آموزش،یعنی اینکه چجوری از فونت هایی که در بالا اضافه کردیم استفاده نماییم.

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

  • class-name.  = همان کلاس یا id یا هرعنصر دیگه ای از وبسایتتون است که میخواهید فونت نوشته هایش تغییر کند.
  • kufi = این هم نام فونتی است که مراحل بالا به سایتمون اضافه کردیم.
  • از kufi به بعد هم فونت هایی هستن که اگر مشکلی برای فونت kufi پیش آمد آنها نمایش داده می شوند.

تمام شد، به همین راحتی و با همین تکه کد ما میتونیم هر کجای وبسایتمون رو که بخواهیم فونت نوشته هایش را تغییر بدهیم.

اگر بخواهید فونت مورد نظرتون برای تمامی نوشته های موجود در وبسایتتون عمل کنه باید بجای class-name. به دنبال body اصلی وبسایتتون در فایل css اصلی وبسایتتون بگردید. (style.css یا rtl.css) – که معمولا همون body است.

پیشنهاد همراه آموز : سعی کنید از حداقل دو فونت در تمامی بخش های وبسایتتون استفاده نمایید (برای مثال یعنی منوی سایتتون از یک فونت و کل نوشته های سایت از یک فونت دیگر)

و حتما حتما سعی کنید دو نمونه فونت در وبسایتتون داشته باشید(برای اینکه اگر مشکلی برای فونت اولی پیش اومد سیستم بتواند از فونت دومی برای جایگزین فونت اولی استفاده نماید)

بازدید : بار دسته : آموزش وردپرس ، قالب ، مدیریت وردپرس تاريخ ارسال : ۲۲ دی ۱۳۹۵ به اشتراک بگذارید :
نظرات کاربران
    • شما حق دارید در مورد این آموزش نظر دهید،همراه آموز با افتخار نظر شما را دریافت میکند.
    • نظر شما بعد از ارسال باید توسط مدیریت همراه آموز تایید شود.
    • نظراتی که غیر مرتبط با این مطلب باشد منتشر نخواهد شد.