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:
@@ -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;
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
* 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)
|
||||
@@ -16,20 +18,20 @@
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
SYSTEM FONTS (Por defecto - Recomendado)
|
||||
SYSTEM FONTS - CERO Flash
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
/* Stack de fuentes del sistema - Fallback */
|
||||
/* Stack de fuentes del sistema - disponibles instantáneamente */
|
||||
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||
'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
|
||||
/* 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 primaria - System fonts (CERO flash) */
|
||||
--font-primary: var(--font-system);
|
||||
|
||||
/* Fuente para encabezados - Poppins con fallback ajustado */
|
||||
--font-headings: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||
/* Fuente para encabezados - System fonts */
|
||||
--font-headings: var(--font-system);
|
||||
|
||||
/* Fuente para código (monospace) */
|
||||
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
|
||||
@@ -46,70 +48,22 @@
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
POPPINS (Self-hosted)
|
||||
POPPINS - DESHABILITADO
|
||||
============================================
|
||||
|
||||
Fuentes Poppins alojadas localmente para:
|
||||
- Eliminar dependencia de Google Fonts
|
||||
- Mejorar rendimiento (sin requests externos)
|
||||
- Cumplimiento GDPR (sin tracking de Google)
|
||||
Las @font-face de Poppins fueron eliminadas para
|
||||
garantizar CERO flash/parpadeo en la carga de página.
|
||||
|
||||
Pesos incluidos: 400, 500, 600, 700
|
||||
Formato: WOFF2 (mejor compresión)
|
||||
El sitio ahora usa fuentes del sistema (--font-system)
|
||||
que están disponibles instantáneamente en todos los
|
||||
dispositivos sin necesidad de descarga.
|
||||
|
||||
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
|
||||
Para reactivar Poppins en el futuro, descomentar las
|
||||
declaraciones @font-face y actualizar las variables
|
||||
--font-primary y --font-headings.
|
||||
|
||||
============================================ */
|
||||
|
||||
/* 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
|
||||
============================================ */
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user