928e543215
Cambios realizados: - Actualizado assets/css/fonts.css con stack de system fonts del template - System fonts por defecto (máximo rendimiento, 0 KB descargados) - Poppins opcional (comentado, para activar desde Customizer) - Variables CSS actualizadas (--font-system, --font-primary, --font-headings) - Utilidades de fuentes (font-weight, font-size, line-height) - Responsive font sizes para móvil, tablet y desktop - Font smoothing para mejor renderizado Stack de system fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif Beneficios: ✅ 0 HTTP requests ✅ 0 KB descargados ✅ Mejor LCP y Core Web Vitals ✅ Sin FOIT/FOUT Customizer ya configurado en inc/customizer-fonts.php para activar Poppins opcional si el usuario lo requiere. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
242 lines
6.6 KiB
CSS
242 lines
6.6 KiB
CSS
/**
|
|
* Sistema de Tipografías - APUS Theme
|
|
*
|
|
* 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 FONTS (Por defecto - Recomendado)
|
|
============================================ */
|
|
|
|
:root {
|
|
/* 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;
|
|
|
|
/* Fuente primaria - Por defecto usa system fonts */
|
|
--font-primary: var(--font-system);
|
|
|
|
/* Fuente para encabezados - Misma que body por defecto */
|
|
--font-headings: var(--font-system);
|
|
|
|
/* Fuente para código (monospace) */
|
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
|
|
Consolas, 'Courier New', monospace;
|
|
|
|
/* Tamaños de fuente base */
|
|
--font-size-base: 16px;
|
|
--line-height-base: 1.6;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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: '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: '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: '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;
|
|
}
|
|
*/
|
|
|
|
/* 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
|
|
============================================ */
|
|
|
|
/* 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-system {
|
|
font-family: var(--font-system) !important;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* 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; }
|
|
.leading-normal { line-height: 1.5; }
|
|
.leading-relaxed { line-height: 1.625; }
|
|
.leading-loose { line-height: 2; }
|
|
|
|
/* Text Transform */
|
|
.uppercase { text-transform: uppercase; }
|
|
.lowercase { text-transform: lowercase; }
|
|
.capitalize { text-transform: capitalize; }
|
|
.normal-case { text-transform: none; }
|
|
|
|
/* Font Smoothing */
|
|
.text-smooth,
|
|
.antialiased {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.subpixel-antialiased {
|
|
-webkit-font-smoothing: auto;
|
|
-moz-osx-font-smoothing: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE FONT SIZES
|
|
============================================ */
|
|
|
|
/* 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.
|
|
|
|
============================================ */
|