En este documento, se proporciona información técnica sobre lo que sucede en segundo plano cuando solicitas una fuente web con la API de Google Fonts.
En este documento, también se proporciona información sobre el comportamiento específico del navegador.
Si solo deseas usar la API de Fuentes, no es necesario que leas esta página. Sin embargo, leer esta página puede ayudarte a mejorar el rendimiento cuando se carga.
¿Qué ofrece la API de Google Fonts?
Cuando un navegador envía una solicitud de una hoja de estilo de la API de Fonts (como se especifica en una etiqueta <link> en tu página web), la API de Fonts entrega una hoja de estilo generada para el usuario-agente específico que hace la solicitud.
Una solicitud de Inconsolata desde Firefox, por ejemplo, muestra el siguiente CSS:
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
Una solicitud de Internet Explorer, por otro lado, muestra lo siguiente:
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
Después de descargar el CSS, el navegador descarga la fuente en el formato adecuado para este.
Comportamiento específico del navegador
En esta sección, se describe el comportamiento predeterminado de cada navegador con fuentes web. Ten en cuenta que puedes controlar estos comportamientos con el Cargador de fuentes web.
Para obtener una lista de navegadores compatibles, consulta las Preguntas frecuentes.
Google Chrome
Chrome procesa el resto de la página, pero, hasta que se cargue la fuente, mostrará un espacio en blanco en lugar del texto que usa la fuente.
Mozilla Firefox
En primer lugar, Firefox muestra el texto en la fuente predeterminada y, luego, lo vuelve a renderizar una vez que se carga. Este comportamiento se conoce como un destello de texto sin estilo.
Apple Safari
Safari procesa el resto de la página, pero hasta que la fuente se carga, muestra un espacio en blanco en lugar del texto que usa la fuente.
Microsoft Internet Explorer
Internet Explorer procesa el resto de la página, pero hasta que se cargue la fuente, mostrará un espacio en blanco en lugar del texto que usa la fuente.
En términos más generales, el comportamiento de Internet Explorer puede variar según la ubicación y la existencia de varios elementos. Si deseas proporcionar un comportamiento coherente en todos los navegadores, usa el cargador de fuentes web. Por ejemplo, puedes elegir que todos los navegadores se comporten como Firefox.