Implementar system fonts por defecto - Issue #6
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>
This commit is contained in:
FrankZamora
@@ -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 <head> if using custom fonts)
|
||||
* <link rel="preload" href="/assets/fonts/CustomSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||
* <link rel="preload" href="/assets/fonts/CustomSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
||||
*/
|
||||
/* 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.
|
||||
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user