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

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

نحوه ی افزودن فونت های سفارشی به قالب وردپرس

خب برای اضافه کردن فونت باید ابتدا فونت موردنیاز خود را در سه و در برخی موارد چهار فرمت داشته باشد که ما در این مطلب به فونت Iran-sans می پردازیم شما می تواند هر نوع فونتی را طبق این آموزش به پوسته وردپرس خود اضافه کنید.فونت ها باید در سه فرمت ttf ، eot و woff و در برخی از موارد همان طور که گفته شد فرمت svgz هم هست.

اما شما میتوانید فونت مورد نیاز خود را با فرمت ttf دریافت و با استفاده از سایت تبدیل اینجـــــــا به فرمت eot و از اینجـــــــــا به woff تبدیل کنید.اما با توجه به این که آموزش ما بر پایه ی فونت Iran-sans هست این فونت را به چها فرمت در انتهای همین مطلب برای دانلود قرار دادیم می توانید دریافت و استفاده کنید.

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

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

ابتدا یک پوشه با نام fonts در داخل پوسته ایجاد کنید اگز این پوشه از قبل وجود داشت نیازی به ایجاد دوباره نیست فونت خود را که در سه فرمت و یا چها فرمت می باشد را درون آن قرار دهید. برای مثال Iran-sans.ttf ، Iran-sans.woff ، Iran-sans.eot را در این پوشه آپلود کنید.

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

@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;
}

بعد از قرار دادن کد فوق در فایل نام برده نوبت به تغییر تمامی font-family قالب می باشد که می توانید این کلمه را جستجو و فونت را Iran-sans تغییر دهید.

مثال: اگر font-family یک بخش و تگ المان نوشته شده باشد font-family: Arial یعنی فونت این تگ یا المان Arial می باشد اینجاست که باید تغییر یابد به font-family:Iran-sans

به این راحتی مثل آب خوردن شما فونت سایت و قالب خود را تغییر خواهید داد حال با رفتن به صفحه ی سایت و زدن دکمه ctrl+f5 تغییرات را مشاهده خواهید کرد.

راه دوم تغییر فونت قالب حرفه ای وردپرس

اما در برخی از موارد دیده می شود که قالب در بخش پنل تنظیماتی خود بخش برای استایل سفارشی دارد که می توایند برای سایت و پوسته ی خود استالیل های سفارشی بنویسد و تغییراتی را از آنجا اعمال کنید این بخش هم تکنیکی برای تغییر فونت پوسته دارد که ما در ادامه همین آموزش وردپرس به ان خواهیم پرداخت.

روش دیگری که در اینجا وجود دارد نوشتن استایل سفارشی تغییر فونت قالب میباشد اگر دوست دارید فایل style.css را برای تغییر فونت دست کاری نکنید می توانید از روش زیر استفاده کنید.

1) فونت ها را در سه فرمت یا چهار فرمت در پوشه fonts آپلود کنید.

2) کد زیر را در فایل style.css قالب خود قرار دهید.

@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;
}

حال دیگر نیازی نیست تمامی font-family داخل استایل و یا rtl را سرچ و Iran-sans را جایگزین کنیدکافیست کد زیر را کپی و در بخش استایل سفارشی که در پنل تنظیماتی قالب قرار دارد پیست کنید.

body,div,p,a,h1,h2,h3,h4,h5,h6,span{
font-family:Iran-sans !important;
}

با این کار یعنی تمام تگهای قالب را به این فونت تغییر بده اگر تگ هایی دارید که در کد بالا نوشته نشده می توایند اضافه کنید.

توجـــه: اگر این بخش یعنی استایل سفارشی در پنل تنظیماتی پوسته شما وجود نداشت می توایند در داخل فایل style.css قرار دهید.

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

دانلود فونت ایرانسنس | Iran-sans

منبع: آپ تم  مرجع: آموزش وردپرس | قالب وردپرس شرکتی