CSS

Tutorial CSS: Fuentes web

Aprende a implementar y optimizar fuentes web con Google Fonts, @font-face y estrategias de carga para mejorar rendimiento y diseño en tus proyectos CSS.

Implementación de Google Fonts con link y @import

Las fuentes web nos permiten utilizar tipografías más allá de las que vienen instaladas por defecto en los dispositivos de los usuarios. Google Fonts es una de las bibliotecas gratuitas más populares, con cientos de fuentes optimizadas para la web que podemos incorporar fácilmente en nuestros proyectos.

Existen dos métodos principales para implementar Google Fonts en nuestros sitios web: mediante la etiqueta <link> en el HTML o utilizando la regla @import directamente en nuestro CSS. Veamos cada uno de estos métodos con detalle.

Método 1: Implementación con etiqueta link

El método más común y recomendado para implementar Google Fonts es utilizando la etiqueta <link> en la sección <head> de nuestro documento HTML. Este enfoque ofrece un mejor rendimiento en la mayoría de los casos.

Pasos para implementar Google Fonts con link:

Visita Google Fonts y selecciona la fuente que deseas utilizar
Selecciona los estilos de fuente necesarios (regular, negrita, itálica, etc.)
En el panel de selección, copia el código HTML con la etiqueta <link>
Pega este código en la sección <head> de tu HTML
Utiliza la fuente en tu CSS mediante la propiedad font-family

Ejemplo práctico:

Supongamos que queremos utilizar la fuente "Roboto" en nuestro sitio web. En el HTML añadimos:

<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

Luego, en nuestro CSS podemos aplicar la fuente:

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

Las etiquetas <link rel="preconnect"> establecen conexiones anticipadas con los servidores de Google Fonts, lo que mejora el rendimiento de carga. La tercera etiqueta <link> es la que realmente carga la fuente.

Método 2: Implementación con @import

El segundo método consiste en utilizar la regla @import directamente en nuestro archivo CSS. Esta técnica es más sencilla de implementar cuando no tenemos acceso directo al HTML o queremos mantener todos los recursos tipográficos en un solo lugar.

Pasos para implementar Google Fonts con @import:

Visita Google Fonts y selecciona la fuente deseada
En el panel de selección, selecciona la pestaña "CSS" para obtener el código @import
Copia este código y colócalo al principio de tu archivo CSS
Utiliza la fuente mediante la propiedad font-family

Ejemplo práctico:

Para implementar la misma fuente "Roboto" utilizando @import:

/* Al inicio de tu archivo CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Resto de tu CSS */
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

Selección de pesos y estilos específicos

Un aspecto importante al implementar Google Fonts es seleccionar únicamente los pesos y estilos que necesitamos. Cada variante adicional aumenta el tiempo de carga de la página.

En los ejemplos anteriores, hemos seleccionado dos pesos para la fuente Roboto:

wght@400: El peso normal (regular)
wght@700: El peso negrita (bold)

Si necesitáramos también la versión itálica, podríamos modificar la URL:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

Donde:

0,400: Regular (sin itálica, peso 400)
0,700: Bold (sin itálica, peso 700)
1,400: Itálica (con itálica, peso 400)

Comparación entre métodos

Método link:

Ventajas: Mejor rendimiento, carga paralela al CSS
Desventajas: Requiere acceso al HTML

Método @import:

Ventajas: Todo en un solo archivo CSS, más fácil de mantener
Desventajas: Puede bloquear la renderización hasta que se cargue la fuente

Implementación de múltiples fuentes

Podemos implementar varias fuentes en un mismo proyecto. Por ejemplo, una fuente para títulos y otra para el texto principal:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400&display=swap" rel="stylesheet">

O con @import:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400&display=swap');

Y luego aplicarlas en nuestro CSS:

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

p, li, a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

Uso de variables CSS con Google Fonts

Una práctica moderna es combinar Google Fonts con variables CSS para facilitar el mantenimiento:

:root {
  --heading-font: 'Montserrat', sans-serif;
  --body-font: 'Roboto', sans-serif;
}

