Las fuentes autoalojadas son archivos de fuentes que se entregan desde tus propios servidores, en lugar de los de un proveedor de fuentes de terceros (por ejemplo, Google Fonts).
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 entregar una fuente alojada en una ubicación propia lo más rápido posible: el uso de declaraciones de fuentes intercaladas y el formato de fuente WOFF2.
Declaraciones de fuentes intercaladas: Integrar las declaraciones
@font-faceyfont-familyen 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 usarpreloadpara cargar fuentes con las declaraciones de fuentes intercaladas.WOFF2: De las fuentes de fuente modernas, WOFF2 es la más nueva, tiene la compatibilidad con navegadores más amplia y ofrece la mejor compresión. Debido a que usa Brotli, WOFF2 se comprime un 30% mejor que WOFF.
Para mejorar aún más el rendimiento, considera usar la subconfiguración de fuentes. La subconfiguración de fuentes es la práctica de dividir un archivo de fuente en subconjuntos más pequeños, por lo general, con el objetivo de quitar los glifos que no se utilizan. Esto puede reducir significativamente el tamaño de archivo de una fuente. Las herramientas para crear subconjuntos de fuentes incluyen fontkit, subfont y gliphhanger.
Para obtener más información sobre las prácticas recomendadas para fuentes autoalojadas, consulta Cómo usar fuentes autoalojadas.
Ejemplo:
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>