perf(fonts): Self-host Poppins fonts
- Add WOFF2 font files for Poppins (400, 500, 600, 700 weights) - Create @font-face declarations in css-global-fonts.css - Remove Google Fonts dependency from enqueue-scripts.php - Remove preconnect hints for fonts.googleapis.com from seo.php Benefits: - Eliminates 36.2 kB external transfer from Google Fonts - Improves GDPR compliance (no Google tracking) - Reduces render-blocking requests - Faster font loading from local server 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -45,26 +45,22 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
POPPINS (Opcional - Solo si se activa)
|
POPPINS (Self-hosted)
|
||||||
============================================
|
============================================
|
||||||
|
|
||||||
Las siguientes declaraciones @font-face solo
|
Fuentes Poppins alojadas localmente para:
|
||||||
se cargan cuando el usuario activa "Use Custom Fonts"
|
- Eliminar dependencia de Google Fonts
|
||||||
en Apariencia > Personalizar > Tipografía.
|
- Mejorar rendimiento (sin requests externos)
|
||||||
|
- Cumplimiento GDPR (sin tracking de Google)
|
||||||
|
|
||||||
Para activar Poppins:
|
Pesos incluidos: 400, 500, 600, 700
|
||||||
1. Descargar archivos WOFF2 de Google Fonts
|
Formato: WOFF2 (mejor compresión)
|
||||||
2. Colocar en assets/fonts/poppins/
|
|
||||||
3. Descomentar las declaraciones @font-face
|
|
||||||
4. Activar en Customizer
|
|
||||||
|
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
||||||
/*
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
|
src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');
|
||||||
url('../fonts/poppins/Poppins-Regular.woff') format('woff');
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@@ -72,8 +68,7 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
|
src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2');
|
||||||
url('../fonts/poppins/Poppins-Medium.woff') format('woff');
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@@ -81,8 +76,7 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
|
src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
|
||||||
url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
@@ -90,21 +84,11 @@
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
|
src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2');
|
||||||
url('../fonts/poppins/Poppins-Bold.woff') format('woff');
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
/* Cuando Poppins esté activo, se aplica con clase .use-custom-fonts */
|
|
||||||
/*
|
|
||||||
.use-custom-fonts {
|
|
||||||
--font-primary: 'Poppins', var(--font-system);
|
|
||||||
--font-headings: 'Poppins', var(--font-system);
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
UTILIDADES DE FUENTES
|
UTILIDADES DE FUENTES
|
||||||
|
|||||||
BIN
assets/fonts/poppins-v24-latin-500.woff2
Normal file
BIN
assets/fonts/poppins-v24-latin-500.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/poppins-v24-latin-600.woff2
Normal file
BIN
assets/fonts/poppins-v24-latin-600.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/poppins-v24-latin-700.woff2
Normal file
BIN
assets/fonts/poppins-v24-latin-700.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/poppins-v24-latin-regular.woff2
Normal file
BIN
assets/fonts/poppins-v24-latin-regular.woff2
Normal file
Binary file not shown.
@@ -13,23 +13,20 @@ if (!defined('ABSPATH')) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue typography system
|
* Enqueue typography system
|
||||||
|
*
|
||||||
|
* SELF-HOSTED: Fuentes Poppins ahora se cargan desde Assets/fonts/
|
||||||
|
* Eliminada dependencia de Google Fonts para:
|
||||||
|
* - Mejorar rendimiento (sin requests externos)
|
||||||
|
* - Cumplimiento GDPR (sin tracking de Google)
|
||||||
|
* - Evitar bloqueo de renderizado
|
||||||
*/
|
*/
|
||||||
function roi_enqueue_fonts() {
|
function roi_enqueue_fonts() {
|
||||||
// Google Fonts - Poppins (según documentación INTRODUCCION.md)
|
// Fonts CSS local con @font-face para Poppins self-hosted
|
||||||
wp_enqueue_style(
|
|
||||||
'google-fonts-poppins',
|
|
||||||
'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap',
|
|
||||||
array(),
|
|
||||||
null,
|
|
||||||
'all'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Fonts CSS local
|
|
||||||
wp_enqueue_style(
|
wp_enqueue_style(
|
||||||
'roi-fonts',
|
'roi-fonts',
|
||||||
get_template_directory_uri() . '/Assets/css/css-global-fonts.css',
|
get_template_directory_uri() . '/Assets/css/css-global-fonts.css',
|
||||||
array('google-fonts-poppins'),
|
array(),
|
||||||
'1.0.0',
|
'1.1.0', // Bump version: self-hosted fonts
|
||||||
'all'
|
'all'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
15
inc/seo.php
15
inc/seo.php
@@ -113,19 +113,14 @@ function roi_seo_head_hooks() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add prefetch hints for external resources
|
* ELIMINADO: roi_prefetch_external()
|
||||||
*
|
*
|
||||||
* Improves performance by preemptively connecting to external domains
|
* Motivo: Fuentes Poppins ahora son self-hosted (Assets/fonts/)
|
||||||
* commonly used in the theme (fonts, CDNs, etc.)
|
* Ya no se necesita preconnect a Google Fonts
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0 - Creado
|
||||||
|
* @since 1.1.0 - Eliminado (self-hosted fonts)
|
||||||
*/
|
*/
|
||||||
function roi_prefetch_external() {
|
|
||||||
// Google Fonts prefetch
|
|
||||||
echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
|
|
||||||
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
|
|
||||||
}
|
|
||||||
add_action('wp_head', 'roi_prefetch_external', 1);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open Graph support for Rank Math compatibility
|
* Open Graph support for Rank Math compatibility
|
||||||
|
|||||||
Reference in New Issue
Block a user