Encabezado de respuesta faltante de uso compartido de recursos entre dominios (CORS)
Navegadores:
- Firefox (3.5 o superior)
- Internet Explorer (9 o superior)
- Chrome (37 o superior)
Descripción general
Chrome, Firefox y las versiones más recientes de Internet Explorer aplican el control de origen cruzado uso compartido de recursos estándar y, por lo tanto, solo renderiza las fuentes web que se entregan con el encabezado de respuesta “Access-Control-Allow-Origin” adecuado. Como Google Fonts puede pueden verse en cualquier dominio, las fuentes se muestran con la siguiente respuesta: encabezado:
Access-Control-Allow-Origin:*
Causa posible
Algunos proxies pueden quitar el encabezado de la respuesta y, luego, el navegador no renderizará las fuentes.
Diagnosticando
Con Chrome, busca el mensaje de advertencia relevante en la Consola de Herramientas para desarrolladores.
Con Firefox, se pueden usar las extensiones de Firebug o de encabezados HTTP en vivo para ver los encabezados de respuesta para confirmar la presencia del encabezado de respuesta de CORS
Vínculos
Las fuentes web no aparecen en Firefox cuando el complemento NoScript está instalado
Navegadores: * Firefox (3.5 o superior)
Descripción general
Firefox no muestra fuentes web cuando el complemento NoScript está instalado.
Causa posible
De forma predeterminada, el complemento NoScript inhabilita las reglas @font-face.
Solución
Abre las opciones de NoScript, dirígete a la pestaña Incorporaciones y desmarca Prohibir. @font-face
No aparecen las fuentes web
Navegadores: * Todas
Descripción general
No se muestran las fuentes web utilizadas.
Causa posible
Hay un error en la URL de la API o un estilo que no es compatible con la fuente se solicitó.
Solución
Asegúrate de que la URL tenga el formato correcto, que se respete el caso en la sección nombre de la fuente (p.ej., Droid Serif no droid serif) que la sintaxis para el peso y estilos, y también la sintaxis para cargar múltiples familias (consulta el documentación: Getting Started - Syntax. Cuando las fuentes no aparecen, observar el contenido de la hoja de estilo puede más información sobre lo que va mal. Copia y pega la URL en tu navegador y asegúrate de que no veas ningún mensaje de error. Por ejemplo, solicita un peso no admitido por Se mostrará Droid Serif. el siguiente mensaje de error:
/* 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. */
Las fuentes web se ven más gruesas cuando se usan en un encabezado
Navegadores: * Todas
Descripción general
Las fuentes se ven más gruesas cuando se usan en un encabezado (h1, h2, etc.), aunque la fuente es un peso normal (400).
Causa posible
El navegador aplicó negrita automáticamente al texto.
Solución
Asegúrate de que se especifique el grosor de fuente correcto en la regla de CSS cuando aplicar una fuente a un encabezado:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}