Falta el encabezado de respuesta del uso compartido de recursos entre dominios (CORS)
Navegadores:
- Firefox (3.5 o superior)
- Internet Explorer (9+)
- Chrome (37 o más)
Descripción general
Chrome, Firefox y las versiones más recientes de Internet Explorer aplican el estándar del uso compartido de recursos entre dominios y, por lo tanto, solo renderizan las fuentes web que se entregan con el encabezado de respuesta "Access-Control-Allow-Origin". Como las fuentes de Google se pueden ver en cualquier dominio, las fuentes se entregan con el siguiente encabezado de respuesta:
Access-Control-Allow-Origin:*
Causa posible
Algunos proxies pueden quitar el encabezado de la respuesta, después de lo cual el navegador no renderizará las fuentes.
Diagnóstico
Con Chrome, verifica el mensaje de advertencia relevante en la consola de DevOps.
Con Firefox, se puede usar la extensión Firebug o la de encabezados HTTP activos para ver los encabezados de respuesta a fin de confirmar la presencia del encabezado de respuesta de CORS.
Vínculos
Las fuentes web no aparecen en Firefox cuando se instala el complemento NoScript.
Navegadores: * Firefox (3.5+)
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, ve a la pestaña Incorporaciones y desmarca la opción: Prohibir @font-face.
No se muestran las fuentes web
Navegadores: * Todos
Descripción general
No se muestran las fuentes web que usaste.
Causa posible
Hay un error en la URL de la API o se solicitó un estilo que no es compatible con la fuente.
Solución
Asegúrate de que la URL tenga el formato correcto, de que se respete el caso en el nombre de la fuente (p.ej., Droid Serif not droid serif), que se respete la sintaxis del peso y los estilos, así como la sintaxis para cargar varias familias (consulta la documentación: Introducción - Sintaxis). Cuando no se muestran las fuentes, observar el contenido de la hoja de estilo puede brindar más información sobre el problema. Copia y pega la URL en tu navegador y asegúrate de que no veas ningún mensaje de error. Por ejemplo, si solicitas un peso no admitido por Droid Serif, se mostrará 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: * Todos
Descripción general
Las fuentes se ven más gruesas cuando se usan en un encabezado (h1, h2, etc.) aunque la fuente sea normal (400).
Causa posible
El navegador aplicó negrita al texto.
Solución
Asegúrate de que se especifique el grosor de fuente correcto en tu regla de CSS cuando apliques una fuente a un encabezado:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}