حل مشکل نمایش ندادن فونت‌های آپلود شده در المنتور | راهنمای جامع 2025

فونت‌ها در طراحی وب‌سایت‌ها نقش حیاتی دارند. نه تنها هویت بصری سایت و برند شما را می‌سازند، بلکه تأثیر زیادی در تجربه کاربری دارند. افزونه المنتور این امکان را به طراحان می‌دهد که فونت‌های سفارشی را آپلود کنند تا سایت‌های حرفه‌ای و متمایز طراحی کنند. اما یکی از مشکلات رایج، نمایش ندادن فونت‌های سفارشی است که به ویژه پس از آپلود این فونت‌ها در المنتور مشاهده می‌شود. این مشکل می‌تواند به دلیل دلایل مختلفی ایجاد شود که در این مقاله به بررسی آن‌ها و راه‌حل‌های مناسب برای حل آن‌ها می‌پردازیم.

دلایل و راه‌حل‌ها

1. کش مرورگر و افزونه‌های کش

در بسیاری از موارد، فونت‌ها به درستی آپلود می‌شوند، اما کش مرورگر یا افزونه‌هایی مانند WP Rocket یا LiteSpeed Cache مانع از بارگذاری فونت‌های جدید می‌شوند. این کش‌ها ممکن است نسخه قدیمی از فونت‌ها را در خود ذخیره کرده و در نتیجه نمایش فونت جدید دچار مشکل شود.

راه‌حل:

• کش مرورگر را پاک کنید.
• کش افزونه‌های کش مانند WP Rocket یا LiteSpeed Cache را پاکسازی کنید.
• اگر از CDN مانند Cloudflare استفاده می‌کنید، کش آن را هم پاک کنید.
• در المنتور گزینه “Regenerate CSS” را فعال کنید تا CSS جدید به درستی بارگذاری شود.

2. مشکل در گواهی SSL (HTTPS)

اگر سایت شما از HTTPS استفاده کند و فونت‌ها با HTTP بارگذاری شوند، مرورگر به دلیل مشکلات محتوای ترکیبی (Mixed Content) فونت‌ها را بارگذاری نخواهد کرد.

راه‌حل:

• اطمینان حاصل کنید که تمام آدرس‌های فونت با https:// شروع شوند.
• از ابزارهایی مانند “Better Search Replace” برای جایگزینی آدرس‌ها از HTTP به HTTPS استفاده کنید.
• در صورت نیاز، کد زیر را در فایل .htaccess برای تنظیم ارجاع‌های HTTPS اضافه کنید:

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

3. آپلود ناقص یا فرمت‌های ناقص

فونت‌های سفارشی باید در فرمت‌های مختلف مانند .woff, .woff2, .ttf, و .eot آپلود شوند تا توسط تمام مرورگرها پشتیبانی شوند. آپلود یک فرمت یا فرمت‌های اشتباه ممکن است باعث بروز مشکل در بارگذاری فونت‌ها شود.

راه‌حل:

• فونت‌ها را در تمام فرمت‌های استاندارد بارگذاری کنید.
• از نام‌گذاری ساده و بدون فاصله یا کاراکترهای خاص برای فایل‌های فونت اطمینان حاصل کنید.

4. آدرس‌دهی اشتباه یا تغییر مسیر

در صورتی که مسیر فونت اشتباه باشد یا تغییر مسیر (Redirect) ایجاد شده باشد، فونت‌ها به درستی بارگذاری نمی‌شوند. این مشکل معمولاً با خطای 404 یا failed to load resource در مرورگر مشخص می‌شود.

راه‌حل:

• مسیر فونت‌ها را از طریق تب “Network” در Inspect مرورگر بررسی کنید.
• لینک فونت‌ها را به‌صورت دستی و دقیق وارد کنید و مسیرها را اصلاح کنید.

5. تداخل با افزونه المنتور فارسی

برخی از نسخه‌های افزونه المنتور فارسی ممکن است فونت‌های سفارشی را override کرده یا تنظیمات آن‌ها را نادیده بگیرند. این مشکل بیشتر در نسخه‌های غیر رسمی المنتور فارسی مشاهده می‌شود.

راه‌حل:

