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:
@@ -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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
||||
Reference in New Issue
Block a user