طراحی و المنتور

افزودن فونت سفارشی در المنتور و رفع مشکل نمایش

فونت مناسب به یکپارچگی ظاهر و خوانایی سایت فارسی کمک می‌کند. این مقاله افزودن فونت سفارشی در المنتور یا با CSS، تعریف وزن‌ها و رفع مشکلات مسیر، کش و بارگذاری را توضیح می‌دهد و نکات عملکرد و نمایش موبایل را مرور می‌کند.

علی جلادتی
1405/06/30
1405/07/10

فونت سفارشی در المنتور به هماهنگ شدن ظاهر سایت با هویت بصری کمک می‌کند. ابتدا مجوز استفاده وب از فونت را بررسی و فایل مناسب دریافت کنید. تغییر نام یک فایل دسکتاپ به woff2 آن را به فونت وب معتبر تبدیل نمی‌کند.

استفاده از Custom Fonts

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

بخش افزودن فونت سفارشی در رابط المنتور مقاله اولیه
بخش افزودن فونت سفارشی در رابط المنتور مقاله اولیه

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

روش CSS برای قالب یا ابزار سازگار

فایل دارای مجوز را در مسیر عمومی امن قرار دهید و قانون @font-face را در محل CSS مجاز قالب فرزند یا ابزار مربوط اضافه کنید. مسیر زیر نمونه است و باید با مسیر واقعی جایگزین شود:

@font-face {
  font-family: 'SitePersian';
  src: url('/fonts/site-persian-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.article-content {
  font-family: 'SitePersian', Tahoma, sans-serif;
}

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

رفع خطاهای نمایش فونت

اگر فونت بارگذاری نمی‌شود، مسیر فایل، پاسخ 404 و گواهی HTTPS را بررسی کنید. در میزبانی فونت روی دامنه دیگر، سیاست CORS می‌تواند مؤثر باشد. اگر فایل دریافت می‌شود اما ظاهر عوض نمی‌شود، اولویت CSS، نام خانواده و وزن انتخاب‌شده را بررسی کنید. سپس کش و فایل‌های تولیدی المنتور را مطابق ابزار نسخه خود بازسازی کنید.

خوانایی و عملکرد

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

ثبت نظر

اول وارد شوید.

نظرات

هنوز نظری ثبت نشده است.