سرصفحه پاسخ اشتراک‌گذاری منابع متقاطع (CORS).
مرورگرها:
- Firefox (3.5+)
- اینترنت اکسپلورر (9+)
- Chrome (37+)
بررسی اجمالی
کروم، فایرفاکس و نسخه‌های جدیدتر اینترنت اکسپلورر استاندارد اشتراک‌گذاری منابع Cross-Origin را اعمال می‌کنند و بنابراین فقط فونت‌های وب را با سرصفحه پاسخ مناسب «Access-Control-Allow-Origin» ارائه می‌کنند. از آنجایی که فونت های گوگل ممکن است در هر دامنه ای مشاهده شوند، فونت ها با سرصفحه پاسخ زیر ارائه می شوند:
Access-Control-Allow-Origin:*
علت بالقوه
برخی از پراکسی ها ممکن است سرصفحه را از پاسخ حذف کنند، پس از آن مرورگر فونت ها را رندر نمی کند.
تشخیص
با Chrome، پیام هشدار مربوطه را در کنسول DevTools بررسی کنید.
با فایرفاکس، می‌توان از افزونه‌های Firebug یا Live HTTP Headers برای مشاهده سرصفحه‌های پاسخ برای تأیید وجود هدر پاسخ CORS استفاده کرد.
پیوندها
وقتی افزونه NoScript نصب می شود، فونت های وب در فایرفاکس نمایش داده نمی شوند
مرورگرها: * فایرفاکس (3.5+)
بررسی اجمالی
وقتی افزونه NoScript نصب می شود فایرفاکس فونت های وب را نمایش نمی دهد.
علت بالقوه
به طور پیش فرض پلاگین NoScript قوانین @font-face را غیرفعال می کند.
راه حل
NoScript Options را باز کنید، به تب Embeddings بروید و تیک: Forbid @font-face را بردارید
فونت های وب نمایش داده نمی شوند
مرورگرها: * همه
بررسی اجمالی
فونت های وب استفاده شده نشان داده نمی شوند.
علت بالقوه
خطایی در URL API وجود دارد یا سبکی درخواست شده است که توسط فونت پشتیبانی نمی شود.
راه حل
اطمینان حاصل کنید که URL به درستی قالب بندی شده است، حروف بزرگ و کوچک در نام فونت رعایت شده است (به عنوان مثال Droid Serif نه droid serif)، که نحو برای وزن و سبک ها و همچنین نحو برای بارگیری چندین خانواده رعایت می شود (به قسمت مراجعه کنید. مستندات: شروع به کار - نحو . وقتی فونت‌ها نمایش داده نمی‌شوند، نگاه کردن به محتوای شیوه نامه می‌تواند اطلاعات بیشتری در مورد اشتباهات ارائه دهد. URL را در مرورگر خود کپی و جای‌گذاری کنید و مطمئن شوید که هیچ پیام خطایی مشاهده نمی‌کنید. به عنوان مثال، درخواست وزنی که توسط 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;
}