Cómo agregar fuentes personalizadas a WordPress

Las fuentes en WordPress. Parece una tontería pero no lo es. La verdad es que cambian completamente cómo se siente una web. Si gestionas webs de clientes, ya sabrás que elegir mal las fuentes puede arruinar un diseño que por lo demás está bien. Y funciona. A veces se ve raro pero funciona.

Hay varios tipos de fuentes y cada una dice algo distinto. Las serif tienen esos pequeños trazos en los extremos. Suelen verse más serias, más formales. Perfectas si tu cliente quiere transmitir autoridad o tradición. Aunque a veces dan sensación de antiguo, depende mucho del contexto. Las sans serif, sin esos trazos, son más modernas y limpias. Son las que mejor funcionan en pantallas porque se leen más fácil. Lo he comprobado en decenas de proyectos.

La legibilidad importa. Y mucho. Si una fuente es difícil de leer, la gente se va. Punto. No hay más. Y además hay que pensar en la accesibilidad porque no todo el mundo ve igual. Para el texto principal, mínimo 16px. Los títulos tienen que ser más grandes, significativamente más grandes, para crear jerarquía. El contraste también cuenta. Si no hay suficiente contraste entre el color de la fuente y el fondo, se lee fatal. Especialmente en móviles.Esto es algo que muchos pasan por alto. Luego se quejan de que la web no convierte cuando en realidad el problema es que no se puede leer bien. También hay que probar las fuentes en diferentes dispositivos. Una fuente que se ve genial en escritorio puede ser un desastre en móvil.

Cómo agregar fuentes a WordPress

Tienes dos formas: manual o con plugins. La manual te da más control pero necesitas tocar código. Con plugins es más fácil pero a veces tienes menos opciones. Depende mucho de lo que necesites.

Si quieres hacerlo manual, primero descargas la fuente. Formato .woff o .woff2, que son los que mejor funcionan en web. Luego la subes a tu servidor. Idealmente en una carpeta dentro de tu tema, algo como /wp-content/themes/tu-tema/fonts. Después editas el style.css y añades el código. No tiene mucha ciencia la verdad.

El código sería algo así:

<style>
@font-face {
font-family: ‘NombreDeTuFuente’;
src: url(‘/wp-content/themes/tu-tema/fonts/nombredefuenteejemplo.woff2’) format(‘woff2’),
url(‘/wp-content/themes/tu-tema/fonts/nombredefuenteejemplo.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

body {
font-family: ‘NombreDeTuFuente’, sans-serif;
}
</style>

Ojo con esto. Si editas el style.css directamente y luego actualizas el tema, pierdes los cambios. Por eso es mejor usar un tema hijo. O un plugin como Code Snippets para añadir código personalizado. Nos pasó con un cliente hace tiempo. Perdió todos los estilos personalizados porque actualizó el tema sin usar tema hijo. Desde entonces siempre insistimos en esto. Y funciona muy bien.

Si prefieres no tocar código, hay plugins. Easy Google Fonts te permite integrar fuentes de Google desde el personalizador, sin tocar nada. Es muy intuitivo. Puedes ver los cambios en tiempo real mientras ajustas. Use Any Font te deja subir fuentes personalizadas y aplicarlas fácilmente, incluso si no son de Google. Esto es útil cuando el cliente tiene una fuente específica de su marca que no está disponible en Google.

En la práctica, para la mayoría de casos con Easy Google Fonts tienes más que suficiente. Aunque depende de lo que necesites exactamente. Si trabajas con varias webs de clientes y cada uno tiene sus propias fuentes corporativas, Use Any Font puede ser más útil. Te da más flexibilidad.

Una cosa sobre los plugins: algunos añaden código extra que puede ralentizar un poco la web. No suele ser mucho, pero si tienes una web que ya va justa de velocidad, mejor hacerlo manual. Aunque en la mayoría de casos la diferencia es mínima. Lo he probado en varios proyectos y funciona bien. A veces se ve raro pero funciona.

Si gestionas varias webs de clientes, ya sabrás el lío que puede ser tener que cambiar fuentes en cada una manualmente. En Modular DS, donde centralizamos el mantenimiento de WordPress para agencias y freelancers, vemos esto constantemente. Muchos profesionales acaban usando plugins precisamente por esto: porque necesitan aplicar cambios en múltiples sitios y hacerlo web a web es un infierno. Por eso herramientas que centralizan estas tareas suelen ser la mejor opción cuando manejas muchos proyectos.

Dónde encontrar fuentes para WordPress

Google Fonts es probablemente el sitio más usado. Tiene muchísimas fuentes gratis y optimizadas para web. Solo vas, eliges la que te gusta y la añades. Es fácil. Funciona bien. Lo he usado en muchos proyectos y nunca da problemas. Además están alojadas en servidores de Google, así que se cargan rápido y no consumen recursos de tu servidor.

Esto es importante. Si alojas las fuentes en tu servidor, cada visita tiene que descargarlas desde ahí. Eso puede ralentizar la web si no está bien optimizado. Con Google Fonts no pasa porque Google se encarga de todo. Aunque a veces prefiero alojarlas yo mismo para tener más control. Depende del proyecto.

Adobe Fonts tiene fuentes premium si necesitas algo más exclusivo. Requiere suscripción a Creative Cloud. Son fuentes de muy alta calidad y muchas veces únicas. Si el cliente tiene presupuesto y necesita algo que lo diferencie mucho, puede ser una buena inversión. Aunque no siempre merece la pena. Lo he visto: clientes que pagan por fuentes premium cuando con Google Fonts tenían más que suficiente.

Font Squirrel tiene fuentes gratuitas de buena calidad. Además tiene un generador de @font-face que te ayuda a implementarlas. Esto es útil cuando descargas una fuente y necesitas convertirla a los formatos web correctos. Lo he usado varias veces y funciona.

MyFonts tiene una colección enorme de fuentes premium. Desde las más nuevas hasta clásicos. Es como una librería gigante donde encuentras casi cualquier cosa. Y Creative Market es un mercado donde diseñadores venden fuentes únicas. A veces encuentras joyas ahí que son perfectas para proyectos específicos. Aunque hay que tener cuidado con las licencias.

En la práctica, para la mayoría de webs con Google Fonts tienes más que suficiente. Aunque si el cliente necesita algo muy específico y tiene presupuesto, Adobe Fonts o MyFonts pueden ser buenas opciones. Depende mucho del proyecto. Lo que sí recomiendo es no usar demasiadas fuentes diferentes. Dos o tres como mucho. Si usas más, la web se ve desordenada y además se ralentiza porque tiene que cargar más archivos.

Una cosa que muchos no saben: puedes precargar las fuentes. Esto se hace añadiendo un link rel=»preload» en el header. No es imprescindible pero ayuda bastante, especialmente si usas fuentes personalizadas que no están en Google Fonts. También puedes usar font-display: swap en el CSS. Así el texto se muestra con una fuente del sistema mientras carga la personalizada. No hay ese flash de texto invisible que a veces pasa. Y funciona.

Otra recomendación: limita las variantes de fuente que usas. Si una fuente tiene regular, bold, italic y bold italic, no necesitas cargar las cuatro si solo vas a usar regular y bold. Cada variante es un archivo más. Esto lo he visto mucho: alguien carga todas las variantes «por si acaso» y luego solo usa dos. Es un desperdicio de recursos. Y ralentiza la web.

Al final del día, elegir bien las fuentes y saber cómo añadirlas a WordPress es parte de crear una web que funcione. Si gestionas múltiples sitios WordPress y necesitas ayuda con el mantenimiento, actualizaciones o con otras optimizaciones, herramientas como Modular DS te permiten centralizar todo esto desde un solo panel. Es útil cuando tienes que aplicar cambios en varias webs y no quieres hacerlo una por una. Si necesitas más detalles técnicos, en nuestro artículo sobre cómo subir fuentes personalizadas tienes más información.

Preguntas frecuentes

¿Puedo usar cualquier fuente en WordPress?

Técnicamente sí, siempre que tengas los derechos para usarla o sea de dominio público. Pero ojo con la compatibilidad entre navegadores y dispositivos. Y también con el impacto en la velocidad de carga. Si añades muchas fuentes pesadas, la web se ralentiza. Lo he visto pasar.

¿Afectan las fuentes personalizadas a la velocidad del sitio?

Sí, pueden afectar si no las manejas bien. Para minimizar el impacto, limita el número de variantes que usas. Elige fuentes optimizadas para web. Considera precargar las fuentes. A veces una fuente mal optimizada puede ralentizar bastante la carga. Depende mucho del contexto.

¿Cómo añado una fuente de Google Fonts a WordPress?

Puedes hacerlo directamente con CSS o usando plugins. El método directo es ir a Google Fonts, elegir la fuente y añadir el enlace que te dan en el header.php de tu tema o en las hojas de estilo. Con plugins como Easy Google Fonts es más fácil porque lo haces desde el personalizador sin tocar código. Y funciona muy bien.

¿Necesito saber programar para añadir fuentes personalizadas?

No necesariamente. Aunque hacerlo manualmente implica tocar CSS, hay plugins que lo hacen fácil. Si no sabes código, con un plugin puedes cambiar las fuentes sin problemas. Aunque si quieres más control, saber un poco de CSS ayuda bastante. Depende de lo que necesites exactamente.