Añadir una fuente personalizada a tu sitio web de WordPress es una excelente manera de hacer que tu sitio destaque y reforzar la identidad de tu marca. Aunque WordPress ofrece una variedad de fuentes predeterminadas, usar una fuente única te ayuda a conseguir un aspecto distintivo que comunique la esencia de tu marca.
¿Tu negocio es serio y técnico, o divertido y alegre? Quizá tu empresa tenga un enfoque futurista o un aire retro, como la tienda de WooCommerce de Chia Pet. Las fuentes personalizadas pueden comunicar estos y otros matices a los visitantes.
Si te interesa añadir una fuente específica a tu sitio web de WordPress, hay varias maneras de hacerlo. Puede ser tan sencillo como elegir una fuente personalizada de Google en los ajustes predeterminados de WordPress o usar un plugin. Si tienes algunos conocimientos de programación, también puedes añadir una fuente personalizada dentro de un tema hijo.
Esta guía te explicará cada uno de estos métodos para añadir fuentes personalizadas, garantizando al mismo tiempo la compatibilidad, el rendimiento y la accesibilidad.
Respuesta rápida para añadir fuentes: elige tu método
- ¿Usas un tema de bloques (Editor del sitio / Edición completa del sitio)? Usa la biblioteca de fuentes de WordPress (la opción más rápida y sin código).
- ¿Creas o editas temas (flujo de trabajo de desarrollo)? Registra las fuentes en theme.json (la opción más sólida y compatible con el editor).
- ¿Usas un tema clásico con opciones del Personalizador? Usa el panel Tipografía/Fuentes de tu tema (opciones limitadas).
- ¿Tu tema no ofrece compatibilidad o usas un maquetador de páginas? Usa un plugin de fuentes o @font-face en un tema hijo.
Comprender los formatos de fuente y la compatibilidad
Antes de añadir fuentes personalizadas, debes comprender los distintos formatos de fuente y su compatibilidad con varios navegadores.
Formatos de fuente comunes
- TTF (fuente TrueType): Compatible con la mayoría de los navegadores, pero el tamaño del archivo puede ser grande.
- OTF (fuente OpenType): Similar a TTF, pero admite funciones tipográficas avanzadas.
- WOFF (formato de fuente web abierta): Optimizado para la web y ofrece una mejor compresión.
- WOFF2: Más eficiente que WOFF y ofrece un mejor rendimiento.
- EOT (OpenType incrustado): Lo usaban las versiones antiguas de Internet Explorer.
Elegir el formato adecuado
Para lograr una compatibilidad óptima, usa WOFF y WOFF2. Estos formatos son ligeros y son ampliamente compatibles con los navegadores modernos.
5 formas de añadir fuentes personalizadas a WordPress
Hay varias formas de añadir fuentes personalizadas a WordPress. Cada método tiene sus propias ventajas según la facilidad de implementación y las necesidades de personalización.
1. Usar la biblioteca de fuentes de WordPress
La biblioteca de fuentes es una función incluida por defecto en las versiones 6.5 y posteriores de WordPress. Es compatible de forma nativa con Google Fonts y te permite subir tus propias fuentes, pero solo funciona con temas compatibles con el editor de bloques y la edición completa del sitio en Apariencia → Editor. Si tu tema utiliza la función Personalizador, pasa al método número dos de esta lista.
Dónde encontrar la biblioteca de fuentes
- Ve a Apariencia → Editor en tu panel de administración de WordPress.
- Haz clic en Estilos en el menú de la izquierda.
- Haz clic en el icono de edición (lápiz) situado junto al encabezado Estilos.
- Haz clic en Tipografía en el panel Estilos de la derecha.
- Desplázate hasta la sección Fuentes y haz clic en el icono Gestionar fuentes (control deslizante).
Cómo añadir fuentes personalizadas a la biblioteca de fuentes
El panel Gestionar fuentes tiene tres pestañas:
- Biblioteca: Muestra todas las fuentes instaladas y las del tema.
- Subir: Añade tus propias fuentes (admite .ttf, .otf, .woff y .woff2).
- Instalar fuentes: Explora e instala Google Fonts después de conceder acceso (que puedes revocar en cualquier momento).
Instalar una fuente de Google
- Primero tendrás que conceder acceso a Google Fonts si aún no lo has hecho.
- Busca y elige una fuente.
- Selecciona las variantes de la fuente.
- Haz clic en Instalar — ¡listo! La fuente aparecerá como una de tus opciones de fuentes en los paneles Biblioteca y Estilos.
Subir fuentes
En la pestaña Subir del Gestor de fuentes, simplemente arrastra el archivo de fuente (.ttf, .otf, .woff o .woff2) al área Subir fuente y la fuente se instalará automáticamente. Al igual que las fuentes de Google que hayas instalado, las fuentes que subas también estarán disponibles en los paneles Biblioteca y Estilos.
Eliminar fuentes
Puedes desactivar variantes de fuentes o eliminar fuentes por completo en la pestaña Biblioteca del Gestor de fuentes.
- Desactiva las variantes desmarcándolas en la Biblioteca y haciendo clic en Actualizar.
- Elimina una fuente seleccionándola, marcando la casilla y haciendo clic en Eliminar (se requiere confirmación).
Cambiar las fuentes predeterminadas
Las fuentes funcionan globalmente (en todo el sitio) o en bloques específicos. Para cambiar las fuentes globalmente, ve a Estilos → Tipografía → Elementos en el Editor, elige un elemento (texto, encabezados, botones, etc.) y personaliza la fuente, el tamaño, la altura de línea y otros aspectos de su apariencia.
Ventajas: Fácil de implementar; no requiere programación.
Desventajas: Limitado a temas compatibles con bloques que permiten la edición completa del sitio.
2. Usar el Personalizador para habilitar fuentes de Google personalizadas (depende del tema)
Si utilizas un tema que usa la función Personalizador de WordPress y ya tiene integradas las fuentes de Google, puedes añadir tus fuentes personalizadas directamente en el Personalizador del tema.
Pasos:
- Ve a Apariencia → Personalizar
- Busca la sección Tipografía o Fuentes (la ubicación exacta puede tener una etiqueta ligeramente distinta según tu tema)
- Elige una fuente de Google en el menú desplegable
- Guarda y publica los cambios
Ventajas: Fácil de implementar, sin necesidad de programar.
Desventajas: Limitado a las fuentes de Google y puede que solo esté disponible en determinados temas…
3. Añadir fuentes personalizadas mediante un plugin
Los plugins simplifican la integración de fuentes al gestionar la carga de archivos y la generación de CSS. Si no te sientes cómodo programando, tu tema no es compatible con el Editor o no ofrece las fuentes personalizadas que necesitas mediante el Personalizador, esta será la forma más sencilla de instalar tus fuentes personalizadas.
Plugins recomendados:
- Use Any Font – Carga directamente cualquier archivo de fuente.
- Fonts Plugin – Usa fácilmente cualquier fuente de Google.
- Fuentes de Google locales – Permite almacenar localmente las fuentes de Google para una carga más rápida y cumplimiento del GDPR.
Instala una fuente personalizada con el plugin Use Any Font:
- Instala y activa el plugin Use Any Font.
- Obtén la clave de API en los ajustes del plugin.
- Carga tu fuente personalizada (TTF, OTF o WOFF).
- Asigna la fuente a elementos específicos (por ejemplo, el cuerpo y los encabezados).
- Guarda los cambios.
Ventajas: No requiere programación manual.
Desventajas: Algunas funciones requieren una versión premium.
4. Usar un tema hijo para integrar fuentes
Si te sientes cómodo añadiendo algo de código a tu sitio, puedes añadir tus fuentes personalizadas en un tema hijo. Usar un tema hijo para personalizaciones del tema, como incorporar nuevas fuentes o modificar la hoja de estilos del tema, evitará que pierdas esos cambios al actualizar el tema.
Las siguientes instrucciones incluyen una breve descripción general de cómo crear un tema hijo en WordPress. Necesitarás acceso al directorio de tu sitio mediante cPanel, Plesk, SFTP o SSH. También necesitarás un editor de texto sin formato o un software de edición de código, como Notepad++, Sublime Text o Visual Studio Code, para crear y modificar los archivos del tema hijo.
Si necesitas instrucciones más detalladas para crear un tema hijo, lee Cómo crear un tema hijo en WordPress.
- Crear un tema hijo
- Ve a wp-content/themes/ y crea una carpeta nueva (p. ej., tu-tema-hijo).
- Dentro de esta carpeta, crea un archivo style.css y un archivo functions.php.
- Define el tema hijo
- Añade la siguiente cabecera dentro de style.css:
/*
Theme Name: Your Theme Child
Template: yourtheme
*/- Pon en cola la fuente personalizada
- Abre functions.php dentro de la carpeta de tu tema hijo.
- Añade el siguiente código:
function custom_fonts() {
wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts.css');
}
add_action('wp_enqueue_scripts', 'custom_fonts');- Carga los archivos de fuentes y crea un archivo fonts.css
- Coloca las fuentes en un directorio /fonts/ dentro del directorio principal de tu tema hijo.
- Crea un archivo fonts.css en el directorio principal del tema hijo y añade reglas de @font-face CSS.
@font-face {
font-family: 'Custom Font Name';
src: url('wp-content/themes/your-theme-child/fonts/customfontname.woff2') format('woff2'),
font-weight: 300;
font-style: normal;
}- Activa el tema hijo
- Ve a Apariencia → Temas y activa tu tema hijo.
Ventajas: Los cambios permanecen intactos después de actualizar el tema.
Desventajas: Requiere conocimientos de desarrollo de temas.
5. Añadir fuentes personalizadas con theme.json (ideal para desarrolladores de temas)
Si estás creando un tema de bloques (o un tema hijo para un tema de bloques), la forma más limpia de registrar fuentes es mediante theme.json. Esto pone las fuentes a disposición en la interfaz de usuario del editor, mantiene la tipografía coherente y evita soluciones puntuales con CSS. WordPress permite registrar familias de fuentes mediante settings.typography.fontFamilies.
Ejemplo de registro de fuentes theme.json (WOFF2 alojado en tu propio servidor):
{
"version": 2,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Brand Serif",
"slug": "brand-serif",
"fontFamily": "\"Brand Serif\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif",
"fontFace": [
{
"fontFamily": "Brand Serif",
"fontStyle": "normal",
"fontWeight": "400",
"src": ["file:./assets/fonts/brand-serif-regular.woff2"]
},
{
"fontFamily": "Brand Serif",
"fontStyle": "normal",
"fontWeight": "700",
"src": ["file:./assets/fonts/brand-serif-bold.woff2"]
}
]
}
]
}
}
}
Dónde colocar los archivos: En el ejemplo anterior, los archivos de fuentes se encuentran en /assets/fonts/ dentro del directorio de tu tema y se referencian mediante file:./….
Cómo garantizar el rendimiento y la accesibilidad de las fuentes
Optimiza la carga de fuentes
Los archivos de fuentes grandes ralentizan los sitios web. Para optimizar el rendimiento:
- Usa el formato WOFF2 para obtener una mejor compresión.
- Limita el número de fuentes personalizadas para reducir las solicitudes HTTP.
- Usa font-display: swap en CSS para mejorar la renderización.
Garantiza la accesibilidad
- Asegúrate de que el texto siga siendo legible cuando las fuentes no se carguen.
- Proporciona fuentes alternativas como Arial, Helvetica o sans-serif.
- Prueba las fuentes en distintos dispositivos y navegadores.
Solución y corrección de problemas comunes con las fuentes
La fuente no se muestra
- Comprueba que las rutas de los archivos sean correctas.
- Borra la caché del sitio y la caché de CDN.
- Inspecciona la consola del navegador para buscar errores (Ctrl + Shift + I > Consola).
Las fuentes se cargan lentamente
- Reduce el tamaño de los archivos de fuentes con herramientas de compresión.
- Implementa la carga diferida para las fuentes no esenciales.
- Aloja las fuentes en la CDN para una entrega más rápida.
Mejora la tipografía con CSS
Después de añadir tus fuentes personalizadas a tu sitio de WordPress, puedes añadir estilos globales a los encabezados, párrafos y otras clases específicas. Parte de esto puede hacerse en el Editor o el Personalizador, pero también puedes hacerlo con CSS. Asegúrate de realizar estos cambios de estilo en el archivo style.css de tu tema hijo.
Algunos ejemplos son:
Ajustar el peso y el estilo de la fuente
h1, h2 {
font-weight: 700;
}
p {
font-style: italic;
}Mejorar la legibilidad con la altura de línea
body {
line-height: 1.6;
}Personalizar los tamaños de fuente para distintos tamaños de pantalla
@media (max-width: 768px) {
body {
font-size: 16px;
}
}Consejos para el rendimiento y la accesibilidad de las fuentes
Añadir fuentes es fácil, pero optimizarlas es lo que distingue a los profesionales. Ten en cuenta estos consejos de expertos:
Fuentes locales frente a Google Fonts: Alojar las fuentes localmente desde tu propio servidor te proporciona un control total y suele ser más rápido, lo que garantiza mejores métricas Core Web Vitals y el cumplimiento del GDPR. Google Fonts son fáciles de usar, pero requiere una solicitud externa que puede ralentizar tu sitio.
Cuidado con CLS: Las fuentes que se cargan lentamente pueden provocar Cumulative Layout Shift (CLS), una métrica clave de Core Web Vitals. Para evitarlo, utiliza font-display: swap; como propiedad de CSS y precarga los archivos de fuentes más importantes.
Limita los pesos de las fuentes: No cargues todos los pesos de fuente (por ejemplo: fino, ligero, normal, negrita y negro). Cada uno es un archivo independiente que ralentiza tu sitio. Solo carga los pesos específicos que realmente utilices.
Reflexiones finales sobre cómo añadir fuentes personalizadas
Añadir fuentes personalizadas a WordPress mejora la identidad de marca y la experiencia del usuario. Tanto si utilizas las herramientas predeterminadas de WordPress, un plugin o añades las fuentes manualmente mediante un tema hijo, elegir el enfoque adecuado depende de tus conocimientos y requisitos, así como de lo que admita tu tema.
Elijas el método que elijas, no olvides optimizar las fuentes para mejorar el rendimiento y garantizar tiempos de carga más rápidos, además de tener en cuenta la accesibilidad para mejorar la usabilidad para todos los visitantes. Seguir las mejores prácticas en estas áreas puede ayudarte a conseguir un sitio web atractivo y profesional.
Gestionar la tipografía y otros aspectos del diseño de un sitio web es solo una parte de administrar un sitio de WordPress exitoso. El contenido también importa. De hecho, probablemente sea la parte más importante: al fin y al cabo, es por lo que tus lectores y clientes acuden a ti.
Pero la creación, el formato y la optimización de contenido pueden llevar mucho tiempo. Aquí es donde las herramientas de automatización, como Jetpack AI Assistant pueden ayudarte a agilizar tu flujo de trabajo y mejorar la eficiencia.
Simplifica tus flujos de trabajo de WordPress con Jetpack AI Assistant
Trabajar con WordPress implica varias tareas, desde la creación de contenido hasta la personalización. Jetpack AI Assistant ayuda a agilizar estos procesos, lo que te permite centrarte en el diseño y la experiencia del usuario.
Cómo Jetpack AI Assistant mejora el flujo de trabajo:
- Generación automatizada de contenido: Genera fácilmente entradas de blog, descripciones de productos, páginas de destino, tablas y traducciones de alta calidad.
- Optimización de la gramática y la legibilidad: Garantiza la claridad y coherencia del contenido con sugerencias basadas en IA.
- Integración fluida: Funciona directamente dentro del editor de WordPress para ofrecer una experiencia de usuario fluida.
- Eficiencia que ahorra tiempo: Reduce el tiempo de creación de contenido y te permite priorizar el diseño y la identidad de marca.
Al aprovechar Jetpack AI Assistant, puedes crear contenido atractivo mientras perfeccionas la tipografía y los estilos de fuente con facilidad. Descubre cómo esta herramienta basada en IA puede optimizar tu flujo de trabajo y mejorar tu productividad.
Preguntas frecuentes
¿Cuál es la mejor manera de añadir fuentes personalizadas a WordPress?
Para la mayoría de las personas que usan temas nuevos, la biblioteca de fuentes integrada de WordPress es la mejor opción. Es fácil de usar y mantiene los archivos de fuentes en tu propio servidor, lo que ayuda a que tu sitio web se cargue más rápido.
Si eres un desarrollador que quiere tener un control total, añadir fuentes con un tema hijo es el método más potente. Para quienes tienen temas antiguos, un plugin es una opción sencilla y fiable. Debes elegir el que se adapte a tus conocimientos técnicos y al tema de tu sitio web, ya que todos los métodos funcionan bien.
¿Añadir fuentes personalizadas puede ralentizar mi sitio web?
Sí, añadir fuentes personalizadas puede hacer que tu sitio web sea más lento. Cada nuevo estilo de fuente es un archivo que los visitantes deben descargar. Más archivos significan que la página tarda más en cargarse.
Para mantener tu sitio rápido, utiliza solo los estilos de fuente que realmente necesites. Elige el moderno formato WOFF2 porque sus archivos son más pequeños. Mantener las fuentes en tu propio servidor también suele ser más rápido que obtenerlas de otro lugar. Un sitio web rápido es importante, así que siempre debes comprobar su velocidad después de añadir fuentes nuevas.
¿Cuál es la diferencia entre los formatos de fuente WOFF2, WOFF y TTF?
WOFF2 es el mejor formato de fuente para sitios web porque genera los archivos más pequeños. Los archivos más pequeños ayudan a que tu sitio web cargue mucho más rápido para quienes lo visitan. WOFF también está diseñado para la web y es una buena segunda opción. Los formatos más antiguos, como TTF y OTF, tienen tamaños de archivo mucho mayores, lo que puede ralentizar tu sitio. Para obtener la máxima velocidad, intenta usar siempre archivos WOFF2. Casi todos los navegadores web modernos pueden utilizar WOFF2, por lo que es una opción segura e inteligente para tus fuentes personalizadas.
¿Cuántas fuentes personalizadas son demasiadas para un sitio web?
No deberías utilizar más de dos o tres fuentes diferentes en tu sitio web. Un buen plan es elegir una fuente para los titulares y otra para el texto principal.
Usar demasiadas fuentes puede hacer que tu sitio parezca desordenado y poco profesional. También ralentiza mucho tu sitio web porque hay que descargar cada fuente. Un diseño sencillo resulta más fácil de leer. Limitarte a unas pocas fuentes ofrece una mejor experiencia a quienes visitan tu sitio y ayuda a que tus páginas carguen rápidamente.
¿Cómo puedo solucionar las fuentes que no se muestran correctamente en mi sitio de WordPress?
Primero, deberías intentar borrar la caché de tu sitio web y la caché de tu navegador. La caché es la razón más común por la que las fuentes nuevas no aparecen de inmediato.
Si eso no resuelve el problema, revisa las rutas de los archivos en tu código de CSS para asegurarte de que sean correctas. Incluso un pequeño error puede impedir que se cargue una fuente. También puedes usar las herramientas de desarrollo de tu navegador para revisar la pestaña «Consola» en busca de mensajes de error. Estos errores suelen indicar exactamente qué está mal.
¿Puedo usar Adobe Fonts (antes Typekit) en WordPress?
Sí, puedes usar Adobe Fonts en WordPress. La forma más sencilla es usar un plugin creado para conectar tu cuenta de Adobe Fonts con tu sitio web. También puedes obtener un ID de proyecto de Adobe y añadir su código especial a la cabecera de tu sitio.
Normalmente puedes hacerlo en los ajustes de tu tema o con un plugin sencillo de scripts. Esto te permite usar tus Adobe Fonts en tu sitio, pero significa que tu sitio tiene que conectarse al servicio de Adobe para obtener los archivos de fuentes.
¿Qué debo hacer si mi tema de WordPress no tiene la Biblioteca de fuentes?
Si tu tema no tiene la Biblioteca de fuentes, la solución más sencilla es usar un plugin. La Biblioteca de fuentes solo viene incluida en temas de bloques más nuevos que admiten la Edición completa del sitio en WordPress.
Si tienes un tema antiguo o clásico, no dispondrá de esta opción. En ese caso, un plugin como «Custom Fonts» o «Use Any Font» es la mejor opción. Estas herramientas te permiten subir tus archivos de fuentes y aplicarlos a tu sitio sin tener que escribir código.
¿Cómo puedo elegir una buena fuente personalizada para mi marca?
Deberías elegir una fuente que refleje la personalidad de tu marca y que también sea muy fácil de leer. Primero, piensa en lo que quieres que exprese tu marca. Una empresa que quiere parecer seria podría usar una fuente serif tradicional. Una empresa de tecnología podría usar una fuente sans serif limpia para parecer más moderna.
Asegúrate siempre de que la fuente sea fácil de leer. El texto debe ser claro en todos los dispositivos, especialmente en los teléfonos móviles pequeños. Prueba la fuente en distintos tamaños para asegurarte de que se vea bien tanto en titulares grandes como en textos más pequeños.
¿Son buenas las fuentes personalizadas para SEO?
Sí, las fuentes personalizadas son buenas para el SEO de tu sitio si las usas correctamente. A los motores de búsqueda les gustan los sitios web fáciles de usar. Una fuente clara y fácil de leer ayuda a que las personas permanezcan más tiempo en tu página, lo que envía buenas señales a los motores de búsqueda.
Sin embargo, si tus archivos de fuentes son muy grandes y hacen que tu sitio web vaya lento, eso perjudicará a tu SEO. El secreto consiste en utilizar archivos de fuentes optimizados, como WOFF2, y cargar únicamente los estilos que realmente necesites.
Jetpack 