انجمن موسیقی حسین صباغی

[b][size=5] :Mark: تجربه موفق تغییر فونت قالب وردپرس بدون بهم‌ریختگی[/size][/b]

درود فراوان

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

بعد از کلی آزمون و خطا، به این کد رسیدم که واقعاً مؤثر بود. با همین چند خط تونستم فونت کل سایت رو به فونت دلخواه (Vazir) تغییر بدم، بدون اینکه قالب بهم بریزه یا استایل‌های پیش‌فرض افزونه‌ها خراب بشن.

مزیت این روش اینه که:

فونت به‌صورت سراسری روی همه المنت‌های متنی اعمال می‌شه. هم داخل افزونه‌ها و قالب‌های پیچیده

هیچ تداخلی با ساختار قالب یا چیدمان عناصر ایجاد نمی‌کنه

هر متنی که در هر جای سایت نمایش داده بشه، فونت جدید رو می‌گیره

نیازی به ویرایش فایل‌های افزونه یا قالب‌های فرعی نیست

برای اینکه این تجربه بمونه و شاید به درد دیگران هم بخوره، اینجا آموزش کاملش رو می‌نویسم:

[b] :Mark: مسیر آپلود فونت‌ها:[/b]
در پوشه قالب وردپرسی، یک پوشه با نام [b]fonts[/b] بسازید و ۳ فایل فونت که ضمیمه شده را داخلش آپلود کنید:
[list]
[*]Vazir.woff2
[*]Vazir.woff
[*]Vazir.ttf
[/list]

[b] :Mark: کد CSS برای تعریف فونت:[/b]
در انتهای فایل [b]style.css[/b] قالب وردپرس، این کد رو اضافه کنید:
[b]اعمال فونت به تمام المنت‌های متنی، حتی داخل افزونه‌ها و قالب‌های پیچیده[/b]
[align=left]
[code]@font-face {
font-family: 'Vazir';
src: url('fonts/Vazir.woff2') format('woff2'),
url('fonts/Vazir.woff') format('woff'),
url('fonts/Vazir.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* اعمال فونت به تمام المنت‌های متنی، حتی داخل افزونه‌ها و قالب‌های پیچیده */
*,
*::before,
*::after {
font-family: 'Vazir', sans-serif !important;
}

[/code]
[/align]

یا اگر مشکل نمایش آیکون داشتین کد قبل را حذف و این کد قرار بدین
[b]اعمال فونت فقط به المنت‌های متنی عمومی[/b]
[align=left][code]@font-face {
font-family: 'Vazir';
src: url('fonts/Vazir.woff2') format('woff2'),
url('fonts/Vazir.woff') format('woff'),
url('fonts/Vazir.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/* اعمال فونت فقط به المنت‌های متنی عمومی */
body,
p, span, div:not([class*="icon"]):not(.fa):not(.fab):not(.fas):not(.far):not(.dashicons):not(.material-icons):not(.flaticon):not(.et-icon):not(.wp-menu-image):not(.nav-search):not(.social-profiles):not(.dash-search-toggle),
h1, h2, h3, h4, h5, h6,
li, a, td, th, input, textarea, button,
blockquote, cite, label, strong, em {
font-family: 'Vazir', Tahoma, sans-serif !important;
}
[/code][/align]

[b]✅ نتیجه:[/b]
[list]
[*]فونت سایت با موفقیت به Vazir تغییر کرد
[*]هیچ بهم‌ریختگی یا مشکل ظاهری نداشت
[*]همه کلاس‌ها حتی اونایی که توسط افزونه‌ها ساخته شده بودن—فونت جدید رو گرفتن
[/list]

اگر سوالی داشتید یا خواستید فونت دیگه‌ای استفاده کنید، خوشحال می‌شم کمک کنم.