Desde la introducción de las fuentes web en 2009, los diseñadores web han disfrutado de una rica gama de paletas tipográficas. Estas fuentes se utilizaron en gran medida a través de la regla @fontface de CSS, lo que permitió a los diseñadores liberarse de las fuentes seguras para la web (las del sistema).
Las grandes distribuidoras de tipografías, entre las que destaca Google Fonts, ofrecían (y siguen ofreciendo) una gran variedad de formatos de archivo para fuentes.
En aquel momento, utilizar fuentes web significaba trabajar con archivos separados para cada peso y estilo. Por ejemplo, nombres de archivo como los siguientes dejaban claro cómo se mostraría la fuente en uso:
Roboto-Italic.woff2
Lato-BoldItalic.woff2
OpenSans-SemiBold.ttf
WorkSans-ExtraBold.ttfCada variación tenía que cargarse como su propio archivo. Esto aumentaba el peso de la página, requería más peticiones HTTP y añadía complejidad a la hora de elegir y aplicar fuentes en un diseño.
El auge de las fuentes variables
En 2016 se produjo un gran avance en la tipografía digital: las fuentes variables. Desarrolladas conjuntamente por Google, Apple, Adobe y Microsoft, rápidamente se convirtieron en la tendencia predominante.
La característica distintiva de una fuente variable es que puede contener cualquiera de los siguientes elementos, cada uno de los cuales se conoce como eje:
| Eje | Propiedad CSS |
| peso | font-weight |
| estilo | font-style: italic |
| inclinación | font-style: oblique |
| elasticidad | font-stretch |
| Eje de tamaño óptico (opsz) | font-variations-setting |
El formato de archivo más utilizado es .woff2 (Web Open Font Format), un formato muy comprimido que se convirtió en Recomendación del W3C en 2018. Aunque formatos como .ttf y .otf pueden utilizarse como fuente variable, el formato más eficiente es .woff2. Todos los navegadores modernos admiten fuentes variables.
Para mayor claridad, aquí hacemos una distinción entre «fuentes web» y «fuentes variables». Sin embargo, en la práctica, es habitual ver que las fuentes variables se engloban dentro del grupo de las fuentes web.
¿Por qué utilizar fuentes variables?
Hay tres razones destacadas para utilizar fuentes variables en tus proyectos:
- Mejor rendimiento: En lugar de llamar a varios archivos de fuentes separados (Normal, Negrita, Cursiva, etc.), un archivo de fuentes variables puede abarcarlos todos. Eso significa menos peticiones HTTP y tiempos de carga más rápidos.
- Flexibilidad de diseño: Las fuentes variables te permiten un control muy preciso. Por ejemplo, en lugar de estar limitado a
font-weight: 500o600, puedes establecer un valor personalizado como532. - Tipografía con capacidad de respuesta: Como las fuentes variables pueden adaptarse sin problemas, puedes crear tipografías que respondan en todos los dispositivos. Un buen ejemplo: usar
font-weight: clamp()para escalar el peso entre ventanas gráficas, sin los «saltos» bruscos que obtendrías con archivos de fuentes estáticas.
Cómo utiliza WordPress las fuentes variables
Con el lanzamiento de WordPress 6.1 en noviembre de 2022, se añadió la compatibilidad con fuentes variables al sistema theme.json. La primera demostración de esto fue en el tema Twenty Twenty-Three.
Personalizar un tema con fuentes variables
Cuando trabajamos con un tema hijo de TT5, comenzamos por poner en cola los estilos tanto del tema padre como del tema hijo.
Para asegurarnos de que nuestros tipos de letra personalizados aparecen de forma coherente tanto en el editor como en el front-end, también ponemos en cola un archivo fonts.css que incluye las declaraciones @font-face necesarias.
<?php
// enqueue parent and child styles
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style'),
wp_get_theme()->get('Version')
);
// enqueue custom fonts
wp_enqueue_style(
'child-fonts',
get_stylesheet_directory_uri() . '/fonts.css',
array(),
wp_get_theme()->get('Version')
);
});Como siempre, la forma de poner en cola las secuencias de comandos depende del propio tema. No existe un único método estándar.
Para asegurarnos de que hemos configurado correctamente nuestro tema hijo, ejecutamos esta prueba en styles.css:
body { background: #0000ff; }Añadir fuentes con theme.json
TT5 ya incluye dos fuentes variables por defecto: Manrope y Fira Code. Para este ejemplo, vamos a añadir Vollkorn y la convertiremos en la fuente predeterminada para los encabezados con un peso de 600.
Aquí está la parte relevante de theme.json:
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"fontFamily": "Manrope",
"src": ["file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"],
"fontWeight": "200 800",
"fontStyle": "normal"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"fontFamily": ""Fira Code"",
"src": ["file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"],
"fontWeight": "300 700",
"fontStyle": "normal"
}
]
},
{
"name": "Vollkorn",
"slug": "vollkorn",
"fontFamily": "Vollkorn, serif",
"fontFace": [
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "normal"
},
{
"fontFamily": "Vollkorn",
"src": ["file:../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2"],
"fontWeight": "400 900",
"fontStyle": "italic"
}
]
}
],
"customFontSize": true,
"fluid": true
}
},
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|manrope"
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|vollkorn",
"fontWeight": "600"
}
}
}
}
}El resultado es la aparición de la fuente Vollkorn en todo el sitio.
Varias cosas a tener en cuenta:
- Te recomendamos copiar los archivos de Manrope y Fira Code en tu tema hijo, en caso de que TT5 se actualice y cambien las rutas a los archivos.
- Puede parecer que el código para esas fuentes es redundante, puesto que ya están registradas por el tema padre. Sin embargo, declararlos en tu tema hijo es importante. Esto garantiza que se muestren correctamente en la interfaz de usuario de la biblioteca de fuentes y que sigan estando disponibles aunque el tema principal se actualice con nuevas rutas de archivos o cambios.
- Estamos haciendo referencia a dos archivos Vollkorn diferentes.
Garantizar que las fuentes se cargan correctamente
A veces las fuentes no se muestran correctamente en el front-end hasta que las declaras en CSS. Aquí tienes un ejemplo típico de styles.css:
/*
Theme Name: TT5 Child
Template: twentytwentyfive
Version: 1.0
*/
/* Ensure fonts are loaded and applied */
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}
code,
pre {
font-family: 'Fira Code', 'Courier New', monospace;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Vollkorn', 'Times New Roman', serif;
}Y en fonts.css, declaramos los archivos de fuentes utilizando @font-face. Esto garantiza que el navegador sepa qué fuentes cargar y aplicar. Si quieres precargar realmente fuentes críticas (por ejemplo, tu fuente de encabezado principal), también puedes añadir un <link rel="preload"> al <head> del sitio a través de los hooks de WordPress. En la mayoría de los casos, la regla @font-face con font-display: swap proporciona un buen equilibrio entre rendimiento y experiencia de usuario.
/* Preload critical fonts for better performance */
@font-face {
font-family: 'Manrope';
src: url('../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Code';
src: url('../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Vollkorn';
src: url('../twentytwentyfive/assets/fonts/vollkorn/Vollkorn-Italic-VariableFont_wght.woff2')
format('woff2');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}El resultado es una página en la que los encabezados, por defecto, son Vollkorn con un peso de fuente de 600.
Si lo prefieres, puedes incluir las reglas @font-face directamente en styles.css. Esto también eliminaría la necesidad de poner en cola el archivo fonts.css.
Facilitar a los usuarios la elección del peso de las fuentes
Una de las mayores ventajas de las fuentes variables es que los pesos no están limitados a pasos fijos como 400 ó 600. Puedes utilizar cualquier valor entre 100-900. El problema es que WordPress no proporciona una interfaz de usuario para elegir estos pesos personalizados.
Para solucionarlo, hemos creado un plugin mínimo llamado Font Weight Options. Añade una página de configuración en Apariencia > Peso de fuente, donde puedes definir pesos personalizados para el cuerpo del texto, los encabezados y los bloques de código.
Aquí se muestra una visión simplificada de la lógica central:
<?php
/**
* Plugin Name: Font Weight Options
*/
class Font_Weight_Options {
public function __construct() {
add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
add_action( 'wp_head', array( $this, 'apply_font_weights_frontend' ) );
}
public function add_admin_menu() {
add_theme_page(
__( 'Font Weight Settings', 'font-weight-options' ),
__( 'Font Weight', 'font-weight-options' ),
'manage_options',
'font-weight-settings',
array( $this, 'render_admin_page' )
);
}
public function apply_font_weights_frontend() {
$weights = get_option( 'fwo_font_weights', array(
'body' => 400,
'headings' => 600,
'code' => 400,
) );
echo "<style>
body { font-weight: {$weights['body']} !important; }
h1, h2, h3, h4, h5, h6 { font-weight: {$weights['headings']} !important; }
code, pre { font-weight: {$weights['code']} !important; }
</style>";
}
}
new Font_Weight_Options();El fragmento anterior muestra la lógica principal. Hemos publicado el código fuente completo en GitHub Gist por si quieres ver el plugin completo, incluyendo el formulario de configuración y la validación.
La versión completa añade:
- Valores predeterminados al activar el plugin
- Un sencillo formulario de configuración con campos numéricos (100-900)
- Validación para mantener los valores dentro del rango
- Salida de los pesos tanto en el editor de bloques como en el frontend
El resultado es esta nueva página en nuestro WP Admin, que permite a los usuarios establecer valores de peso para nuestras tres fuentes. Elegimos tres valores «no estándar».
El resultado es una página con estos pesos de fuente correspondientes que se muestran como se esperaba en el editor de páginas y en el front-end.
Una forma más sencilla e intuitiva de añadir una sola fuente variable
Si te ha parecido demasiado complicado, tenemos una alternativa que, aunque no tiene todas las funcionalidades, es una forma rápida de incorporar cualquier tipo de fuente a tu tema.
Los usuarios pueden añadir fácilmente Google Fonts a través de la Biblioteca de Fuentes. Si esa es tu preferencia, echa un vistazo a nuestro artículo sobre las 15 Mejores Fuentes de Google según los Datos (Y Consejos para Usarlas), que te será de ayuda.
Pero, ¿y si prefieres algo distinto a una fuente de Google? Hay muchas formas de conseguir fuentes de código abierto con la licencia adecuada para tus proyectos. Nosotros recurrimos a GitHub para conseguir SourceSans3VF-Upright, una fuente de Adobe.
Nuestro objetivo es utilizarla como fuente opcional que se muestre correctamente en el editor y en el frontend.
El archivo de la fuente se coloca en la carpeta /assets/fonts de nuestro tema hijo. A partir de ahí creamos functions.php.
<?php
/**
* Enqueue parent and child theme styles.
*/
function twentytwentyfive_kinstachild_enqueue_styles() {
// Parent theme style.
wp_enqueue_style(
'twentytwentyfive-style',
get_parent_theme_file_uri( 'style.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
// Child theme style.
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri(),
array( 'twentytwentyfive-style' ),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_kinstachild_enqueue_styles' );
/**
* Enqueue child theme styles in the editor.
*/
add_action( 'after_setup_theme', function() {
add_editor_style( 'style.css' );
} );Como en el ejemplo anterior, nuestro archivo theme.json debe hacer referencia a las fuentes Manrope y Fira Code del tema padre. Omitirlas las eliminaría de nuestro tema.
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
{
"name": "Source Sans 3",
"slug": "source-sans-3",
"fontFamily": ""Source Sans 3", sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/SourceSans3VF-Upright.woff2"
],
"fontWeight": "100 900",
"fontStyle": "normal",
"fontFamily": "Source Sans 3"
}
]
}
]
}
}
}Recuerda que sigues necesitando un archivo styles.css básico para incluir los metadatos esenciales que indican a WordPress que estás trabajando con un tema hijo.
Resumen
Tanto si optas por una configuración totalmente personalizada como por una integración rápida, las fuentes variables en WordPress ofrecen una forma eficaz de mejorar la tipografía de tu sitio web. Mejoran el rendimiento, reducen la complejidad y te ofrecen opciones de diseño flexibles y responsivas que simplemente no son posibles con las fuentes estáticas tradicionales.
Para aprovechar todo su potencial, es posible que tengas que crear una interfaz de usuario personalizada que muestre los ejes variables (como el peso, la inclinación o el tamaño óptico) y ofrezca a los propietarios del sitio más control.
Si estás construyendo un sitio de WordPress en la plataforma de alojamiento de Kinsta, también te beneficiarás de su infraestructura orientada al rendimiento, que hace aún más fácil servir eficientemente activos modernos como las fuentes variables.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
