افزودن فونت دلخواه به قالب وردپرس
برای آنکه بتوانید یک ظاهر کاربری حرفه ای و کاربر پسند داشته باشید باید بتوانید سیستم و ساز و کاری تعریف کنید که کاربر از مطالعه مطالب شما احساس خوش آیندی بدست بیاورد یکی از این فاکتور ها که نقش بسزایی در این زمینه ایفا می کنند فونت های وب سایت هستند به طوری که با تغییر فونت وب سایت به فونت نرم و زیبا می توانید تاثیر آن را به صورت ملموسی مشاهده کنید.
افزودن فونت های سفارشی در وردپرس با استفاده از CSS
مستقیم ترین روش اضافه کردن فونت های سفارشی در وردپرس ، اضافه کردن فونت ها با استفاده از روش font-face@ در CSS است. ابتدا قلم مورد نظر خود را با قالب وب بارگذاری کنید. بهترین مکان برای بارگذاری فونت ها ، پوشه جدید “fonts” در قالب اصلی یا قالب فرزند (Child Theme) شما است. برای بارگذاری فونت می توانید از FTP یا File Manager cPanel استفاده کنید. پس از بارگذاری فونت، باید فونت را در فایل Style.css یا در rtl.css (در قالب هایی که ساپورت میشود) خود با استفاده از قانون فونت CSS فراخوانی شود.
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 500;
src: url(‘fonts/eot/IRANSansWeb_Medium.eot’);
src: url(‘fonts/eot/IRANSansWeb_Medium.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/woff2/IRANSansWeb_Medium.woff2’) format(‘woff2’),
url(‘fonts/woff/IRANSansWeb_Medium.woff’) format(‘woff’),
url(‘fonts/ttf/IRANSansWeb_Medium.ttf’) format(‘truetype’);
}
در کد CSS بالا فونت IRANsans را برای افزودن به قالب انتخاب کردیم که شما می توانید با تغییر نام و مسیر دهی (src : url) فونت دلخواه دیگری را معرفی کنید.
بعد از معرفی فونت به قالب با استفاده از کد بالا، فونت مد نظر در قالب شما ثبت خواهد شد و فقط از این به بعد نیاز هست که برای تغییر فونت المان مد نظر font-family المان را برابر با فونت ثبت شده قرار دهید. سپس فونت دلخواه خود را به المان های اصلی معرفی کنید ، باید تکه کد زیر را نیز در پایین کد بالایی اضافه کنید تا فونت به المان های اصلی قالب نیز اضافه شود.
html,body,h1, h2,h3,h4,h5,h6,span,div,p,main,iframe,footer,
a,small,b,strong,section,article,table,header,q,
blockquote ,ul li , li ,input,button {
font-family: IRANsans !important;
}
توجه : امکان دارد قالب شما المان های دیگری داشته باشد که در کد بالا موجود نباشد ، فقط لازم است که با افزودن , و قرار دادن المان در ادامه کد بالا مشکل را برطرف کنید.
همچنین در کد بالا ما از دستور !important استفاده کردیم تا این فونت بر بقیه الویت داشته باشد. برای مثال اگر class به اسم test داشته باشید (“class=”test) و بخواهید به آن فونت دلخواه خود را اضافه کنید تنها لازم است همانند کد زیر عمل کنید و جای font name فونت مد نظر خود را جایگزین کنید.
.test {
font-family: ‘font name’;
}
فایل های فونت آپلود شده شما می توانید با فرمت های ttf ,svg , otf , eot , woff , woff2 باشد که با توجه به مرورگری که استفاده می کنید می تواند فونت ها را بخوبی نمایش دهد و یا بلعکس.
انواع فرمت های فونت و فرق های آنان در browser های مختلف
افزودن فونت با افزونه ی MW Font Changer در وردپرس
برخی ویژگی های افزونه :
استفاده آسان
دارای ۳۰ فونت پرطرفدار فارسی
قابلیت تغییر فونت داشبورد وردپرس
قابلیت تغییر فونت قالب با شناسه و کلاسفونت
برخی از معایب افزونه :
کاهش نسبی سرعت لود سایت
استفاده از برخی از فونت های پولی(پیشنهاد می شود در این باره تحقیق کنید.)
برخی از فونت هایی که این افزونه در اختیار ما قرار می دهد:
- B Esfehan
- B Helal
- B Homa
- B Jadid
- B Koodak
- B Bardiya
- B Mahsa
- B Mehr
- B Mitra
- B Nasim
- B Nazanin
- B Sina
- B Titr
- B Yekan
- Dast Nevis
- Droid Arabic Kufi
- Droid Arabic Naskh
- Gandom
- IR Yekan
- IRANSans
- IRANYekan
- IranNastaliq
- Parastoo
- Sahel
- Samim
- Shabnam
- Shekasteh
- Sultan Adan
- Tanha
- Vazir
- XM Yekan
- Arial
- Comic Sans MS
- Tahoma
- Verdana
آموزش کار با افزونه
ابتدا افزونه را نصب و فعالسازی کنید و بعد از فعالسازی افزونه، زیر منویی با نام فونت ماندگار به تنظیمات وردپرس اضافه میشود.
در قسمت (فونت ماندگار – پوسته) تنظیمات فونت برای قالب است و در قسمت (فونت ماندگار- پیشخوان) تنظیمات فونت در بخش داشبورد و مدیریت وردپرس است.
فونت عناوین: شامل فونت عنوانها از جمله تگهای h میشود.
فونت بدنه: شامل محتوای هر پست و نوشتهها است.
فونت ادمینبار در صفحه اصلی سایت: ادمینبار نواری است که معمولا در بالای سایت نماش داده میشود.
اگر میخواهید از کلاس و آیدی فونت استفاده کنید میتوانید از قسمت عناصر دلخواه بهره بگیرید.
تغییر فونت وردپرس برای فونت پیشخوان شامل تنظیمات و بخشهای مدیریت وردپرس است که میتوانید در این بخش آن را تغییر دهید . پس از اعمال تغییرات گزینه (ذخیره تنظیمات) را بزنید.
دانلود افزونه ی MW Font Changer
مطالب مرتبط:
استفاده از تگ های h۱ , h۲ , … , h6 , B برای بهینه سازی سئو سایت وردپرسی
افزودن تبلیغات داخل محتوای پست با افزونه Insert post ads
ایجاد پاپ آپ های حرفه ای در وردپرس با popup by supsystic
درباره Mostafa Shoa
مدیر تیم پارس نویس، کارشناس مهندسی نرم افزار، مدرس دوره های برنامه نویسی و طراحی سایت در مدارس تیزهوشان، مشاور تبلیغات و بازاریابی استارتاپ ها و کسب و کارهای اینترنتی
نوشته های بیشتر از Mostafa Shoa
دیدگاهتان را بنویسید