چگونه فونت ایرانی (BYekan) را به وردپرس اصافه کنیم؟

[pardazit.net]

احتراما چون از قالب شما اطلاعات دقیقی نداریم توضیحات ارائه شده بصورت عمومی بود

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

[Rezash]

این روش ابزار های قالب رو خراب میکنه

دوست عزیز اگر بدرستی انجام بدید هیچ مشکلی برای قالب پیش نمیاد.
فقط در صورتی که آپدیت کنید تغییرات از بین می ره. اگر میخواید طبق استاندارها انجام بدید فایل rtl.css ایجاد کنید. در تنظیمات وردپرس هم rtl تنظیم کنید تا این فایل در خروجی ظاهر شود.
روش های مختلفی وجود داره مثل استفاده از تابع wp_enqueue_style یا ...
بستگی قالب شما به چه صورتی کد نویسی شده هست و اینکه آیا از اصول localization وردپرس پیروی میکنه یا خیر
ضمنا اگر مخاطبین شما ایرانی هست پیشنهاد میکنم کلا گوگل فونت رو غیر فعال کنید ! به دلیل شبکه عجیب و غریب ایران بارگذاری منابع https مثل گوگل فونت در بعضی موارد تا چند دقیقه طول میکشه و سرعت سایت شما رو خیلی کند میکنه. کتابخونه ها رو دانلود و در هاست خودتون نگهداری کنید ( بر خلاف همه دنیا که استفاده از این cdn ها مزیت هست !!! )
اگر اصرار بر استفاده از google fonts رو دارید می تونید با استفاده از توابع جاوااسکریوت منابع رو اضافه کنید ولی این منابع در پنل ادمین شما ظاهر نمیشند و باید باز هم دستی اعمال کنید !

[سیدرضا بازیار]

دوست عزیز اگر بدرستی انجام بدید هیچ مشکلی برای قالب پیش نمیاد.
فقط در صورتی که آپدیت کنید تغییرات از بین می ره. اگر میخواید طبق استاندارها انجام بدید فایل rtl.css ایجاد کنید. در تنظیمات وردپرس هم rtl تنظیم کنید تا این فایل در خروجی ظاهر شود.
روش های مختلفی وجود داره مثل استفاده از تابع wp_enqueue_style یا ...
بستگی قالب شما به چه صورتی کد نویسی شده هست و اینکه آیا از اصول localization وردپرس پیروی میکنه یا خیر
ضمنا اگر مخاطبین شما ایرانی هست پیشنهاد میکنم کلا گوگل فونت رو غیر فعال کنید ! به دلیل شبکه عجیب و غریب ایران بارگذاری منابع https مثل گوگل فونت در بعضی موارد تا چند دقیقه طول میکشه و سرعت سایت شما رو خیلی کند میکنه. کتابخونه ها رو دانلود و در هاست خودتون نگهداری کنید ( بر خلاف همه دنیا که استفاده از این cdn ها مزیت هست !!! )
اگر اصرار بر استفاده از google fonts رو دارید می تونید با استفاده از توابع جاوااسکریوت منابع رو اضافه کنید ولی این منابع در پنل ادمین شما ظاهر نمیشند و باید باز هم دستی اعمال کنید !

روش شما رو قبلا انجام دادم و هرگز عمل نمیکنه
هر روشی هم امتحان کردم نشد

[Rezash]

روش شما رو قبلا انجام دادم و هرگز عمل نمیکنه
هر روشی هم امتحان کردم نشد

هموطنور که عرض کردم بستگی به قالب و شرایط کد نویسی شما داره
روش هایی که عرض کردم رو حداقل روی ۲۰۰ قالب مختلف وردپرسی پیاده کردم.
مطمین باشید یکی از مراحل رو اشتباه میرید ( کش - کامپایل مجدد css و ...)

[سیدرضا بازیار]

هموطنور که عرض کردم بستگی به قالب و شرایط کد نویسی شما داره
روش هایی که عرض کردم رو حداقل روی ۲۰۰ قالب مختلف وردپرسی پیاده کردم.
مطمین باشید یکی از مراحل رو اشتباه میرید ( کش - کامپایل مجدد css و ...)

کد در حالت اولیه اجرا نمیشد تا اینکه کد رو به زیر تبدیل کردم

@font-face {
    font-family: 'BYekan',Tahoma;
    src: url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.eot?#') format('eot'),
    url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.woff') format('woff'), 
    url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.ttf') format('truetype');
font-weight: normal;  
}
*{
    font-family: 'BYekan',Tahoma;
  font-size: 14px;
}
.h1 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h2 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h3 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h4 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h5 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h6 site-title { 
font-family: 'BYekan',Tahoma; 
}

بخش * در ابتدا body گذاشتم و این مورد باعث شد که روی index عمل نکنه. وقتی تبدیلش کردم به * درست شد

این روش هم باعث میشه همه متن ها به 14 پیکسل تغییر کنند حتی هدینگ ها

راه حل چشه؟

[Rezash]

کد در حالت اولیه اجرا نمیشد تا اینکه کد رو به زیر تبدیل کردم

@font-face {
    font-family: 'BYekan',Tahoma;
    src: url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.eot?#') format('eot'),
    url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.woff') format('woff'), 
    url('http://kazerun.info/wp-content/themes/kleo/fonts/BYekan.ttf') format('truetype');
font-weight: normal;  
}
*{
    font-family: 'BYekan',Tahoma;
  font-size: 14px;
}
.h1 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h2 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h3 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h4 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h5 site-title { 
font-family: 'BYekan',Tahoma; 
}
.h6 site-title { 
font-family: 'BYekan',Tahoma; 
}

بخش * در ابتدا body گذاشتم و این مورد باعث شد که روی index عمل نکنه. وقتی تبدیلش کردم به * درست شد

این روش هم باعث میشه همه متن ها به 14 پیکسل تغییر کنند حتی هدینگ ها

راه حل چشه؟

* به معنی selector همه هست. یعنی همه المنت ها در صفحه رو گفتید فونتشون Byekan و سایزشون 14 باشند.
اگر فقط مشکل سایز هست font-size رو حذف کنید.
ولی برای اینکه قالب ظاهر مناسبی داشته باشه باید font-family و font-size رو بسته element بهش بدید
یعنی در قسمت های مختلف بگردید و هر جا font-family رو میخواید بدید به همون قسمت از کد بدید نه به کل المنت ها
با اینکار شما اگر از کتابخونه هایی مثل font awesome یا ... استفاده کنید آیکن ها و ... بهم میریزند

[سیدرضا بازیار]

این کد خوب عمل نمیکنه. هر کدی هم که میزارم اندازه فونت در صفحات مختلف با index سایت فرق داره
راه حل چیه؟

[Rezash]

این کد خوب عمل نمیکنه. هر کدی هم که میزارم اندازه فونت در صفحات مختلف با index سایت فرق داره
راه حل چیه؟

با استفاده از inspect element در خروجی سایت روی المنت های صفحه کلاس هایی که روی المنت تاثیر میزارند رو پیدا کنید و به همون کلاس ها font-family و font-size بدید.