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

ترفند اول که راحت تر و به قول معروف easy to use (استفاده آسان!) است از یک افزونه استفاده می کند اما ترفند دوم کمی کدنویسی دارد (البته در این مورد فقط نیاز به یک کپی پیست ساده است) اما در عوض سرعت بیشتری دارد و حافظه کمتری را اشغال می کند.

ترفند اول:‌ استفاده یک افزونه وردپرس

من از افزونه use any font استفاده می کنم اما شما می تونید از هر افزونه مرتبط دیگه ای استفاده کنید. این پلاگین یک عیب داره و اونم اینه که از بیشتر از یک فونت پشتیبانی نمی کنه! راه حلش اینه که یا از یک افزونه دیگه استفاده کنید یا از ترفند دوم یا هم اینکه اگه امکان پرداخت دارید، سر کیسه رو شل کنید 

وارد پنل وردپرس که شدید برید قسمت افزونه ها و افزودن رو بزنید حالا طبق شکل زیر تو قسمت جستجو Use Any Font رو سرچ کنید و نصب رو بزنید:

این پلاگین نیاز به این داره که با استفاده از api فعال بشه طبق عکس فعالش کنید:

فعالسازی use any font

مرحله بعدی اینه که فونت رو آپلود کنید:

آپلود فونت در پلاگین use any font

حالا که فونت آپلود شد، توی مرحله آخر وقتشه که اونو به قالب اضافه کنید؛ به همین سادگی Assign Font رو بزنید و فونت رو از منوی کشویی با همون اسمی که براش تو مرحله قبلی گذاشتید انتخاب کنید و هر قسمت از قالب که میخواید با اون فونت طراحی بشه رو تیک بزنید، اگه زیاد مطمئن نیستید ترجیحا همه رو تیک بزنید. یه توضیح اگه بخوام بدم اون قسمت ها تگ های مختلفه که توی قالبتون به کار رفته و هر تگ مال یک بخش خاص از قالبتونه مثلا تگ p برای پاراگراف های قالبتونه پس اگه میخواید که فقط پاراگراف ها تغییر کنند فقط اون تیک مربوط به‌ p رو بزنید.

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

ترفند دوم: اضافه کردن فونت به قالب به صورت سفارشی

این ترفند خوشبختانه توی انواع قالب ها بکار می ره؛ مثل: اچ تی ام ال‌، جوملا،‌ وردپرس و … . دلیلش هم اینه که از قسمت استایل قالب رو ویرایش می کنه و هر قالبی حتما فایلی به اسم Style.css داره!

پیش نیاز:

باید فونت مختص وب داشته باشید؛ توی وب نمیشه از فونت های معمولی که تو ویندوز ازش استفاده می کنیم، استفاده کرد و باید یک فونت با ۲ الی ۳ فرمت ttf,wtf,otf داشته باشید. اما اگه نداریدش نگران نباشید. می تونید از فونت ایران بخریدش یا هم اگه یک نسخه غیرپولی دارید اما به سه فرمت بالا نیست می تونید از تبدیل کننده های فونت که برای این کار ساخته شدن استفاده کنید.

توضیح انواع فونت های مخصوص صفحات وب

وارد فایل منیجر هاست تون بشید و ازمسیر wp-content -> نام قالب -> fonts وارد بشید یا هم اگه ای پوشه نبود داخل همون wp-content -> نام قالب تون ایجادش کنید. فونت رو توی ۳ الی ۴ فرمت آپلود کنید.

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

اول این فایل این کد رو قرار بدید فقط حواستون باشه به جای Iran-sans اسم فونت تون رو بزارید. اینجا فونت رو آپلود کردیم اما هنوز ازش استفاده نکردیم.

@font-face {
 font-family: 'Iran-sans';
 src: url('Iran-sans.eot?#') format('eot'),
 url('Iran-sans.woff') format('woff'), 
 url('fonts/Iran-sans.ttf') format('truetype');
}
body{
font-family:Iran-sans;
}

حالا توی ویرایشگر برای تغییر قسمت های مختلف قالب تون از کد زیر استفاده کنید و به جای Iran-sans اسم فونت تون رو بزارید:

h1, h2, h3, h4, h5, h6, .entry-title, body.single-post .entry-title, body.page .entry-title, body.category .entry-title, .widget-title, .site-title, .site-description, body, p, blockquote, li, a, strong, b, em, .menu-main-menu-container li a, .menu-main-menu-container li span, #menu-main-menu li a, #menu-main-menu li span{
    font-family: 'iransans' !important;
}

راه سخت ترش اینه که اسم فونت قبلی که توی قالبتون هست: توی همون font face، جلوی font family نوشته رو توی کل کد سرچ کنید و به جاش اسم فونت جدید رو جایگزین کنید. می تونید برای سریع تر انجام شدن از Ctrl + H استفاده کنید 

برای تغییر سایر قالب ها از کد زیر به عنوان نمونه می تونید استفاده کنید:

h1, h2, h3, h4, h5, h6,body, p, blockquote, li, a, strong, b, em{
    font-family: 'iransans' !important;
}

اگه فونت قسمتی از سایتتون هنوز تغییر کافیه روی همون قسمت کلیک راست کنید و inspect element رو بزنید مطابق تصویر از قسمت css اسم تگ یا کلاسش رو پیدا کنید و قبل از } آکولاد باز بعد از اضافه کردن , بنویسید. به همین راحتی 

بررسی مشکلات با inspect element

تذکر: استفاده از فونت های متعدد در قالبتون باعث میشه تا سرعت لود اون پایین بیاد پس بهتره که از حداکثر ۲ فونت استفاده کنید. پس حواستون باشه زیاده روی نکنید.


این پست رو در وبلاگ سابقم jetcode.blog.ir نوشته بودم اما اون وبلاگ رو حذف کردم.

منبع سابق نوشته وبلاگ حذف شده jetcode
بستن منو