/* =============================================================
POCHOLA — Fuentes de la herramienta (Inter + JetBrains Mono)
=============================================================
Por qué existe este archivo (auditoría de carga, 2026-08-16):
`index.html` ya había migrado sus fuentes a archivos .woff2
propios en fonts/ después de la auditoría de LCP de
Cloudflare Analytics (P99 de 11s, picos a 32s). Pero
`tramado.html` y las 4 apps de /apps/ seguían pidiéndoselas a
Google Fonts con un — que es una
petición BLOQUEANTE: el navegador no pinta nada hasta resolver
DNS de fonts.googleapis.com, negociar TLS, bajar el CSS, y
recién ahí descubrir que necesita bajar los .woff2 de un
SEGUNDO dominio (fonts.gstatic.com, otro DNS, otro TLS).
Eso son dos conexiones nuevas a terceros antes de que se vea
una sola letra de la herramienta.
Acá las mismas dos familias se sirven desde el propio dominio:
una sola conexión (la que ya está abierta), cacheable por
Cloudflare, y sin depender de que Google Fonts esté disponible
ni de su política de privacidad.
IMPORTANTE — no cambia el aspecto de nada. Son EXACTAMENTE las
mismas fuentes que servía Google (Inter y JetBrains Mono, subset
latin, mismos pesos), tomadas de los paquetes oficiales
@fontsource/inter y @fontsource/jetbrains-mono. Las dos son SIL
Open Font License 1.1 — se pueden auto-hospedar sin problema;
las licencias van en fonts/LICENSE-*.txt.
Pesos incluidos: solo los que el CSS del sitio usa de verdad
(Inter 400/500/600/700/800, JetBrains Mono 400/600). El
viejo de Google además pedía Inter 300, que no se usa en ningún
lado — no se incluye, para no bajar un archivo al pedo.
No se declara `unicode-range` a propósito: el subset latin ya
cubre todo el español (á é í ó ú ñ ü ¿ ¡ están todos por debajo
de U+00FF), y sin unicode-range el navegador puede caer glifo
por glifo a la fuente del sistema si algún día aparece un
carácter raro, en vez de no dibujarlo.
Las rutas de abajo son relativas A ESTE ARCHIVO (así funciona
`url()` en CSS), por eso el mismo archivo sirve igual para
/tramado.html que para /apps/nesting/index.html sin cambiar nada.
Ojo: `index.html` NO usa este archivo. Es autocontenida a
propósito (tiene sus @font-face inline, con Anton + IBM Plex) y
así se queda — ver el comentario en su .
============================================================= */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../../fonts/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../../fonts/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../../fonts/inter-800.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../../fonts/jetbrains-mono-600.woff2') format('woff2');
}
/* -------------------------------------------------------------
RESPALDOS CON MÉTRICAS AJUSTADAS (arreglo de CLS, 29/08/2026)
-------------------------------------------------------------
El problema: hasta que termina de bajar cada .woff2, el texto se
dibuja con la fuente del sistema (`font-display: swap`). Esa fuente
no mide lo mismo, así que cuando llega la real TODO el texto cambia
de ancho y la página se reacomoda. Google lo mide como CLS, y en los
datos reales de Cloudflare del 26-29/08/2026 el encabezado era de lo
que más se movía (24 % de las visitas en CLS "malo").
La solución: declarar la fuente de respaldo explícitamente y
deformarla para que MIDA lo mismo que la real. `size-adjust` la
estira o encoge de ancho; `ascent-override` y `descent-override` le
fijan el alto de línea. El texto se sigue viendo con la letra del
sistema el primer instante, pero ocupa el mismo lugar, así que
cuando llega la fuente real no se mueve nada.
De dónde salen los números: se midieron los .woff2 de verdad de
fonts/ contra las métricas de Arial (usando Liberation Sans,
que es métricamente idéntica) y de Courier New (Liberation Mono),
promediando el ancho de los caracteres sobre el texto real del
sitio. NO son valores copiados de un blog: si algún día se cambia
una fuente, hay que volver a medir.
`src: local(...)` no baja nada: usa una fuente que el equipo ya
tiene. Si no tiene ninguna de las tres, esta regla se ignora sola y
el navegador sigue con la fuente genérica de la pila, igual que
antes.
------------------------------------------------------------- */
@font-face {
font-family: 'Inter Fallback';
font-weight: 400;
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 105.9%;
ascent-override: 91.5%;
descent-override: 22.8%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'Inter Fallback';
font-weight: 500;
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 106.8%;
ascent-override: 90.7%;
descent-override: 22.6%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'Inter Fallback';
font-weight: 600;
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 107.7%;
ascent-override: 89.9%;
descent-override: 22.4%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'Inter Fallback';
font-weight: 700;
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 108.6%;
ascent-override: 89.2%;
descent-override: 22.2%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'Inter Fallback';
font-weight: 800;
src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
size-adjust: 109.7%;
ascent-override: 88.3%;
descent-override: 22.0%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'JetBrains Mono Fallback';
font-weight: 400;
src: local('Courier New'), local('Roboto Mono'), local('Liberation Mono'), local('DejaVu Sans Mono');
size-adjust: 100.0%;
ascent-override: 102.0%;
descent-override: 30.0%;
line-gap-override: 0.0%;
}
@font-face {
font-family: 'JetBrains Mono Fallback';
font-weight: 600;
src: local('Courier New'), local('Roboto Mono'), local('Liberation Mono'), local('DejaVu Sans Mono');
size-adjust: 100.0%;
ascent-override: 102.0%;
descent-override: 30.0%;
line-gap-override: 0.0%;
}