Introducción
Aplicar una tipografía monoespaciada a los fragmentos de código en WordPress mejora la legibilidad, la consistencia visual y la experiencia del lector técnico. Este artículo explica con todo lujo de detalles cómo forzar una tipografía monoespaciada en bloques de código y elementos inline (como ltcodegt) usando CSS, cómo cargar buenas fuentes monoespaciadas (locales o desde Google Fonts), cómo integrar los estilos en un tema o mediante el personalizador, y qué consideraciones de accesibilidad y responsive tener en cuenta.
Por qué usar monoespaciado para código
- Los caracteres ocupan el mismo ancho, facilitando la lectura de indentaciones y alineaciones.
- Mejora la legibilidad de bloques de código y difusiones de ejemplos técnicos.
- Evita que el navegador sustituya la fuente con serif o variable al renderizar fragmentos.
Selección de la fuente monoespaciada
Recomendaciones de fuentes (ordenadas por preferencia para código):
- Fira Code — muy popular, con y sin ligaduras.
- JetBrains Mono — legible y moderna.
- Source Code Pro — clásica y fiable.
- Menlo, Monaco, Courier New — buenas como fallback.
Conviene declarar una pila de fuentes con un fallback final a monospace:
font-family: Fira Code, JetBrains Mono, Source Code Pro, Menlo, Monaco, Courier New, monospace
Dónde aplicar los estilos en WordPress (selectores comunes)
Dependiendo del theme y de los plugins de resaltado, querrás apuntar a varios selectores. Algunos selectores útiles:
- .entry-content pre
- .entry-content code
- pre[class=language-] y code[class=language-] (Prism/Highlight.js)
- .wp-block-code, .wp-block-preformatted (bloques de Gutenberg)
- .syntaxhighlighter, .enlighter, .highlight (plugins populares)
Ejemplo de CSS completo y recomendado
Este bloque cubre código en bloque y código inline, maneja overflow, tabulación y ligaduras opcionales.
/ Tipografía monoespaciada para fragmentos de código /
.entry-content pre,
.entry-content code,
pre[class=language-],
code[class=language-],
.wp-block-code,
.wp-block-preformatted,
.syntaxhighlighter,
.enlighter,
.highlight pre {
font-family: Fira Code, JetBrains Mono, Source Code Pro, Menlo, Monaco, Courier New, monospace
font-size: 0.95rem / ajusta según diseño /
line-height: 1.45 / separación legible /
color: inherit / respetar color del tema o del resaltador /
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
tab-size: 4
-moz-tab-size: 4
}
/ Código en bloque: fondo, padding y scroll horizontal /
.entry-content pre,
.wp-block-preformatted,
pre[class=language-] {
background: #0b0f14 / puede adaptarlo al esquema del tema /
color: #d3d7de
padding: 1rem
border-radius: 6px
overflow: auto / scroll horizontal en vez de romper líneas /
white-space: pre / preservar espacios y saltos de línea /
}
/ Código inline (dentro de párrafos) /
.entry-content code,
.wp-block-code code,
pre code {
background: rgba(27,31,35,0.06)
padding: 0.15em 0.35em
border-radius: 4px
font-size: 0.92em
white-space: normal
}
/ Control de ligaduras: desactivar (opción) /
.entry-content pre,
.entry-content code {
font-variant-ligatures: none
font-feature-settings: liga 0, calt 0
}
/ Si prefieres activar ligaduras (por ejemplo con Fira Code) /
.entry-content pre.ligatures-on,
.entry-content code.ligatures-on {
font-variant-ligatures: common-ligatures
font-feature-settings: liga 1
}
Cargar la fuente (recomendado: mediante functions.php)
La forma más correcta en WordPress es encolar la hoja de Google Fonts (o una local) desde functions.php. Así se evita carga duplicada y mantiene buenas prácticas.
/ Enqueue Google Fonts (functions.php) /
add_action(wp_enqueue_scripts, mi_tema_enqueue_mono_font)
function mi_tema_enqueue_mono_font() {
// Fira Code desde Google Fonts
wp_enqueue_style(
mi-fira-code,
https://fonts.googleapis.com/css2?family=Fira Code:wght@400700display=swap,
array(),
null
)
// Tu hoja de estilos principal (si necesitas añadir CSS adicional)
wp_enqueue_style(mi-estilos, get_stylesheet_uri(), array(mi-fira-code), wp_get_theme()->get(Version))
}
Si necesitas aplicar la fuente también en el editor de bloques (Gutenberg)
/ Enqueue fonts en el editor de bloques /
add_action(enqueue_block_editor_assets, mi_tema_editor_mono_font)
function mi_tema_editor_mono_font() {
wp_enqueue_style(
mi-fira-code-editor,
https://fonts.googleapis.com/css2?family=Fira Code:wght@400700display=swap,
array(),
null
)
}
Alternativas para cargar la fuente
- Custom CSS en Apariencia → Personalizar → CSS Adicional: pega el @import o la regla @font-face y el CSS anterior. Menos recomendado por rendimiento.
- Subir la fuente al tema y usar @font-face local si necesitas control total y sin depender de Google.
Ejemplo rápido de @import (si lo haces en tu CSS):
/ No es la mejor práctica en términos de rendimiento, pero funciona / @import url(https://fonts.googleapis.com/css2?family=Fira Code:wght@400700display=swap)
Consideraciones sobre ligaduras
Algunas fuentes (como Fira Code) incluyen ligaduras para combinaciones como =gt o ==. Estas ligaduras pueden ser agradables visualmente pero molestan en algunos contextos (p. ej. cuando se copia el texto o se busca exactamente la secuencia).
- Si quieres desactivar ligaduras: usa font-variant-ligatures: none o font-feature-settings: liga 0
- Si quieres permitirlas: habilita common-ligatures o liga 1.
Accesibilidad y usabilidad
- Contraste: asegúrate de contraste suficiente entre fondo y texto para cumplir WCAG mínimo (4.5:1 para texto normal si procede).
- Tamaño: no uses tamaños demasiado pequeños 0.9–1rem para bloques y 0.85–0.95em para inline suele funcionar.
- Responsive: para pantallas pequeñas permite scroll horizontal en bloques de código en lugar de romper la estructura del código.
- Copiar/pegar: la mayoría de resaltadores manejan bien la copia evita pseudo-elementos que se copien con el texto.
Compatibilidad con plugins de resaltado
Si usas plugins como Prism, Highlight.js, EnlighterJS o SyntaxHighlighter, adapta los selectores al HTML que generan. Muchos plugins añaden clases como language-js o envuelven el código en contenedores específicos: inspecciona el DOM y añade tus reglas CSS a esos selectores para no romper el tema del resaltador.
Pruebas y depuración
- Inspecciona el HTML del bloque de código con las herramientas del navegador para ver qué selectores aplicar.
- Comprueba que la fuente se carga (pestaña Network > Fonts) si usas Google Fonts o @font-face.
- Prueba en varios navegadores (Chrome, Firefox, Safari) y móviles.
- Si no ves la fuente, verifica que no haya otra regla CSS con mayor especificidad que sobrescriba font-family.
Ejemplo mínimo para pegar en CSS adicional del Personalizador
@import url(https://fonts.googleapis.com/css2?family=Fira Code:wght@400700display=swap)
.entry-content pre,
.entry-content code,
pre[class=language-],
code[class=language-],
.wp-block-code {
font-family: Fira Code, JetBrains Mono, Source Code Pro, Menlo, Monaco, Courier New, monospace
font-size: 0.95rem
line-height: 1.45
}
/ Estética básica para bloques /
pre {
background: #0b0f14
color: #d3d7de
padding: 1rem
border-radius: 6px
overflow: auto
}
Buenas prácticas finales
- Encola fuentes desde functions.php para mejorar rendimiento y control de caché.
- Scopea (aplica) estilos a .entry-content o a contenedores específicos para no afectar otros elementos del tema.
- Prueba la experiencia de lectura y copia/pega en dispositivos móviles.
- Documenta el cambio en el código del theme (comentarios en functions.php o en el CSS) para mantenimiento futuro.
Resumen
Aplicar una tipografía monoespaciada a los fragmentos de código en WordPress es una combinación de:
- Elegir y cargar una buena fuente (p. ej. Fira Code).
- Aplicar CSS dirigido a los selectores de bloque y inline adecuados.
- Manejar ligaduras, overflow y accesibilidad.
- Encolar correctamente en functions.php o usar el Personalizador si no editas archivos del tema.
Con los ejemplos y snippets anteriores puedes implementar una solución robusta y adaptable a la mayoría de themes y plugins de resaltado.
Leave a Reply