xr:d:DAFlXwxDw:,j:,t:
xr:d:DAFl14XwxDw:74,j:7636261312001343549,t:23110412

Agregar fuentes personalizadas a WordPress

En pocas palabras: Desde WordPress 6.5 (abril 2024) podés instalar fuentes personalizadas sin plugins usando la Biblioteca de Fuentes nativa, en Apariencia › Editor › Estilos › Tipografía. También podés agregarlas manualmente con @font-face en tu CSS o mediante plugins como Custom Fonts o Use Any Font.

Preguntas frecuentes

¿Qué formato de fuente conviene usar en WordPress?

El formato recomendado es WOFF2, porque está comprimido, pesa menos y carga más rápido que TTF u OTF. Todos los navegadores modernos lo soportan, así que es la opción más eficiente para la web.

¿Las fuentes personalizadas hacen más lento mi sitio WordPress?

Pueden afectar la velocidad si cargás muchas familias o pesos innecesarios. Para minimizar el impacto, usá solo los estilos que necesitás, alojá las fuentes de forma local y aplicá la propiedad font-display: swap para evitar que el texto quede invisible mientras carga.

¿Por qué mi fuente personalizada no se muestra después de instalarla?

Las causas más comunes son una ruta incorrecta en el archivo @font-face, el caché del sitio o del navegador, o que el tema esté sobrescribiendo la tipografía. Limpiá el caché, verificá que la URL del archivo sea correcta y revisá que la regla CSS apunte al selector adecuado.

¿Es legal usar cualquier fuente en un sitio web comercial?

No todas las fuentes permiten uso comercial. Antes de instalar una, revisá su licencia: necesitás una que autorice expresamente el uso web (web font) y comercial. Muchas fuentes gratuitas son solo para uso personal, así que verificá siempre los términos.

¿Puedo cargar Google Fonts de forma local en WordPress?

Sí, y es muy recomendable. Descargás los archivos de la fuente, los subís a tu servidor y los referenciás con @font-face en tu CSS. Alojarlas localmente mejora la privacidad del usuario y suele acelerar la carga al evitar peticiones a servidores externos.

Ejemplo práctico

Mariana Quiroga maneja «Tostado de Origen», un blog de cafeterías de especialidad alojado en Donweb. Su tema mostraba todo en Arial y sentía que la marca no transmitía nada. Eligió la tipografía Fraunces para los títulos y Inter para el cuerpo, las descargó desde Google Fonts y las subió a la carpeta /wp-content/themes/mi-tema/fonts/ en formato WOFF2. Después las declaró con @font-face en el style.css del tema hijo y limpió la caché. Todo el cambio le llevó 35 minutos, sin tocar ni un plugin extra.

Al cargar las fuentes en local (en lugar de pedirlas a un servidor externo en cada visita), el sitio dejó de hacer 2 solicitudes a dominios de terceros y el LCP de la home bajó de 2,8 s a 2,1 s, una mejora del 25% según PageSpeed Insights.

Resultado: tiempo de carga del contenido principal reducido un 25% (de 2,8 s a 2,1 s) y una identidad visual propia, todo en menos de 40 minutos de trabajo.

Cómo funciona

  1. Elegí y descargá la fuente: seleccioná una tipografía con licencia de uso permitido y bajá el archivo en formato .ttf, .otf o .woff/.woff2.
  2. Convertí los archivos si hace falta: generá las versiones .woff y .woff2 para que la fuente cargue rápido y se vea bien en todos los navegadores.
  3. Subí los archivos al servidor: cargá las fuentes en una carpeta dentro de tu tema (por ejemplo /fonts) usando el administrador de archivos de tu hosting o FTP.
  4. Declará la fuente con @font-face: agregá la regla CSS que apunta a los archivos subidos y asigná un nombre a la familia tipográfica.
  5. Aplicá la fuente a tu sitio: indicá en el CSS qué elementos (títulos, párrafos, menús) van a usar la nueva tipografía y guardá los cambios para verla en acción.

En 30 segundos

Podés sumar fuentes personalizadas a WordPress de dos maneras: subiéndolas manualmente al tema o usando un plugin, sin depender de las pocas opciones que trae el diseño por defecto. Conseguí tipografías gratuitas y con licencia comercial en sitios como Google Fonts, que tiene más de 900 familias, Font Squirrel o dafont.com. La forma más rápida y sin tocar código es instalar un plugin de fuentes desde el panel de WordPress.

Hay muchas formas de mejorar la apariencia de tu sitio WordPress. Un ejemplo es agregar fuentes a WordPress. Para más detalles, consultá nuestra Developer Newsletter de abril: WP AI Client, Abili.

Sin embargo, dependiendo del tema, la selección de fuentes para WordPress puede ser limitada. Aprendrás cómo instalar fuentes en WordPress tanto manualmente como a través de plugins en esta guía. Para más detalles, consultá nuestra WordCamp Asia 2026 cierra en Mumbai con 2.281 asis.

¿En qué lugar puedo descargar fuentes para WordPress?

Font Squirrel es uno de los muchos sitios que ofrecen fuentes web gratuitas. Es fácil encontrar fuentes gratuitas y licenciadas para uso comercial.

Además, dafont.com ofrece una amplia selección de fuentes web, mientras que Google Fonts tiene más de 900 familias de fuentes.

Otra fuente importante es Envato Elements, que ofrece más de 28.000 fuentes premium.

Consulta 1001 Free Fonts y Fonts.com si buscas una fuente más apropiada para un uso personal.

