En este documento, se brinda información técnica sobre lo que ocurre detrás las escenas cuando solicitas una fuente web con la API de Google Fonts.
Este documento también brinda información sobre el comportamiento específico del navegador.
Si solo quieres usar la API de Fonts, no es necesario que leas esta página. Sin embargo, leer esta página puede ayudarte a mejorar el rendimiento de carga de la página.
¿En qué consiste 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 la
<link> en tu página web), la API de Fonts publica una hoja de estilo generada para
el usuario-agente específico que realiza 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');
}
Por otro lado, una solicitud de Internet Explorer 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 archivo para el navegador.
Comportamiento específico del navegador
En esta sección, se describe el comportamiento predeterminado de cada navegador con las fuentes web. Ten en cuenta que puedes controlar estos comportamientos con el Cargador de fuentes web.
Para obtener una lista de los navegadores compatibles, consulta la Preguntas frecuentes
Google Chrome
Chrome renderiza el resto de la página, pero muestra la fuente hasta que se carga la fuente un espacio en blanco en lugar del texto que usa la fuente.
Mozilla Firefox
Firefox primero muestra el texto con la fuente predeterminada y luego vuelve a renderizarlo en la fuente una vez que se cargó. Este comportamiento se conoce como “destellos de imágenes ".
Apple Safari
Safari renderiza el resto de la página, pero aparece hasta que la fuente se carga. un espacio en blanco en lugar del texto que usa la fuente.
Microsoft Internet Explorer
Internet Explorer renderiza el resto de la página, pero hasta que se cargue la fuente, muestra un espacio en blanco en lugar del texto que usa la fuente.
En general, el comportamiento de Internet Explorer puede variar según la ubicación y la existencia de diversos elementos. Si quieres proporcionar un comportamiento coherente en todos los navegadores, usa el cargador de fuentes web. Para ejemplo, puedes elegir Hacer que todos los navegadores funcionen como Firefox.