• اگر از نسخه فارسی المنتور استفاده می‌کنید، آن را غیرفعال کرده و المنتور اصلی را تست کنید.
• در صورت لزوم، از کد CSS زیر برای اجبار به اعمال فونت سفارشی استفاده کنید:

* {
; font-family: ‘YourCustomFontName’ !important
}

6. تنظیمات MIME و امنیت سرور

اگر سرور فونت‌ها را با نوع MIME اشتباه ارسال کند، مرورگر اجازه بارگذاری آن‌ها را نمی‌دهد. این مسئله معمولاً در صورتی پیش می‌آید که تنظیمات امنیتی یا نوع MIME فایل‌های فونت به درستی پیکربندی نشده باشد.

راه‌حل:

• از پشتیبانی هاست خود بخواهید که تنظیمات MIME را برای فرمت‌های فونت مانند .woff و .woff2 بررسی و تنظیم کند.

7. تداخل با قالب یا افزونه‌های دیگر

گاهی اوقات قالب یا افزونه‌های دیگر ممکن است استایل‌های فونت را override کنند، به‌ویژه اگر از !important در استایل‌ها استفاده شده باشد.

راه‌حل:

• استایل‌های قالب یا افزونه‌ها را بررسی کنید تا از تداخل جلوگیری شود.
• برای آزمایش، قالب پیش‌فرض وردپرس مانند Twenty Twenty-One را فعال کنید و بررسی کنید که آیا مشکل حل می‌شود یا خیر.

8. بررسی فونت در محیط ویرایشگر

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

راه‌حل:

• مطمئن شوید که فونت سفارشی در تنظیمات سایت المنتور اعمال شده باشد.
• اگر افزونه‌های دیگری وجود دارند که ممکن است بر ویرایشگر تأثیر بگذارند، آن‌ها را غیرفعال کنید.

9. بررسی دسترسی فایل‌ها

اگر فایل‌های فونت روی سرور با سطح دسترسی اشتباه تنظیم شده باشند، ممکن است مرورگر نتواند آن‌ها را بارگذاری کند.

راه‌حل:

• اطمینان حاصل فرمایید که فایل‌های فونت دارای سطح دسترسی 644 و پوشه‌های حاوی آن‌ها دارای سطح دسترسی 755 باشند. برای بارگذاری صحیح فونت‌ها، ضروری است که فایل‌های فونت تنها قابل خواندن بوده و سطح دسترسی آن‌ها روی 644 تنظیم شده باشد. همچنین، پوشه‌ای که این فایل‌ها در آن قرار دارند باید قابل دسترسی و باز شدن بوده و سطح دسترسی آن بر روی 755 تنظیم گردد. این تنظیمات را می‌توانید از طریق بخش “Change Permissions” در File Manager هاست خود یا با استفاده از نرم‌افزار FTP و گزینه تغییر سطح دسترسی (با وارد کردن اعداد مربوطه) انجام دهید.

10. استفاده دستی از @font-face

در صورتی که هیچ‌کدام از راه‌حل‌های بالا به نتیجه نرسید، می‌توانید فونت را به‌صورت دستی با استفاده از دستور @font-face در CSS بارگذاری کنید.

راه‌حل:

} font-face@
; ‘font-family: ‘YourFont
, src: url(‘/wp-content/uploads/your-font.woff2’) format(‘woff2’)
; url(‘/wp-content/uploads/your-font.woff’) format(‘woff’)
; font-weight: normal
; font-style: normal
{
} body
; font-family: ‘YourFont’, sans-serif
}

بررسی دو مورد محتمل

1. CORS (Cross-Origin Resource Sharing)

CORS یک مکانیزم امنیتی است که مرورگرها برای جلوگیری از حملات خاص (مانند حملات Cross-Site Request Forgery یا CSRF) استفاده می‌کنند. وقتی یک فایل (مثلاً فونت یا تصویر) از یک دامنه دیگر بارگذاری می‌شود، مرورگر بررسی می‌کند که آیا دسترسی به آن فایل برای دامنه شما مجاز است یا خیر.

مشکل:

اگر فونت شما از یک دامنه متفاوت بارگذاری شود (مثلاً از یک CDN یا سرور خارجی)، ممکن است مرورگر به دلیل محدودیت‌های CORS نتواند آن را بارگذاری کند و فونت در سایت شما نمایش داده نشود.

