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.
Aprende CSS y certifícateImplementació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 medianteformat()
.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 ablock
).
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.
Ejercicios de esta lección Fuentes web
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.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender cómo implementar Google Fonts mediante etiquetas link y la regla @import en CSS.
- Aprender a utilizar la regla @font-face para cargar fuentes personalizadas desde archivos locales o externos.
- Conocer los diferentes formatos de fuentes web (WOFF2, WOFF, TTF) y sus implicaciones en compatibilidad y rendimiento.
- Aplicar estrategias de optimización para la carga de fuentes web, minimizando impactos en la experiencia de usuario.
- Implementar técnicas avanzadas como precarga, font-display, uso de variables CSS y fuentes variables para mejorar la gestión tipográfica.