عیب یابی

سرصفحه پاسخ اشتراک‌گذاری منابع متقاطع (CORS).

مرورگرها:

• Firefox (3.5+)
• اینترنت اکسپلورر (9+)
• Chrome (37+)

نمای کلی

کروم، فایرفاکس و نسخه‌های جدیدتر اینترنت اکسپلورر استاندارد اشتراک‌گذاری منابع Cross-Origin را اعمال می‌کنند و بنابراین فقط فونت‌های وب را با سرصفحه پاسخ مناسب «Access-Control-Allow-Origin» ارائه می‌کنند. از آنجایی که فونت های گوگل ممکن است در هر دامنه ای مشاهده شوند، فونت ها با سرصفحه پاسخ زیر ارائه می شوند:

Access-Control-Allow-Origin:*

علت بالقوه

برخی از پراکسی ها ممکن است سرصفحه را از پاسخ حذف کنند، پس از آن مرورگر فونت ها را رندر نمی کند.

تشخیص

با Chrome، پیام هشدار مربوطه را در کنسول DevTools بررسی کنید.

با فایرفاکس، می‌توان از افزونه‌های Firebug یا Live HTTP Headers برای مشاهده سرصفحه‌های پاسخ برای تأیید وجود هدر پاسخ CORS استفاده کرد.

پیوندها

• https://developer.mozilla.org/En/HTTP_access_control
• https://www.w3.org/TR/cors/

وقتی افزونه NoScript نصب می شود، فونت های وب در فایرفاکس نمایش داده نمی شوند

مرورگرها: * فایرفاکس (3.5+)

نمای کلی

وقتی افزونه NoScript نصب می شود فایرفاکس فونت های وب را نمایش نمی دهد.

علت بالقوه

به طور پیش فرض پلاگین NoScript قوانین @font-face را غیرفعال می کند.

راه حل

NoScript Options را باز کنید، به تب Embeddings بروید و تیک: Forbid @font-face را بردارید

فونت های وب نمایش داده نمی شوند

مرورگرها: * همه

نمای کلی

فونت های وب استفاده شده نشان داده نمی شوند.

علت بالقوه

خطایی در URL API وجود دارد یا سبکی درخواست شده است که توسط فونت پشتیبانی نمی شود.

راه حل

اطمینان حاصل کنید که URL به درستی قالب بندی شده است، حروف بزرگ و کوچک در نام فونت رعایت شده است (به عنوان مثال Droid Serif نه droid serif)، که نحو برای وزن و سبک ها و همچنین نحو برای بارگیری چندین خانواده رعایت می شود (به قسمت مراجعه کنید. مستندات: شروع به کار - نحو هنگامی که فونت ها نشان داده نمی شوند، نگاه کردن به محتوای صفحه می تواند اطلاعات بیشتری را در مورد اینکه چه چیزی اشتباه می کند را کپی و در مرورگر خود جایگذاری کنید و مطمئن شوید که هیچ پیام خطایی مشاهده نمی کنید. به عنوان مثال، درخواست وزنی که توسط Droid Serif پشتیبانی نمی شود، پیام خطای زیر را نشان می دهد:

/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */

فونت های وب وقتی در عنوان استفاده می شوند ضخیم تر به نظر می رسند

مرورگرها: * همه

نمای کلی

فونت ها هنگام استفاده در عنوان (h1، h2، و غیره) ضخیم تر به نظر می رسند، حتی اگر فونت وزن معمولی (400) باشد.

علت بالقوه

مرورگر متن را به صورت خودکار پررنگ کرد.

راه حل

هنگام اعمال فونت روی هدر، مطمئن شوید که وزن فونت صحیح در قانون CSS شما مشخص شده است:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}