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

با سلام

بسیای از قالب هایی که فارسی سازی می شوند و  یا حتی قالب های فریم ورکی نیاز به فونت فارسی دلخواه برای نمایش مطالب دارند. من در این نوشته سعی می کنم به صورت ساده و روان تغییر فونت بخش های مختلف یک قالب رو به فونت دلخواه آموزش بدم.

برای تغییر فونت شما نیاز به فایل فونت های مورد علاقه خودتون دارید که در انتهای  مطلب ۴۰ فونت فارسی زیبا قابل دانلود هست.

خوب بعد از اینکه این فایل رو دانلود کردید از حالت فشرده خارج می کنید و فونت های مورد علاقه خودتون رو در سه فرمت (ttf , eot , woff ) انتخاب و در پوشه ای به نام (fonts ) که در اکثر قالب ها وجود داره (وجود نداشت خودتون بسازید ) قرار می دید.

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

حالا بر می گردید به فایل استایل یا CSS  قالبتون و اون رو باز کرده این کد رو در ابتدای فایل یعنی بعد از نوشته های مربوط به نام قالب ، ورژن و….. قرار می دید:


@font-face {
font-family: ‘BYekan’;
src: url(‘/fonts/BYekan.eot’);
src: local(‘b BYekan’), url(‘fonts/BYekan.woff’) format(‘woff’), url(‘fonts/BYekan.ttf’) format(‘truetype’), url(‘BYekan.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

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

نکته : در صورتی که مایل به استفاده از چند فونت بودید این کد رو در همون قسمت کپی و اسم فونت دلخواه تون رو که آپلود کردید قرار می دید مثل زیر :


@font-face {
font-family: ‘BYekan’;
src: url(‘/fonts/BYekan.eot’);
src: local(‘b BYekan’), url(‘fonts/BYekan.woff’) format(‘woff’), url(‘fonts/BYekan.ttf’) format(‘truetype’), url(‘BYekan.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

خوب تا حالا فایل های اصلی رو داخل قالبتون قرار  دادید و قالب برای تغییر فونت آماده هستش!برای شناسایی و تغییر فونت ها ساده ترین راه اینه که دنبال عبارت : (font-family) داخل کد های استایل (css) باشید و اسم فونتی رو که به صورت پیش فرض قرار داره با فونت هایی که قبلا آماده کردید جایگزین کنید.

مثلا این فونت رو به این صورت تغییر می دید:

قبل از تغییرفونت:


font-family: “Droid Arabic Kufi”,”Verdana”,”Arial”, sans-serif;
font-size: 14px;
font-weight: bold;

بعد از تغییر فونت:


font-family: “BYekan”,”Verdana”,”Arial”, sans-serif;
font-size: 14px;
font-weight: bold;

روال کار در سایر بخش های سایت هم همینه:

حالا سوال اینه که از کجا بدونیم فونت کدوم قسمت در کجای فایل استایل (css) قرار داره؟ چطوری می تونیم تشخیص بدیم که مثلا فونت تیتر مطالب کدومه؟برای اینم یه راهی وجود داره و اون استفاده از افزونه ای هستش که روی مرورگر فایر فاکس نصب می شه و طراحان از اون استفاده می کنند. اسم این افزونه فایر بگه (Firebug)  و شما می تونی از طریق این لینک اون رو به صورت آنلاین روی مرورگرتون نصب کنید.کار کردن با اونم به این شکله که وارد سایتتون می شید و روی مثلا تیتر نوشته ها علامت گذاری می کنید  و بعد راست کلیک می کنید و روی گزینه (Inspect Element with Firebug) کلیک می کنید.این افزونه خطی رو که این فونت قرار داره رو نمایش میده. الیته خودتون می تونید اسم فونت ها رو همون جا تغییر بدید و نتیجه رو به صورت آنلاین مشاهده کنید. (البته موقتی و بعد از رفرش از بین میره!) بنابر این باید از طریق فایل اصلی اقدام به تغییر فونت کنید.

موفق باشید.

دانلود فایل PDF این آموزش

دانلود مجموعه فونت ها با لینک مستقیم

یک پیشنهاد برای شما:

45 دیدگاه

  • ·

    درود بر شما
    بنده از قالب Multinews در وردپرس نسخه فارسی استفاده می کنم. تمایل دارم اونرو تغییر فونت بدم. وقتی وارد روتِ قالب میشم پوشه font رو باز می کنم دو تا فولدر icons و ar وجود داره که خودشون هم در داخل بخش بندی هایی شدن. فونتی که می خوام رو در کدوم بخش قرار بدم و آپلود کنم؟

    پاسخ
    • نویسنده ·

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

ارسال دیدگاه

آدرس ایمیل شما منتشر نخواهد شد. فیلد های ضروری با * مشخص شده است.