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:
@@ -5,7 +5,7 @@
|
|||||||
* NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
|
* NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
|
||||||
*
|
*
|
||||||
* Componentes Bootstrap incluidos:
|
* Componentes Bootstrap incluidos:
|
||||||
* - System Fonts (CERO flash - sin @font-face externos)
|
* - Fonts (@font-face Poppins)
|
||||||
* - Variables CSS (:root)
|
* - Variables CSS (:root)
|
||||||
* - Resets (box-sizing, body)
|
* - Resets (box-sizing, body)
|
||||||
* - Container system
|
* - Container system
|
||||||
@@ -30,29 +30,45 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
SYSTEM FONTS - CERO Flash (sin fuentes externas)
|
CRITICAL FONTS (Poppins - LCP optimization)
|
||||||
|
|
||||||
Usa fuentes nativas del sistema operativo:
|
font-display: swap + preload = fuente carga rapido y siempre se muestra
|
||||||
- macOS/iOS: -apple-system, BlinkMacSystemFont
|
size-adjust: 100.6% = fallback casi identico a Poppins (minimiza CLS)
|
||||||
- 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 {
|
:root {
|
||||||
/* System Font Stack - CERO flash garantizado */
|
/* Fonts */
|
||||||
--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
|
--bs-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
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) */
|
/* Theme Colors (críticos para above-the-fold) */
|
||||||
--color-navy-dark: #0E2337;
|
--color-navy-dark: #0E2337;
|
||||||
|
|||||||
@@ -2,12 +2,10 @@
|
|||||||
* Sistema de Tipografías - ROI Theme
|
* Sistema de Tipografías - ROI Theme
|
||||||
*
|
*
|
||||||
* RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
|
* RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
|
||||||
|
* - Declaraciones @font-face (comentadas - usar Google Fonts)
|
||||||
* - Variables CSS de tipografía (:root)
|
* - Variables CSS de tipografía (:root)
|
||||||
* - Clases utilitarias de fuentes
|
* - Clases utilitarias de fuentes
|
||||||
*
|
*
|
||||||
* NOTA: Usando SYSTEM FONTS para CERO flash/parpadeo
|
|
||||||
* Las fuentes del sistema están disponibles instantáneamente.
|
|
||||||
*
|
|
||||||
* NO debe contener:
|
* NO debe contener:
|
||||||
* - Estilos de body (van en style.css)
|
* - Estilos de body (van en style.css)
|
||||||
* - Estilos de elementos HTML (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 {
|
:root {
|
||||||
/* Stack de fuentes del sistema - disponibles instantáneamente */
|
/* Stack de fuentes del sistema - Fallback */
|
||||||
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||||
'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
|
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
||||||
|
|
||||||
/* Fuente primaria - System fonts (CERO flash) */
|
/* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed)
|
||||||
--font-primary: var(--font-system);
|
'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */
|
||||||
|
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
|
|
||||||
/* Fuente para encabezados - System fonts */
|
/* Fuente para encabezados - Poppins con fallback ajustado */
|
||||||
--font-headings: var(--font-system);
|
--font-headings: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
|
|
||||||
/* Fuente para código (monospace) */
|
/* Fuente para código (monospace) */
|
||||||
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
|
--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
|
Fuentes Poppins alojadas localmente para:
|
||||||
garantizar CERO flash/parpadeo en la carga de página.
|
- 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)
|
Pesos incluidos: 400, 500, 600, 700
|
||||||
que están disponibles instantáneamente en todos los
|
Formato: WOFF2 (mejor compresión)
|
||||||
dispositivos sin necesidad de descarga.
|
|
||||||
|
|
||||||
Para reactivar Poppins en el futuro, descomentar las
|
Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
|
||||||
declaraciones @font-face y actualizar las variables
|
- size-adjust: 100.6% ajustado para coincidir mejor con Poppins
|
||||||
--font-primary y --font-headings.
|
- 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
|
UTILIDADES DE FUENTES
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -9,11 +9,10 @@ use ROITheme\Public\CriticalCSS\Domain\Contracts\CriticalCSSCacheInterface;
|
|||||||
* Inyecta CSS critico en wp_head
|
* Inyecta CSS critico en wp_head
|
||||||
*
|
*
|
||||||
* Prioridades:
|
* Prioridades:
|
||||||
|
* - P:-2 Font preload (antes de variables)
|
||||||
* - P:-1 Variables CSS (antes de Bootstrap)
|
* - P:-1 Variables CSS (antes de Bootstrap)
|
||||||
* - P:2 Responsive critico (despues de Bootstrap critico)
|
* - P:2 Responsive critico (despues de Bootstrap critico)
|
||||||
*
|
*
|
||||||
* NOTA: Font preload deshabilitado - usando system fonts para CERO flash
|
|
||||||
*
|
|
||||||
* @package ROITheme\Public\CriticalCSS\Infrastructure\Services
|
* @package ROITheme\Public\CriticalCSS\Infrastructure\Services
|
||||||
*/
|
*/
|
||||||
final class CriticalCSSInjector
|
final class CriticalCSSInjector
|
||||||
@@ -22,11 +21,23 @@ final class CriticalCSSInjector
|
|||||||
private readonly CriticalCSSCacheInterface $cache
|
private readonly CriticalCSSCacheInterface $cache
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fuentes criticas para preload (pesos usados en navbar above-the-fold)
|
||||||
|
*/
|
||||||
|
private const CRITICAL_FONTS = [
|
||||||
|
'/Assets/Fonts/poppins-v24-latin-regular.woff2', // 400 - body text
|
||||||
|
'/Assets/Fonts/poppins-v24-latin-600.woff2', // 600 - navbar brand
|
||||||
|
'/Assets/Fonts/poppins-v24-latin-700.woff2', // 700 - headings
|
||||||
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Registra hooks de WordPress
|
* Registra hooks de WordPress
|
||||||
*/
|
*/
|
||||||
public function register(): void
|
public function register(): void
|
||||||
{
|
{
|
||||||
|
// Font preload: P:-2 (antes de todo, incluso variables)
|
||||||
|
add_action('wp_head', [$this, 'preloadFonts'], -2);
|
||||||
|
|
||||||
// Variables CSS: P:-1 (antes de CriticalBootstrapService P:0)
|
// Variables CSS: P:-1 (antes de CriticalBootstrapService P:0)
|
||||||
add_action('wp_head', [$this, 'injectVariables'], -1);
|
add_action('wp_head', [$this, 'injectVariables'], -1);
|
||||||
|
|
||||||
@@ -38,6 +49,25 @@ final class CriticalCSSInjector
|
|||||||
add_action('wp_enqueue_scripts', [$this, 'dequeueInlinedCSS'], 999);
|
add_action('wp_enqueue_scripts', [$this, 'dequeueInlinedCSS'], 999);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inyecta preload links para fuentes criticas
|
||||||
|
*
|
||||||
|
* Resuelve el problema de "font swap" donde el fallback (106% size-adjust)
|
||||||
|
* causa un salto visual cuando Poppins se carga.
|
||||||
|
* Con preload, las fuentes llegan antes del primer paint.
|
||||||
|
*/
|
||||||
|
public function preloadFonts(): void
|
||||||
|
{
|
||||||
|
echo "<!-- TIPO 4: Font preload para evitar CLS -->\n";
|
||||||
|
|
||||||
|
foreach (self::CRITICAL_FONTS as $font) {
|
||||||
|
printf(
|
||||||
|
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
|
||||||
|
esc_url(get_template_directory_uri() . $font)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Inyecta variables CSS criticas
|
* Inyecta variables CSS criticas
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user