Roboto en los títulos, Open Sans en el cuerpo del texto. La tipografía del sitio se ve como la mitad de todas las instalaciones de WordPress. El visitante notó el patrón, reconoció la fuente y el sitio perdió parte de su individualidad antes del primer párrafo.

Una fuente personalizada se conecta a WordPress de dos maneras: mediante un plugin en 2 minutos sin una sola línea de código, o manualmente a través de @font-face con control total sobre los archivos. Ambas funcionan de forma fiable, la elección depende de su experiencia con CSS.

A continuación veremos dónde conseguir fuentes, cómo configurar un plugin y cómo añadir @font-face en un tema hijo. El código está tomado de instalaciones en funcionamiento: péguelo, reemplace el nombre del archivo y su tipografía estará lista.

💡 Resumen rápido:

• Descargue una fuente de DaFont o FontSquirrel en formato WOFF2 o TTF: al menos tres variantes (normal, negrita, cursiva).
• Instale Use Any Font o Fonts Plugin, suba el archivo desde el panel de administración y asigne la fuente a los elementos. No necesita código.
• O conéctela manualmente: cree una carpeta fonts en el tema hijo, suba los archivos por FTP y añada @font-face en style.css para cada variante.
• Verifique la visualización en varios navegadores y no instale más de dos fuentes personalizadas: cada archivo aumenta el peso de la página.

Dónde conseguir fuentes y en qué formato

Todo el mundo conoce Google Fonts, precisamente por eso están en todas partes. Si necesita algo menos trillado, aquí tiene tres fuentes probadas.

DaFont ofrece más de 3.500 fuentes con categorías que van desde cómics hasta vintage. La mayoría son gratuitas para uso personal. Para proyectos comerciales, verifique la licencia de cada archivo por separado, aparecen listadas en la página de la fuente.

FontSquirrel se centra en fuentes gratuitas con licencias comerciales. La colección es pequeña, pero cada fuente ha sido revisada por abogados. El generador integrado convierte un archivo descargado a WOFF y WOFF2 con un solo clic.

FontSpring vende fuentes de pago, pero casi todas las familias tienen una o dos variantes gratuitas. Lea la licencia detenidamente antes de descargar: distintas variantes pueden tener condiciones diferentes.

Regla general: no ponga más de dos fuentes personalizadas en un sitio. Una para los títulos, otra para el cuerpo del texto, es suficiente. Cada archivo añade una solicitud HTTP y aumenta el peso de la página entre 30 y 100 KB.

Descargue todas las variantes de una vez: normal, negrita, cursiva y negrita cursiva. Si el archivo solo tiene una variante, el navegador simulará la negrita y la cursiva con un engrosamiento artificial, el resultado se ve tosco.

Método 1: plugin en 2 minutos

Un plugin, el camino más simple. Se instala, se sube el archivo de la fuente, se elige dónde aplicarla. Sin código, sin conexiones FTP.

Use Any Font

🔗 Use Any Font en WordPress.org

🔗 Capturas de pantalla y demostración

Sube fuentes en formatos TTF, OTF y WOFF, las convierte automáticamente a WOFF2 con compresión Brotli. Según la página del plugin en WordPress.org, la velocidad de carga mejora aproximadamente un 30%. Las fuentes se almacenan en su servidor: cumplimiento del RGPD desde el primer momento, sin dependencia de APIs externas tras la conversión.

Tras la instalación obtiene una clave API (la clave gratuita Lite permite una conversión), sube el archivo y asigna la fuente mediante la interfaz visual. Puede aplicarla a encabezados, párrafos o bloques específicos directamente desde el panel de administración.

Admite integración con Elementor, Divi, WPBakery, Gutenberg: asigne la fuente una vez en el plugin y aparecerá en la lista de fuentes del constructor.

Nota: para varias fuentes necesita una clave Premium. Para un sitio típico la versión gratuita es suficiente: una fuente corporativa para los encabezados, Google Fonts para el texto.

Fonts Plugin

🔗 Fonts Plugin en WordPress.org

🔗 Capturas de pantalla del plugin

Antes Olympus Google Fonts: se renombró y se amplió su funcionalidad. Según la página del plugin, cuenta con más de 200 000 instalaciones activas y una valoración de 5 estrellas por parte de más de 1200 usuarios. Compatible con Google Fonts, Adobe Fonts (Typekit) y la carga de archivos personalizados.

