diff --git a/wp-content/themes/apus-theme/assets/css/fonts.css b/wp-content/themes/apus-theme/assets/css/fonts.css
index 291f868a..ef073f9c 100644
--- a/wp-content/themes/apus-theme/assets/css/fonts.css
+++ b/wp-content/themes/apus-theme/assets/css/fonts.css
@@ -1,151 +1,166 @@
/**
- * Typography System - Self-hosted Fonts
+ * Sistema de Tipografías - APUS Theme
*
- * This file defines custom font faces and system font stacks.
- * Can be toggled via theme customizer to switch between custom and system fonts.
+ * Por defecto usa SYSTEM FONTS para máximo rendimiento y Core Web Vitals.
+ * Poppins es opcional y se carga solo si se activa en el Customizer.
+ *
+ * Basado en especificaciones del template del cliente.
*
* @package Apus_Theme
* @since 1.0.0
*/
-/* ==========================================================================
- System Font Stacks
- ========================================================================== */
-
-/**
- * System Font Stacks for maximum performance and native rendering
- * These provide excellent typography without any network requests
- */
+/* ============================================
+ SYSTEM FONTS (Por defecto - Recomendado)
+ ============================================ */
:root {
- /* System UI Font Stack - Best for general content */
- --font-system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ /* Stack de fuentes del sistema - Según especificación del template */
+ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
- /* Sans-serif Stack - Clean and modern */
- --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ /* Fuente primaria - Por defecto usa system fonts */
+ --font-primary: var(--font-system);
- /* Serif Stack - For elegant, traditional content */
- --font-serif: Georgia, "Times New Roman", Times, serif;
+ /* Fuente para encabezados - Misma que body por defecto */
+ --font-headings: var(--font-system);
- /* Monospace Stack - For code blocks and technical content */
- --font-mono: "Consolas", "Monaco", "Courier New", Courier, monospace;
+ /* Fuente para código (monospace) */
+ --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
+ Consolas, 'Courier New', monospace;
- /* Humanist Stack - Friendly and approachable */
- --font-humanist: "Seravek", "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
-
- /* Geometric Stack - Modern and geometric */
- --font-geometric: Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
-
- /* Default Font Stack */
- --font-primary: var(--font-system-ui);
- --font-secondary: var(--font-sans);
- --font-headings: var(--font-geometric);
- --font-code: var(--font-mono);
+ /* Tamaños de fuente base */
+ --font-size-base: 16px;
+ --line-height-base: 1.6;
}
-/* ==========================================================================
- Custom Font Faces (Example - Replace with actual custom fonts)
- ========================================================================== */
+/* Aplicar fuente del sistema por defecto */
+body {
+ font-family: var(--font-primary);
+ font-size: var(--font-size-base);
+ line-height: var(--line-height-base);
+ color: #333;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
-/**
- * To use custom fonts:
- * 1. Add font files to assets/fonts/
- * 2. Uncomment and configure @font-face declarations below
- * 3. Update CSS custom properties to use custom font families
- */
+/* Encabezados */
+h1, h2, h3, h4, h5, h6 {
+ font-family: var(--font-headings);
+ font-weight: 600;
+ line-height: 1.3;
+ color: #1a1a1a;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
+
+/* Código y preformateado */
+code, pre, kbd, samp {
+ font-family: var(--font-mono);
+ font-size: 0.9em;
+}
+
+/* ============================================
+ POPPINS (Opcional - Solo si se activa)
+ ============================================
+
+ Las siguientes declaraciones @font-face solo
+ se cargan cuando el usuario activa "Use Custom Fonts"
+ en Apariencia > Personalizar > Tipografía.
+
+ Para activar Poppins:
+ 1. Descargar archivos WOFF2 de Google Fonts
+ 2. Colocar en assets/fonts/poppins/
+ 3. Descomentar las declaraciones @font-face
+ 4. Activar en Customizer
+
+ ============================================ */
/*
@font-face {
- font-family: 'Custom Sans';
- src: url('../fonts/CustomSans-Regular.woff2') format('woff2'),
- url('../fonts/CustomSans-Regular.woff') format('woff');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+ font-family: 'Poppins';
+ src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
+ url('../fonts/poppins/Poppins-Regular.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Custom Sans';
- src: url('../fonts/CustomSans-Bold.woff2') format('woff2'),
- url('../fonts/CustomSans-Bold.woff') format('woff');
- font-weight: 700;
- font-style: normal;
- font-display: swap;
+ font-family: 'Poppins';
+ src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
+ url('../fonts/poppins/Poppins-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Custom Serif';
- src: url('../fonts/CustomSerif-Regular.woff2') format('woff2'),
- url('../fonts/CustomSerif-Regular.woff') format('woff');
- font-weight: 400;
- font-style: normal;
- font-display: swap;
+ font-family: 'Poppins';
+ src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
+ url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
+ url('../fonts/poppins/Poppins-Bold.woff') format('woff');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
}
*/
-/* ==========================================================================
- Font Loading Strategy
- ========================================================================== */
-
-/**
- * font-display: swap ensures text remains visible during font load
- * This prevents FOIT (Flash of Invisible Text) and improves LCP
- */
-
-/* ==========================================================================
- Optional: Custom Font Configuration
- ========================================================================== */
-
-/**
- * Uncomment to use custom fonts instead of system fonts
- * Make sure to define @font-face declarations above first
- */
-
+/* Cuando Poppins esté activo, se aplica con clase .use-custom-fonts */
/*
-body.use-custom-fonts {
- --font-primary: 'Custom Sans', var(--font-system-ui);
- --font-headings: 'Custom Sans', var(--font-geometric);
- --font-secondary: 'Custom Serif', var(--font-serif);
+.use-custom-fonts {
+ --font-primary: 'Poppins', var(--font-system);
+ --font-headings: 'Poppins', var(--font-system);
}
*/
-/* ==========================================================================
- Typography Utilities
- ========================================================================== */
+/* ============================================
+ UTILIDADES DE FUENTES
+ ============================================ */
-/**
- * Font weight utilities
- */
+/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
-/**
- * Font family utilities
- */
-.font-primary { font-family: var(--font-primary); }
-.font-secondary { font-family: var(--font-secondary); }
-.font-headings { font-family: var(--font-headings); }
-.font-mono { font-family: var(--font-code); }
-.font-serif { font-family: var(--font-serif); }
+/* Font Family Utilities */
+.font-system {
+ font-family: var(--font-system) !important;
+}
-/**
- * Font size utilities based on spacing scale
- */
-.text-xs { font-size: 0.75rem; } /* 12px */
-.text-sm { font-size: 0.875rem; } /* 14px */
-.text-base { font-size: 1rem; } /* 16px */
-.text-lg { font-size: 1.125rem; } /* 18px */
-.text-xl { font-size: 1.25rem; } /* 20px */
-.text-2xl { font-size: 1.5rem; } /* 24px */
-.text-3xl { font-size: 1.875rem; } /* 30px */
-.text-4xl { font-size: 2.25rem; } /* 36px */
+.font-mono {
+ font-family: var(--font-mono) !important;
+}
-/**
- * Line height utilities
- */
+/* Font Size Utilities */
+.text-xs { font-size: 0.75rem; line-height: 1.4; } /* 12px */
+.text-sm { font-size: 0.875rem; line-height: 1.5; } /* 14px */
+.text-base { font-size: 1rem; line-height: 1.6; } /* 16px */
+.text-lg { font-size: 1.125rem; line-height: 1.6; } /* 18px */
+.text-xl { font-size: 1.25rem; line-height: 1.5; } /* 20px */
+.text-2xl { font-size: 1.5rem; line-height: 1.4; } /* 24px */
+.text-3xl { font-size: 1.875rem; line-height: 1.3; } /* 30px */
+.text-4xl { font-size: 2.25rem; line-height: 1.2; } /* 36px */
+.text-5xl { font-size: 3rem; line-height: 1.1; } /* 48px */
+
+/* Line Height Utilities */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
@@ -153,32 +168,74 @@ body.use-custom-fonts {
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
-/**
- * Text transformation
- */
+/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
+.normal-case { text-transform: none; }
-/**
- * Font smoothing for better rendering
- */
+/* Font Smoothing */
+.text-smooth,
.antialiased {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.subpixel-antialiased {
- -webkit-font-smoothing: auto;
- -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: auto;
+ -moz-osx-font-smoothing: auto;
}
-/* ==========================================================================
- Performance Optimizations
- ========================================================================== */
+/* ============================================
+ RESPONSIVE FONT SIZES
+ ============================================ */
-/**
- * Preload hints for custom fonts (add to if using custom fonts)
- *
- *
- */
+/* Móviles (< 768px) */
+@media (max-width: 767px) {
+ :root {
+ --font-size-base: 15px;
+ }
+
+ h1 { font-size: 2rem; }
+ h2 { font-size: 1.75rem; }
+ h3 { font-size: 1.5rem; }
+ h4 { font-size: 1.25rem; }
+ h5 { font-size: 1.125rem; }
+ h6 { font-size: 1rem; }
+}
+
+/* Tablets (768px - 1024px) */
+@media (min-width: 768px) and (max-width: 1024px) {
+ :root {
+ --font-size-base: 16px;
+ }
+}
+
+/* Desktop (> 1024px) */
+@media (min-width: 1025px) {
+ :root {
+ --font-size-base: 16px;
+ }
+}
+
+/* ============================================
+ PERFORMANCE NOTES
+ ============================================
+
+ System Fonts Benefits:
+ ✅ 0 HTTP requests (fuentes ya en el sistema)
+ ✅ 0 KB descargados (mejora LCP)
+ ✅ Sin FOIT/FOUT (sin parpadeo de texto)
+ ✅ Mejor Core Web Vitals
+ ✅ Familiar para usuarios (fuentes nativas)
+
+ Custom Fonts (Poppins):
+ ⚠️ Requiere descarga (~30-50 KB por peso)
+ ⚠️ Impacto en LCP si no se optimiza
+ ✅ Branding consistente
+ ✅ Diseño específico del template
+
+ Recomendación: Mantener system fonts por defecto.
+ Solo activar Poppins si el branding lo requiere.
+
+ ============================================ */