fix(fonts): eliminar CLS en navbar causado por font swap

- Agregar font preload en P:-2 para fuentes Poppins críticas (400, 600, 700)
- Cambiar font-display: optional → swap para garantizar carga de fuente
- Ajustar size-adjust: 106% → 100.6% para minimizar salto visual
- Nuevo orden prioridades: P:-2 → P:-1 → P:0 → P:1 → P:2 → P:3 → P:5

Archivos:
- CriticalCSSInjector.php: nuevo método preloadFonts()
- css-global-fonts.css: @font-face optimizado

🤖 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:01:12 -06:00
parent e01605ec37
commit d8fa5cb609
2 changed files with 47 additions and 10 deletions

View File

@@ -58,16 +58,21 @@
Formato: WOFF2 (mejor compresión)
Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
- size-adjust: 106% ajusta métricas del fallback para coincidir con Poppins
- Reduce layout shift cuando las fuentes se intercambian
- 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 métricas ajustadas para Poppins */
/* 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%;
size-adjust: 100.6%;
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
@@ -78,7 +83,7 @@
src: url('../Fonts/poppins-v24-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: optional;
font-display: swap;
}
@font-face {
@@ -86,7 +91,7 @@
src: url('../Fonts/poppins-v24-latin-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: optional;
font-display: swap;
}
@font-face {
@@ -94,7 +99,7 @@
src: url('../Fonts/poppins-v24-latin-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: optional;
font-display: swap;
}
@font-face {
@@ -102,7 +107,7 @@
src: url('../Fonts/poppins-v24-latin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: optional;
font-display: swap;
}
/* ============================================