La configuración se realiza a través del personalizador: seleccione una fuente, vea una vista previa en vivo, guarde.

La versión Pro añade alojamiento local de Google Fonts para el RGPD, carga selectiva solo de los pesos necesarios y control de tamaño, color e interlineado. La versión gratuita es suficiente para la mayoría de los sitios.

¿Plugin o método manual? Cuándo elegir cada opción

Un plugin gana en rapidez: instalación en 2 minutos, sin necesidad de código. Pero usted depende de las actualizaciones del plugin y de su compatibilidad con la versión de WordPress.

La instalación manual mediante @font-face es más compleja de configurar, pero usted controla cada byte. Sin APIs de terceros, sin actualizaciones que rompan su tipografía.

Si ya trabaja con un tema hijo, el método manual se integrará de forma orgánica en su CSS. Las fuentes pasan a formar parte del tema y permanecerán allí durante años.

Método 2: instalación manual mediante @font-face

La directiva @font-face conecta los archivos de fuente directamente desde su servidor. Los formatos compatibles son TTF, OTF, WOFF, WOFF2 y SVG. Cada peso requiere un bloque de código independiente.

Pero después de la configuración se olvida de la tipografía durante años: las actualizaciones de WordPress y del tema no afectarán las fuentes, estas residen en su tema hijo y se cargan siempre como parte del CSS.

Antes de empezar, cree un tema hijo: todas las modificaciones van en él, el tema padre permanece intacto y se actualizará sin perder sus cambios.

Paso 1: cree una carpeta para las fuentes

En la carpeta del tema hijo, cree un directorio fonts. Añádalo mediante FTP o el gestor de archivos del hosting:

1
wp-content/themes/your-child-theme/fonts/

Si su tema hijo se llama twentytwentyfour-child, la ruta será wp-content/themes/twentytwentyfour-child/fonts/.

Paso 2: suba los archivos de fuente al servidor

Copie los archivos descargados a la carpeta fonts mediante FTP o el gestor de archivos del hosting. Para cada peso, un archivo independiente:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

En la práctica, los formatos WOFF y WOFF2 son suficientes: cubren todos los navegadores modernos y pesan menos que TTF. Según MDN Web Docs, WOFF2 comprime una fuente un 30% más eficientemente que WOFF y es compatible con todos los navegadores desde 2016.

El navegador elegirá el formato adecuado entre los conectados: si soporta WOFF2, cargará ese; si no, tomará WOFF.

Paso 3: añada @font-face en style.css

Abra el style.css del tema hijo y añada el código después de la cabecera del tema (el comentario con el nombre y la descripción del tema). Empiece por el peso regular:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, el nombre de la fuente que usará en CSS. Asígnele un nombre que no se confunda con las fuentes del sistema: no Arial, sino MiMarcaSans o MarcaTitular. src, ruta a los archivos relativa a style.css. El orden importa: WOFF2 primero (más ligero), WOFF segundo (alternativa para navegadores antiguos).

Paso 4: añada la cursiva

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Nota: font-family es la misma, font-weight se mantiene normal y font-style cambia a italic. El navegador sustituirá el archivo correcto para la etiqueta em y la propiedad font-style: italic.

Paso 5: añada el peso negrita

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Aquí font-style vuelve a ser normal y font-weight ahora es bold. Ahora la etiqueta strong y la propiedad font-weight: bold se renderizarán con su archivo negrita, no con un engrosamiento simulado por el navegador. La diferencia es notable: el peso negrita real está equilibrado por el diseñador de la fuente, la simulación se ve tosca.

Paso 6: negrita cursiva (opcional)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Cuatro pesos cubren prácticamente todas las necesidades tipográficas de un sitio web habitual. Si el diseño no requiere negrita cursiva, omita este paso: el archivo no se cargará hasta que el CSS solicite explícitamente la combinación bold + italic.

Paso 7: aplique la fuente a los elementos

Después de @font-face añada las reglas que asignan la fuente a elementos específicos. Añádalas al style.css del tema hijo:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

La primera regla: su fuente para el texto del cuerpo, con una alternativa a la fuente del sistema Arial. La segunda: la misma fuente para los encabezados, con una alternativa a Georgia.

Si el archivo de fuente no carga (el servidor está caído o la ruta es incorrecta), el sitio no se quedará sin texto: el navegador mostrará Arial o Georgia. Una fuente de respaldo es obligatoria: sin ella el navegador usará la fuente predeterminada del sistema, normalmente Times New Roman, y la tipografía se desmoronará.