راه‌حل:

برای رفع مشکل CORS، باید تنظیمات سرور یا CDN را تغییر دهید تا دسترسی به فونت‌ها از دامنه شما مجاز باشد.

• اگر فونت از CDN بارگذاری می‌شود:
  بسیاری از CDN‌ها (مثل Google Fonts یا Font Awesome) به طور خودکار تنظیمات CORS را برای فونت‌ها انجام می‌دهند، اما اگر شما فونت‌ها را از یک منبع شخصی بارگذاری می‌کنید، باید هدر CORS را در سرور خود تنظیم کنید. برای سرور Apache:
  شما باید هدر Access-Control-Allow-Origin را در فایل .htaccess اضافه کنید تا اجازه بدهید منابع خارجی بارگذاری شوند:

<FilesMatch "\.(eot|otf|ttf|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

سرور Nginx:
اگر از Nginx استفاده می‌کنید، باید تنظیمات مشابهی را در فایل پیکربندی سرور (مثلاً nginx.conf) اضافه کنید:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

توجه: به جای * می‌توانید دامنه خاص خود را هم وارد کنید تا فقط برای همان دامنه خاص این دسترسی فعال شود.

• اگر فونت را از سرور خود بارگذاری می‌کنید:
  اطمینان حاصل کنید که سرور شما به درستی هدرهای CORS را ارسال کند. اگر به اشتباه تنظیم نشده باشد، مرورگر از بارگذاری فونت جلوگیری خواهد کرد.

2. کدهای فشرده‌سازی یا مینیفای (Minification)

در فرآیند مینیفای کردن (فشرده‌سازی) فایل‌های CSS و JavaScript، برخی کدها و لینک‌ها به طور خودکار تغییر می‌کنند تا حجم فایل‌ها کاهش یابد و زمان بارگذاری سایت بهبود یابد. اما در این فرآیند، ممکن است که لینکی به فونت به اشتباه تغییر کند یا حذف شود که باعث می‌شود فونت بارگذاری نشود.

مشکل:

در زمان استفاده از ابزارهای مینیفای، ممکن است لینک‌های فونت یا کدهای مربوط به بارگذاری فونت به اشتباه دستکاری شوند. به عنوان مثال، مسیر فایل فونت یا لینک @font-face در هنگام مینیفای کردن تغییر کند یا به اشتباه حذف شود.

راه‌حل:

برای جلوگیری از این مشکل، دو راه‌حل اصلی وجود دارد:

• استثناگذاری کد فونت‌ها از فرآیند مینیفای:
  اگر از ابزارهایی مثل Terser (برای JavaScript) یا CSSMinifier (برای CSS) استفاده می‌کنید، می‌توانید فونت‌ها را از فرآیند مینیفای کردن استثناگذاری کنید.
  
  برای css:
  اگر از Webpack استفاده می‌کنید، می‌توانید در تنظیمات css-loader از ویژگی exclude استفاده کنید

{
,test: /\.css$/
,exclude: /fonts/
use: [‘style-loader’, ‘css-loader’]
}

یا اگر از ابزار مینیفایینگ خاصی مثل clean-css استفاده می‌کنید، می‌توانید از گزینه‌های skip برای فونت‌ها استفاده کنید:

;const cleanCSS = new CleanCSS({ level: 2 })
;cleanCSS.minify([‘src/style.css’])

• بررسی مسیر فونت‌ها بعد از مینیفای کردن:
  پس از مینیفای کردن، باید بررسی کنید که مسیرها و کدهای فونت به درستی در فایل‌های نهایی وجود داشته باشند. اگر ابزار مینیفای مسیر فونت‌ها را تغییر داده باشد، باید این تغییرات را در کد CSS یا JavaScript خود اصلاح کنید.
  
  به عنوان مثال، اگر مسیر فایل فونت در CSS به /fonts/myfont.woff2 باشد و پس از مینیفای به چیزی مثل /fonts/myfont.min.woff2 تغییر کند، باید آن را در فایل نهایی CSS اصلاح کنید.
  

کلام آخر

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

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