Fuentes de terceros

Es muy importante publicar las fuentes con rapidez: una entrega más rápida de la fuente no solo significa que el texto será visible para el usuario antes, sino que también tiene un gran impacto en los factores que determinan si una fuente cambia el diseño. Si no se puede entregar una fuente antes de ser necesaria, por lo general, habrá un cambio de diseño cuando se intercambie. El tamaño de este cambio de diseño puede variar según el nivel de coincidencia entre la fuente de resguardo y la fuente web. Para ver este fenómeno en acción, mira la demostración y compara los cambios de diseño que ocurren en una conexión rápida con una conexión lenta.

En el siguiente ejemplo, se combinan dos técnicas de rendimiento para cargar una fuente de terceros lo más rápido posible: el uso de declaraciones de fuentes intercaladas y el uso de sugerencias de recursos preconnect. Si bien en este fragmento de código se muestra cómo cargar fuentes de Google Fonts, estas técnicas también se aplican a otros proveedores de fuentes de terceros.

  • Declaraciones de fuentes intercaladas: Integrar declaraciones font-family en el documento principal, en lugar de incluir esta información en una hoja de estilo externa, permite que el navegador determine qué archivos de fuente se usarán en la página sin tener que esperar a que se descargue un archivo de hoja de estilo independiente. Esto es importante porque, en general, los navegadores no descargan archivos de fuentes hasta que saben que se usan en la página. En la mayoría de los casos, es preferible usar preload para cargar fuentes con las declaraciones de fuentes intercaladas.

  • Preconnect: La forma recomendada de cargar Google Fonts es usar la etiqueta <link> junto con las sugerencias de recursos preconnect. La sugerencia del recurso preconnect establece una conexión anticipada con el origen de terceros. En el siguiente fragmento de código, la primera sugerencia de recursos establece una conexión para descargar la hoja de estilo de fuente y la segunda configura una conexión para descargar archivos de fuente.

Ejemplo:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>