CSS
Carga y configura fuentes web con @font-face, formatos modernos, font-display, subsets, ejes variables y fallbacks que reduzcan cambios de layout.
registra una fuente descargable y define cómo participa en matching.
@font-face@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}WOFF2 es el formato web principal moderno. No cargues TTF/OTF grandes si no son necesarios.
@font-face {
font-family: "Example";
src: url("regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}Si declaras todos los archivos como 400 normal, el browser no puede seleccionar weights/styles correctamente.
auto → estrategia del navegador
block → breve bloqueo y luego fallback
swap → fallback inmediato, cambia al cargar
fallback → periodo corto de swap
optional → puede no descargar en condiciones lentasLa elección equilibra identidad, legibilidad y layout shift.
Una fuente fallback con métricas diferentes cambia líneas y alturas.
Descriptores útiles:
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}Necesitan medición; no copies valores de otra fuente.
@font-face {
font-family: "Inter Variable";
src: url("inter-var.woff2") format("woff2");
font-weight: 100 900;
}Un archivo puede cubrir un rango de weight y otros ejes.
.title {
font-variation-settings: "wght" 650, "slnt" -8;
}Prefiere propiedades de alto nivel (font-weight, font-style, font-stretch) para ejes registrados. Usa variation-settings para ejes custom o control específico.
body {
font-optical-sizing: auto;
}Permite que una variable font con eje óptico ajuste detalles según tamaño.
@font-face {
unicode-range: U+0000-00FF;
}Puede dividir fuentes por scripts. Una mala estrategia genera muchas solicitudes o caracteres con fallback inesperado.
<link
rel="preload"
href="/fonts/inter.woff2"
as="font"
type="font/woff2"
crossorigin
>Preload solo fuentes críticas realmente usadas temprano y con URL/CORS idénticos.
Self-hosting reduce dependencias, pero implica licencia, cache y updates. Un proveedor externo añade conexión, políticas y disponibilidad.
¿Por qué declarar un archivo bold como font-weight: 400 causa problemas?
Porque el algoritmo de matching lo trata como regular y puede elegirlo para solicitudes incorrectas o sintetizar otros pesos.
Wrapping, cortes y decoración de texto controla cómo se fragmentan las líneas.