refactor(fonts): cambiar a system fonts - CERO flash

- Eliminar @font-face de Poppins (critical-bootstrap.css, css-global-fonts.css)
- Actualizar --bs-body-font-family a system font stack
- Desactivar font preload en CriticalCSSInjector.php
- Actualizar bootstrap-subset.min.css

System fonts garantizan carga instantánea sin parpadeo.

🤖 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:29:01 -06:00
parent 565c275c16
commit ce66eeba6d
4 changed files with 43 additions and 135 deletions

View File

@@ -5,7 +5,7 @@
* NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
*
* Componentes Bootstrap incluidos:
* - Fonts (@font-face Poppins)
* - System Fonts (CERO flash - sin @font-face externos)
* - Variables CSS (:root)
* - Resets (box-sizing, body)
* - Container system
@@ -30,45 +30,29 @@
*/
/* ==========================================================================
CRITICAL FONTS (Poppins - LCP optimization)
SYSTEM FONTS - CERO Flash (sin fuentes externas)
font-display: swap + preload = fuente carga rapido y siempre se muestra
size-adjust: 100.6% = fallback casi identico a Poppins (minimiza CLS)
Usa fuentes nativas del sistema operativo:
- macOS/iOS: -apple-system, BlinkMacSystemFont
- Windows: Segoe UI
- Android: Roboto
- Linux: Ubuntu/Cantarell
- Fallback: sans-serif
VENTAJAS:
- 0 KB descarga (fuentes ya instaladas)
- 0 flash/parpadeo (disponibles instantaneamente)
- Mejor rendimiento LCP/FCP
- Familiar para usuarios (fuentes nativas)
========================================================================== */
@font-face {
font-family: 'Poppins Fallback';
src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
size-adjust: 106%;
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: 'Poppins';
src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* Fonts */
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
--bs-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif;
/* System Font Stack - CERO flash garantizado */
--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-primary: var(--font-system);
--bs-body-font-family: var(--font-system);
/* Theme Colors (críticos para above-the-fold) */
--color-navy-dark: #0E2337;