Listo. Una fuente personalizada queda conectada sin plugins ni servicios externos. La tipografía reside en su servidor y no se romperá si una API de terceros cambia las condiciones o deja de funcionar.

Vídeo: configuración paso a paso en un sitio real

Vea cómo es todo el proceso en un sitio WordPress real, desde la elección de una fuente hasta su aplicación a los encabezados:

El video muestra ambos métodos: mediante plugin y mediante @font-face. Conviene pausarlo y seguir los pasos. El video está en inglés, pero el proceso es visualmente claro incluso sin audio.

⁉️🤔 Preguntas frecuentes

¿Cuántas tipografías personalizadas puedo añadir a un sitio?

No más de dos: una para los títulos y otra para el cuerpo del texto. Cada tipografía incluye varios archivos de peso, de 30 a 100 KB cada uno. Dos tipografías añadirán un volumen notable a la carga de la página. Una tercera empeorará perceptiblemente la velocidad, sobre todo en conexiones móviles lentas.

¿Es obligatorio crear un tema hijo para @font-face?

Formalmente no: puede insertar @font-face directamente en el style.css del tema padre. Pero tras la siguiente actualización del tema, todas las ediciones desaparecerán. Un tema hijo lo resuelve de una vez por todas. Si aún no ha creado uno, nuestra guía de tema hijo de WordPress lo acompañará desde la instalación hasta el primer resultado.

¿Qué formato de archivo elegir: WOFF, WOFF2 o TTF?

WOFF2, como prioridad. Comprime una tipografía notablemente más que WOFF y es compatible con todos los navegadores modernos. WOFF, como respaldo para versiones antiguas de navegador. Conecte TTF y OTF solo si la tipografía no está disponible en formatos web: no están comprimidos y pesan el doble. El orden en src es siempre: WOFF2, luego WOFF.

¿Por qué no se muestra la tipografía después de la instalación?

Tres causas comunes. Primera: la ruta al archivo en url() es incorrecta; verifique que la ruta se construya desde style.css, no desde la raíz del sitio. Segunda: la caché del navegador conserva el CSS antiguo; abra el sitio en modo incógnito o limpie la caché con Ctrl+F5. Tercera: conflicto con un tema que sobrescribe font-family con mayor prioridad; compruebe en el inspector qué selector CSS se aplica realmente al texto.

¿Necesito especificar format() en src?

Formalmente, el navegador determina el formato por sí mismo a partir de las cabeceras del archivo. Pero un format('woff2') explícito acelera la selección: el navegador no descarga un archivo que definitivamente no soporta. Así que especifíquelo siempre. Es una recomendación de la especificación CSS Fonts Level 4.

¿Cómo verifico que la tipografía se carga desde mi servidor y no externamente?

Abra DevTools (F12), pestaña Network, filtro Fonts, actualice la página. La lista debe contener solo archivos de su dominio. Si ve fonts.googleapis.com o fonts.gstatic.com, las Google Fonts se cargan externamente. Para cumplir con el RGPD, muévalas a un alojamiento local mediante Fonts Plugin Pro o descárguelas manualmente y conéctelas mediante @font-face.

¿Qué método de conexión de tipografías elegir?

Ambos métodos funcionan de forma fiable. La elección depende de qué sea más importante para usted: la rapidez de configuración o el control sobre cada byte.

Si instala una tipografía por primera vez y no quiere tocar código, elija Use Any Font. Sube el archivo, lo asigna a los títulos y listo. La versión gratuita es suficiente para una tipografía de marca en los títulos.

Si necesita acceso al catálogo de Google Fonts con vista previa en vivo directamente en el personalizador, elija Fonts Plugin. La versión gratuita basta para la mayoría de las tareas; la Pro solo es necesaria para el alojamiento local de Google Fonts conforme al RGPD.

Si ya trabaja con un tema hijo y está acostumbrado a editar CSS manualmente, elija @font-face. Cero dependencias externas, control total y, tras la configuración, no vuelve a pensar en la tipografía durante años. Las actualizaciones del tema no afectarán a las tipografías, que residen en su tema hijo como parte del CSS.

Comience con un plugin: son 2 minutos y sin riesgo. ¿Qué tipografía tiene ahora en su sitio, la predeterminada del tema o ya conectó una propia?