revert: restaurar Poppins - parpadeo de iconos persiste

Revertir cambio a system fonts porque el parpadeo de iconos
(Bootstrap Icons) sigue presente, haciendo el cambio innecesario.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-02 10:37:52 -06:00
parent ce66eeba6d
commit 7472dbad11
4 changed files with 135 additions and 43 deletions

View File

@@ -2,12 +2,10 @@
* Sistema de Tipografías - ROI Theme
*
* RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
* - Declaraciones @font-face (comentadas - usar Google Fonts)
* - Variables CSS de tipografía (:root)
* - Clases utilitarias de fuentes
*
* NOTA: Usando SYSTEM FONTS para CERO flash/parpadeo
* Las fuentes del sistema están disponibles instantáneamente.
*
* NO debe contener:
* - Estilos de body (van en style.css)
* - Estilos de elementos HTML (van en style.css)
@@ -18,20 +16,20 @@
*/
/* ============================================
SYSTEM FONTS - CERO Flash
SYSTEM FONTS (Por defecto - Recomendado)
============================================ */
:root {
/* Stack de fuentes del sistema - disponibles instantáneamente */
/* Stack de fuentes del sistema - Fallback */
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
/* Fuente primaria - System fonts (CERO flash) */
--font-primary: var(--font-system);
/* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed)
'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
/* Fuente para encabezados - System fonts */
--font-headings: var(--font-system);
/* Fuente para encabezados - Poppins con fallback ajustado */
--font-headings: 'Poppins', 'Poppins Fallback', sans-serif;
/* Fuente para código (monospace) */
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
@@ -48,22 +46,70 @@
*/
/* ============================================
POPPINS - DESHABILITADO
POPPINS (Self-hosted)
============================================
Las @font-face de Poppins fueron eliminadas para
garantizar CERO flash/parpadeo en la carga de página.
Fuentes Poppins alojadas localmente para:
- Eliminar dependencia de Google Fonts
- Mejorar rendimiento (sin requests externos)
- Cumplimiento GDPR (sin tracking de Google)
El sitio ahora usa fuentes del sistema (--font-system)
que están disponibles instantáneamente en todos los
dispositivos sin necesidad de descarga.
Pesos incluidos: 400, 500, 600, 700
Formato: WOFF2 (mejor compresión)
Para reactivar Poppins en el futuro, descomentar las
declaraciones @font-face y actualizar las variables
--font-primary y --font-headings.
Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
- size-adjust: 100.6% ajustado para coincidir mejor con Poppins
- font-display: swap + preload = carga rapida sin salto visual
- Preload en CriticalCSSInjector P:-2 acelera descarga de fuentes
NOTA: El valor 100.6% fue calibrado empiricamente.
- 106% causaba un salto visual notable (navbar se "achicaba")
- 100.6% minimiza el CLS manteniendo legibilidad del fallback
============================================ */
/* Fallback font con metricas ajustadas para Poppins */
@font-face {
font-family: 'Poppins Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
size-adjust: 106%;
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: 'Poppins';
src: url('../Fonts/poppins-v24-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../Fonts/poppins-v24-latin-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../Fonts/poppins-v24-latin-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('../Fonts/poppins-v24-latin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ============================================
UTILIDADES DE FUENTES
============================================ */