Convertir las fuentes a un formato que sea accesible para tu sitio web

Debe tenerse en cuenta que algunos navegadores web no pueden cargar todas las fuentes personalizadas. Sin embargo, puedes convertir la fuente a un formato compatible cuando sea necesario.

Antes de convertir fuentes de un formato n otro, veamos los diferentes formatos de fuente:

  • Las fuentes Open Type (OTF) son las fuentes web más populares y son propiedad de Microsoft. Casi todos los navegadores principales soportan este formato.
  • Las fuentes True Type (TTF) fueron creadas por Apple y Microsoft en 1980. Muy comunes en Windows y macOS.
  • El World Wide Web Consortium (W3C) ha recomendado el formato Web Open Font Format (WOFF), que es ampliamente utilizado para páginas web.
  • WOFF 2.0: Debido a sus mejores capacidades de compresión, se considera una alternativa superior a WOFF 1.0. Aunque Safari e Internet Explorer no pueden cargar este formato, Chrome, Firefox y Opera funcionan bien con él.
  • Las fuentes OpenType incrustadas (EOF) son fuentes OTF más pequeñas que se utilizan para incrustar en páginas web. EOF está disponible en los principales navegadores.

Utiliza el Generador de Webfont si no estás seguro de si tu fuente funciona con tu navegador predeterminado. Casi cualquier fuente puede convertirse fácilmente a un formato compatible con la web con esta herramienta:

1. Dirígete al Generador de Webfont.

2. Elige una fuente para convertir haciendo clic en el botón Cargar fuentes.

3. Para confirmar que tus fuentes son legalmente adecuadas para la incrustación web, marca la casilla en la sección Acuerdo.

4. Pulsa el botón «Descargar tu kit» y guarda el archivo .zip en tu computadora.

Agregar fuentes personalizadas a WordPress - 1

5. El archivo incluye fuentes WOFF y WOFF 2.0, así como archivos CSS y una página HTML de demostración.

Cómo puedo agregar fuentes personalizadas a WordPress

Te explicamos cómo añadir fuentes a WordPress de manera personalizada, ya sea añadiendo una manualmente o utilizando plugins.

Agregar fuentes manualmente a WordPress

Puedes agregar fuentes manualmente a tu sitio web si no deseas llenar tu WordPress con plugins. Debes subir tu fuente a tu cuenta de hosting y editar el archivo CSS de tu tema.

Descarga la fuente deseada en tu computadora y, si es necesario, extrae el archivo .zip.

Ahora debes subir tu fuente utilizando un cliente FTP o el Administrador de Archivos de tu proveedor de hosting. Es necesario subir las fuentes a wp-content/themes/tu-tema/fonts. Solo debes crear una carpeta llamada «fonts» si no existe en tu tema.

Una vez que hayas agregado la fuente, debes ir a tu área de administrador de WordPress y seleccionar Apariencia > Editar. En este punto, debes elegir el archivo style.css.

Desplázate hasta el final del código del archivo y agrega este código adicional (para el ejemplo usaremos el tema twentynineteen):

@font-face { font-family: Aguafina Script-Regular; src: 
url(http://misitioweb.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal; }

Para guardar los cambios, selecciona el botón Actualizar Archivo.

Recuerda que cada vez que alguien visita tu sitio web, el código font-face carga la fuente. Sin embargo, la fuente todavía no se aplica a ninguno de los elementos.

Para asignar la fuente a un elemento específico, debes editar el archivo style.css nuevamente. Por ejemplo, agregaríamos la fuente Aguafina Script al título de nuestro sitio web con el siguiente código .título del sitio:

.site-title {
font-family: "Aguafina Script-Regular", Arial, sans-serif;
}

Cómo usar plugins de WordPress para agregar fuentes

La forma más simple de realizar esta actividad es probablemente instalar plugins para añadir fuentes personalizadas a WordPress. Algunas de las opciones más populares son:

Google Fonts Typography

Agregar fuentes personalizadas a WordPress - 2

Para los propietarios de sitios web de WordPress que desean mejorar la estética y la legibilidad de la letra de su contenido, el plugin Google Fonts Typography es una herramienta esencial.

Este plugin versátil te permite acceder directamente a la amplia biblioteca de fuentes de Google, lo que facilita la selección y aplicación de tipografías personalizadas.

El plugin no sólo ofrece una amplia gama de fuentes, sino que también se actualiza constantemente para asegurarse de que esté en línea con las últimas versiones de WordPress.

Custom Fonts

Agregar fuentes personalizadas a WordPress - 3

Para aquellos que desean control total sobre las fuentes de su página web de WordPress, el plugin Custom Fonts es una herramienta esencial.

Este plugin te permite alojar tus propias fuentes de manera local, evitando depender de fuentes externas, lo que mejora la seguridad de tu sitio y la velocidad de carga.

Simplemente instala el plugin y carga tus archivos de fuentes personalizados para usarlo. Una vez que se carguen, podrás aplicar directamente estas fuentes a tus elementos de diseño, como títulos y texto, desde el personalizador de WordPress.

Conclusiones

Aprendiste cómo descargar y convertir fuentes a un formato que funcione con la web. Además, has descubierto dos métodos para agregar fuentes personalizadas a WordPress.

Asegúrate de que el tipo de tipografía que elijas se ajuste al tema y al estilo de tu sitio. Además, te invitamos a que conozcas el mejor hosting para WordPress que ofrece DonWeb para tu negocio.

Volver a

Guias

Publicaciones relacionadas