h1 {
  font-family: var(--heading-font);
}

p {
  font-family: var(--body-font);
}

Esta técnica nos permite cambiar fácilmente las fuentes en todo el sitio modificando solo las variables.

Google Fonts es una herramienta esencial para los diseñadores web que desean ir más allá de las fuentes del sistema. Con estos métodos de implementación, podemos incorporar tipografías atractivas y profesionales en nuestros proyectos de manera sencilla y eficiente.

Sintaxis de @font-face para fuentes personalizadas

La regla @font-face es una herramienta fundamental en CSS que nos permite utilizar fuentes personalizadas en nuestros sitios web, más allá de las opciones que ofrece Google Fonts. Con esta técnica, podemos cargar archivos de fuentes que tengamos alojados en nuestro propio servidor o en cualquier otra ubicación accesible.

La sintaxis básica de @font-face consiste en declarar un nombre para nuestra fuente y especificar la ubicación del archivo que contiene dicha fuente. Veamos su estructura:

@font-face {
  font-family: 'NombreDeMiFuente';
  src: url('ruta/al/archivo/de/fuente.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Analicemos cada una de las propiedades principales que componen esta declaración:

font-family: Define el nombre personalizado que utilizaremos para referirnos a esta fuente en el resto de nuestro CSS. Podemos elegir cualquier nombre descriptivo.
src: Especifica la ubicación del archivo de la fuente mediante la función url() y opcionalmente el formato mediante format().
font-weight: Establece el peso de la fuente (normal, bold, 100-900). Es crucial cuando declaramos diferentes variantes de la misma familia.
font-style: Define si la fuente es normal, itálica u oblicua.
font-display: Controla cómo se debe mostrar la fuente durante su carga (swap, block, fallback, optional, auto).

Implementación básica

Veamos un ejemplo práctico de cómo implementar una fuente personalizada:

@font-face {
  font-family: 'MiTipografia';
  src: url('../fonts/mitipografia.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'MiTipografia', sans-serif;
}

En este ejemplo, hemos declarado una fuente llamada "MiTipografia" y la hemos aplicado a todos los encabezados <h1>. El valor sans-serif actúa como fuente de respaldo en caso de que nuestra fuente personalizada no se cargue correctamente.

Múltiples variantes de peso y estilo

Una familia tipográfica completa suele incluir diferentes variantes como negrita, itálica, etc. Podemos declarar cada variante con su propia regla @font-face:

/* Fuente regular */
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/opensans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* Fuente negrita */
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/opensans-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* Fuente itálica */
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/opensans-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

Lo importante es que todas las variantes comparten el mismo valor de font-family, pero tienen diferentes valores para font-weight y font-style. Esto permite al navegador seleccionar automáticamente la variante correcta cuando aplicamos estilos:

body {
  font-family: 'OpenSans', sans-serif;
}

strong {
  font-weight: 700; /* Usará opensans-bold.woff2 */
}

em {
  font-style: italic; /* Usará opensans-italic.woff2 */
}

Múltiples formatos para compatibilidad

Para garantizar la máxima compatibilidad entre navegadores, podemos proporcionar la misma fuente en varios formatos. El navegador elegirá el primer formato que soporte:

@font-face {
  font-family: 'MiTipografia';
  src: url('../fonts/mitipografia.woff2') format('woff2'),
       url('../fonts/mitipografia.woff') format('woff'),
       url('../fonts/mitipografia.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

El orden es importante: debemos colocar los formatos más eficientes y modernos primero (como WOFF2), seguidos por alternativas para navegadores más antiguos.

Uso de font-display para mejorar la experiencia

La propiedad font-display controla cómo se comporta el texto mientras se carga la fuente personalizada:

@font-face {
  font-family: 'MiTipografia';
  src: url('../fonts/mitipografia.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Los valores más comunes son:

swap: Muestra inmediatamente el texto con una fuente de respaldo y la reemplaza cuando la fuente personalizada está lista. Es la opción recomendada para la mayoría de los casos.
block: Oculta el texto brevemente hasta que la fuente personalizada esté disponible (con un límite de tiempo).
fallback: Similar a swap, pero con un período de bloqueo muy corto.
optional: Permite al navegador decidir si usar la fuente personalizada según las condiciones de la red.

Rutas relativas vs absolutas

Podemos especificar las rutas a nuestros archivos de fuentes de diferentes maneras:

/* Ruta relativa al archivo CSS */
@font-face {
  font-family: 'MiTipografia';
  src: url('../fonts/mitipografia.woff2') format('woff2');
}

/* Ruta absoluta desde la raíz del sitio */
@font-face {
  font-family: 'MiTipografia';
  src: url('/assets/fonts/mitipografia.woff2') format('woff2');
}

/* URL completa (CDN o servidor externo) */
@font-face {
  font-family: 'MiTipografia';
  src: url('https://micdn.com/fonts/mitipografia.woff2') format('woff2');
}

La elección dependerá de la estructura de tu proyecto y de dónde estén alojados los archivos de fuentes.

Uso de variables locales

Si el usuario tiene instalada la fuente en su sistema, podemos aprovecharla antes de descargar nuestra versión web:

@font-face {
  font-family: 'Helvetica';
  src: local('Helvetica Neue'),
       local('Helvetica'),
       url('../fonts/helvetica.woff2') format('woff2');
}

La función local() intenta utilizar la fuente instalada en el dispositivo del usuario antes de descargar el archivo especificado en url().

Ejemplo completo con todas las opciones

Veamos un ejemplo que combina todas las técnicas mencionadas:

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat Regular'),
       url('../fonts/montserrat-regular.woff2') format('woff2'),
       url('../fonts/montserrat-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}

Hemos añadido la propiedad unicode-range que permite especificar qué rangos de caracteres incluye esta fuente, lo que puede mejorar el rendimiento al cargar solo los caracteres necesarios.

La regla @font-face nos da un control total sobre las tipografías en nuestros proyectos web, permitiéndonos crear experiencias visuales únicas y consistentes en todos los dispositivos, sin depender exclusivamente de fuentes de sistema o servicios externos como Google Fonts.

Formatos de fuentes: WOFF2, WOFF, TTF y consideraciones de rendimiento

Al trabajar con fuentes web personalizadas, es fundamental entender los diferentes formatos disponibles y cómo afectan al rendimiento de nuestro sitio. Cada formato tiene características específicas que determinan su tamaño, compatibilidad con navegadores y velocidad de carga.

Los principales formatos de fuentes web son WOFF2, WOFF y TTF, cada uno con sus propias ventajas y casos de uso. Veamos en detalle cada uno de ellos:

WOFF2 (Web Open Font Format 2)

WOFF2 es el formato más moderno y eficiente para fuentes web. Desarrollado por Google, utiliza el algoritmo de compresión Brotli que ofrece una reducción de tamaño aproximadamente 30% mayor que su predecesor.

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Ventajas de WOFF2:

Ofrece la mejor compresión disponible (archivos hasta un 30% más pequeños que WOFF)
Carga más rápido, reduciendo el tiempo de renderizado
Soporta metadatos y subconjuntos de caracteres para optimización adicional

Compatibilidad: Chrome 36+, Firefox 39+, Edge 14+, Safari 12+, Opera 23+

WOFF (Web Open Font Format)

WOFF fue el primer formato diseñado específicamente para la web. Aunque menos eficiente que WOFF2, sigue ofreciendo buena compresión y mayor compatibilidad con navegadores antiguos.

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Ventajas de WOFF:

Mayor compatibilidad con navegadores que WOFF2
Buena compresión (archivos aproximadamente 40% más pequeños que TTF/OTF)
Incluye metadatos y licencias integradas

Compatibilidad: IE 9+, Chrome 5+, Firefox 3.6+, Safari 5.1+, Opera 11.5+

TTF (TrueType Font)

TTF es un formato más antiguo originalmente diseñado para sistemas operativos, no específicamente para web. Sin embargo, sigue siendo útil como formato de respaldo para navegadores más antiguos.

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Ventajas de TTF:

Amplia compatibilidad con navegadores antiguos
Buena calidad de renderizado en pantallas de baja resolución
Fácil de encontrar y trabajar (muchas fuentes se distribuyen en este formato)

Desventajas:

Archivos significativamente más grandes que WOFF/WOFF2
Sin compresión nativa para web
Mayor tiempo de carga

Compatibilidad: Android 2.2+, IE 9+ (con algunas limitaciones), y todos los navegadores modernos

Implementación con múltiples formatos

La mejor práctica es proporcionar múltiples formatos en orden de eficiencia, permitiendo que cada navegador seleccione el mejor formato que soporte:

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.woff2') format('woff2'),
       url('mifuente.woff') format('woff'),
       url('mifuente.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

El navegador intentará cargar el primer formato que reconozca, por lo que es crucial ordenarlos desde el más eficiente (WOFF2) hasta el más compatible (TTF).

Consideraciones de rendimiento

El uso de fuentes web puede afectar significativamente el rendimiento de carga de nuestro sitio. Aquí hay algunas consideraciones importantes:

1. Tamaño de los archivos

El tamaño de los archivos de fuentes varía considerablemente según el formato:

Ejemplo comparativo para una misma fuente:
- WOFF2: ~45KB
- WOFF: ~70KB
- TTF: ~120KB

Esta diferencia se multiplica por cada variante (negrita, itálica, etc.) y cada familia tipográfica que utilicemos.

2. Subconjuntos de caracteres (subsetting)

Una técnica efectiva para reducir el tamaño de los archivos de fuentes es incluir solo los caracteres que realmente necesitamos:

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF; /* Solo caracteres latinos básicos */
  font-weight: normal;
  font-style: normal;
}

La propiedad unicode-range especifica qué rangos de caracteres incluye el archivo. Esto es especialmente útil para sitios multilingües donde podemos cargar solo los caracteres necesarios para cada idioma.

3. Limitación de variantes

Cada variante de una fuente (regular, negrita, itálica, etc.) requiere descargar un archivo adicional. Es recomendable limitar las variantes a las estrictamente necesarias:

/* Solo incluimos las variantes esenciales */
@font-face {
  font-family: 'MiFuente';
  src: url('mifuente-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

4. Precargar fuentes críticas

Para las fuentes que se utilizan inmediatamente en el contenido visible, podemos usar la etiqueta <link rel="preload"> para iniciar la descarga lo antes posible:

<link rel="preload" href="fonts/mifuente.woff2" as="font" type="font/woff2" crossorigin>

Esta técnica es especialmente útil para fuentes utilizadas en el contenido "above the fold" (visible sin desplazamiento).

5. Comparativa de rendimiento

Para ilustrar el impacto de los diferentes formatos, consideremos un escenario con una fuente que incluye regular, negrita e itálica:

Tiempo de carga aproximado en una conexión 3G:
- Solo WOFF2: ~300ms
- WOFF2 + WOFF (fallback): ~350ms
- WOFF2 + WOFF + TTF (fallback completo): ~450ms

Estos tiempos pueden variar significativamente según el tamaño de la fuente y las condiciones de la red, pero ilustran el impacto potencial en el rendimiento.

Herramientas para optimización de fuentes

Existen varias herramientas que nos ayudan a optimizar nuestras fuentes web:

Font Squirrel Webfont Generator: Permite convertir fuentes a formatos web y crear subconjuntos.
Google Webfonts Helper: Facilita la descarga de fuentes de Google en todos los formatos para alojamiento local.
Fontello: Permite crear fuentes de iconos personalizadas incluyendo solo los iconos necesarios.

Ejemplo práctico optimizado

Veamos un ejemplo completo que implementa las mejores prácticas de rendimiento:

/* Fuente para caracteres latinos (Europa occidental) */
@font-face {
  font-family: 'OpenSans';
  src: url('opensans-regular-latin.woff2') format('woff2'),
       url('opensans-regular-latin.woff') format('woff');
  unicode-range: U+0000-00FF;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fuente para caracteres cirílicos (ruso, búlgaro, etc.) */
@font-face {
  font-family: 'OpenSans';
  src: url('opensans-regular-cyrillic.woff2') format('woff2'),
       url('opensans-regular-cyrillic.woff') format('woff');
  unicode-range: U+0400-04FF;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Este enfoque carga solo los caracteres necesarios según el idioma del contenido, utilizando los formatos más eficientes primero.

La elección del formato de fuente adecuado y la implementación de estrategias de optimización pueden marcar una diferencia significativa en el rendimiento de nuestro sitio web, especialmente en dispositivos móviles o conexiones lentas.

Estrategias de optimización de carga de fuentes web

La carga de fuentes web puede tener un impacto significativo en el rendimiento de nuestro sitio. Aunque ya hemos visto los formatos de fuentes y sus características, existen estrategias adicionales que podemos implementar para optimizar la carga de tipografías y mejorar la experiencia del usuario. Estas técnicas nos ayudarán a reducir el famoso "Flash of Invisible Text" (FOIT) y el "Flash of Unstyled Text" (FOUT).

Controlando el comportamiento de carga con font-display

La propiedad font-display es una herramienta fundamental para gestionar cómo se comportan las fuentes durante su proceso de carga:

@font-face {
  font-family: 'MiFuente';
  src: url('mifuente.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Estrategia de visualización */
}

Veamos las diferentes estrategias y cuándo usar cada una:

font-display: swap: Muestra inmediatamente el texto con una fuente de respaldo y la reemplaza cuando la fuente personalizada está lista. Ideal para contenido principal donde la legibilidad inmediata es prioritaria.
font-display: block: Oculta brevemente el texto (periodo de bloqueo corto) hasta que la fuente personalizada esté disponible. Útil cuando la identidad visual es crítica y un pequeño retraso es aceptable.
font-display: fallback: Combina un periodo de bloqueo muy corto con un periodo de intercambio limitado. Buen equilibrio entre rendimiento y estética.
font-display: optional: Permite al navegador decidir si usar la fuente personalizada según las condiciones de la red. Prioriza el rendimiento sobre la consistencia visual.
font-display: auto: Deja la estrategia a elección del navegador (generalmente similar a block).

Precarga de fuentes críticas

Para las fuentes que se utilizan en el contenido inicial visible (above the fold), podemos utilizar la etiqueta <link rel="preload"> para iniciar su descarga lo antes posible:

<link rel="preload" href="fonts/mifuente.woff2" as="font" type="font/woff2" crossorigin>

Esta técnica tiene varias ventajas:

Aumenta la prioridad de descarga de la fuente
Inicia la descarga antes de que el CSS sea procesado
Reduce significativamente el FOIT (Flash of Invisible Text)

Es importante usar esta técnica solo para fuentes críticas (las que aparecen inmediatamente en pantalla) para no competir por el ancho de banda con otros recursos esenciales.

Uso de la API Font Loading

La API Font Loading nos permite controlar programáticamente la carga de fuentes mediante JavaScript, ofreciendo mayor flexibilidad:

// Verificar soporte para la API
if ('FontFace' in window) {
  // Crear una nueva instancia de fuente
  const myFont = new FontFace('CustomFont', 'url(fonts/customfont.woff2)', {
    style: 'normal',
    weight: '400'
  });
  
  // Cargar la fuente
  myFont.load().then(function(loadedFace) {
    // Añadir la fuente al registro de fuentes del documento
    document.fonts.add(loadedFace);
    
    // Aplicar clase cuando la fuente esté cargada
    document.documentElement.classList.add('font-loaded');
  }).catch(function(error) {
    console.error('Error al cargar la fuente:', error);
  });
}

En el CSS, podemos usar esta clase para aplicar estilos condicionalmente:

body {
  font-family: Arial, sans-serif;
}

.font-loaded body {
  font-family: 'CustomFont', Arial, sans-serif;
}

Esta técnica nos permite implementar una estrategia de carga progresiva muy controlada.

Uso de fuentes variables

Las fuentes variables (Variable Fonts) representan una revolución en tipografía web, permitiendo múltiples variaciones de peso, anchura e inclinación en un solo archivo:

@font-face {
  font-family: 'RobotoFlex';
  src: url('robotoflex.woff2') format('woff2-variations');
  font-weight: 100 900; /* Rango de pesos disponibles */
  font-stretch: 75% 125%; /* Rango de anchuras */
  font-style: normal;
}

h1 {
  font-family: 'RobotoFlex', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'RobotoFlex', sans-serif;
  font-weight: 400;
}

Las ventajas de las fuentes variables incluyen:

Reducción drástica del tamaño total (un archivo en lugar de múltiples)
Mayor flexibilidad de diseño con valores intermedios
Mejor rendimiento de carga para sitios que utilizan múltiples variantes

Estrategia de carga con fuentes del sistema

Una técnica efectiva es utilizar fuentes del sistema como respaldo inicial, seleccionando aquellas que se parezcan a nuestra fuente personalizada:

body {
  /* Fuentes del sistema que se parecen a Helvetica/Arial */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Cuando la fuente personalizada esté disponible */
.fonts-loaded body {
  font-family: 'MiFuente', sans-serif;
}

Esta estrategia garantiza que el texto sea inmediatamente legible mientras se cargan las fuentes personalizadas, minimizando el cambio visual cuando estas se apliquen.

Técnica de carga en dos etapas

Para sitios con múltiples pesos y estilos, podemos implementar una carga en dos etapas:

Cargar primero solo el peso regular para el contenido principal
Cargar el resto de variantes en segundo plano

<!-- Primera etapa: solo regular (crítico) -->
<link rel="preload" href="fonts/opensans-regular.woff2" as="font" type="font/woff2" crossorigin>

<style>
  @font-face {
    font-family: 'OpenSans';
    src: url('fonts/opensans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  body {
    font-family: 'OpenSans', sans-serif;
  }
</style>

<!-- Segunda etapa: resto de variantes (no críticas) -->
<link rel="stylesheet" href="fonts-extended.css" media="print" onload="this.media='all'">

El archivo fonts-extended.css contendría las definiciones para las variantes adicionales:

/* Cargado en segundo plano */
@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

Uso de text-rendering y font-smooth

Podemos mejorar la calidad visual de nuestras fuentes con propiedades adicionales:

body {
  /* Optimiza la legibilidad */
  text-rendering: optimizeLegibility;
  
  /* Suavizado de fuentes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Estas propiedades mejoran la apariencia de las fuentes, especialmente en pantallas de alta resolución, aunque debemos usarlas con precaución ya que pueden afectar al rendimiento en dispositivos de gama baja.

Monitorización del rendimiento

Es fundamental medir el impacto de nuestras estrategias de carga de fuentes. Herramientas como Lighthouse o WebPageTest nos proporcionan métricas específicas:

First Contentful Paint (FCP): Cuándo se muestra el primer contenido
Largest Contentful Paint (LCP): Cuándo se carga el contenido principal
Cumulative Layout Shift (CLS): Cambios visuales durante la carga

Un CLS elevado suele indicar problemas con la carga de fuentes, como cambios bruscos cuando se aplica una fuente personalizada.

Ejemplo de estrategia completa optimizada

Veamos un ejemplo que combina varias de estas técnicas:

<head>
  <!-- Precarga de la fuente crítica -->
  <link rel="preload" href="fonts/opensans-regular-subset.woff2" as="font" type="font/woff2" crossorigin>
  
  <style>
    /* Fuente del sistema como fallback inicial */
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    /* Definición de la fuente con subconjunto de caracteres latinos básicos */
    @font-face {
      font-family: 'OpenSans';
      src: url('fonts/opensans-regular-subset.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      unicode-range: U+0000-00FF; /* Solo caracteres latinos básicos */
    }
    
    /* Aplicación de la fuente */
    .fonts-stage1-loaded body {
      font-family: 'OpenSans', sans-serif;
    }
  </style>
  
  <!-- Carga diferida del resto de variantes y conjuntos de caracteres -->
  <link rel="stylesheet" href="fonts-extended.css" media="print" onload="this.media='all'">
  
  <!-- Script para detectar cuando las fuentes están cargadas -->
  <script>
    if ('fonts' in document) {
      document.fonts.ready.then(function() {
        document.documentElement.classList.add('fonts-stage1-loaded');
      });
    } else {
      // Fallback para navegadores sin API Font Loading
      document.documentElement.classList.add('fonts-stage1-loaded');
    }
  </script>
</head>

Esta estrategia combina:

Precarga de la fuente principal
Uso de fuentes del sistema como respaldo inicial
Subconjunto de caracteres para la carga inicial
Carga diferida de variantes adicionales
Detección de cuándo las fuentes están listas

Consideraciones para sitios multilingües

Para sitios en varios idiomas, podemos cargar diferentes subconjuntos según el idioma detectado:

/* Para páginas en español */
@font-face {
  font-family: 'MiFuente';
  src: url('mifuente-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+00A0-00FF, U+0131, U+0152-0153;
  font-display: swap;
}

/* Para páginas en ruso */
@font-face {
  font-family: 'MiFuente';
  src: url('mifuente-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1;
  font-display: swap;
}

Esta técnica permite cargar solo los caracteres necesarios para cada idioma, reduciendo significativamente el tamaño de descarga.

La optimización de la carga de fuentes web es un equilibrio entre rendimiento y estética. Con las estrategias adecuadas, podemos ofrecer una experiencia tipográfica rica sin comprometer la velocidad de carga de nuestro sitio, mejorando tanto la experiencia de usuario como las métricas de rendimiento que influyen en el posicionamiento SEO.

Aprende CSS online

Otros ejercicios de programación de CSS

Evalúa tus conocimientos de esta lección Fuentes web con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Aprende a implementar y optimizar fuentes web con Google Fonts, @font-face y estrategias de carga para mejorar rendimiento y diseño en tus proyectos CSS.

Implementación de Google Fonts con link y @import

Método 1: Implementación con etiqueta link

Método 2: Implementación con @import

Selección de pesos y estilos específicos

Comparación entre métodos

Implementación de múltiples fuentes

Uso de variables CSS con Google Fonts

Sintaxis de @font-face para fuentes personalizadas

Implementación básica

Múltiples variantes de peso y estilo

Múltiples formatos para compatibilidad

Uso de font-display para mejorar la experiencia

Rutas relativas vs absolutas

Uso de variables locales

Ejemplo completo con todas las opciones

Formatos de fuentes: WOFF2, WOFF, TTF y consideraciones de rendimiento

WOFF2 (Web Open Font Format 2)

WOFF (Web Open Font Format)

TTF (TrueType Font)

Implementación con múltiples formatos

Consideraciones de rendimiento

1. Tamaño de los archivos

2. Subconjuntos de caracteres (subsetting)

3. Limitación de variantes

4. Precargar fuentes críticas

5. Comparativa de rendimiento

Herramientas para optimización de fuentes

Ejemplo práctico optimizado

Estrategias de optimización de carga de fuentes web

Controlando el comportamiento de carga con font-display

Precarga de fuentes críticas

Uso de la API Font Loading

Uso de fuentes variables

Estrategia de carga con fuentes del sistema

Técnica de carga en dos etapas

Uso de text-rendering y font-smooth

Monitorización del rendimiento

Ejemplo de estrategia completa optimizada

Consideraciones para sitios multilingües

Otros ejercicios de programación de CSS

Todas las lecciones de CSS

Introducción Y Entorno

Introducción Y Entorno

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Sintaxis De Selectores Y Propiedades

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Estilización De Texto Y Fondo

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Modelo Caja

Posicionamiento

Flexbox

Flexbox

Flexbox

Flexbox

Css Grid

Css Grid

Diseño Responsive

Diseño Responsive