Cómo añadir fuentes personalizadas a WordPress

Hay innumerables maneras de hacer que tu sitio de WordPress se vea más agradable visualmente. Una de ellas es añadir fuentes personalizadas.

Sin embargo, la elección de las fuentes de WordPress puede ser limitada y depender del tema. En este artículo, aprenderás cómo añadir fuentes a WordPress tanto manualmente como mediante plugins.

¿Dónde descargar fuentes para WordPress?

Hay una gran variedad de sitios web entre los que puedes elegir.

Font Squirrel es una de las opciones más populares y puedes encontrar fuentes gratis para usar en tus proyectos comerciales. Google Web Font Service es otra de las opciones más populares, en donde encontrarás una gran cantidad de fuentes hechas por Google para usarse en más de 135 lenguajes. Edge Web Fonts es otra alternativa gratuita hecha por el equipo de Adobe.

También hay otras alternativas como Typekit y Fonts.com.

Convertir las fuentes a un formato web amigable

Una vez que hayas encontrado la fuente que quieres usar en tu sitio web es momento de revisar su formato. Vale la pena mencionar que no todos los tipos de fuentes son soportados por los navegadores web. Pero no tienes por qué preocuparte, incluso los formatos que no son soportados se pueden convertir a un formato que sea compatible.

Antes de que comencemos a convertir las fuentes de un formato a otro, tienes que saber cuáles son los distintos tipos de formatos:

• Open Type Fonts: tipo de fuente que se abrevia como OTF, son aquellos que comúnmente se usan en los sitios web y es un tipo registrado por Microsoft. Funcionan a la perfección en la mayoría de los navegadores.
• True Type Fonts: abreviado como TTF, son un tipo de fuente desarrollado por Microsoft y Apple en 1980 y fueron muy usados por los sistemas operativos de ambas compañías. También la mayoría de los navegadores los soporta.
• Web Open Font Format: con su abreviatura WOFF, este tipo de fuente se utiliza mucho en páginas web y es el tipo de fuente que recomienda W3C. Son soportados por la mayoría de los navegadores, por lo que no debería de haber ningún problema.
• WOFF 2.0: se puede decir que las fuentes WOFF 2.0 están al borde con respecto a las WOFF 1.0 debido a que tiene una mejor habilidad de compresión. No es soportada por navegadores como Internet Explorer o Safari, pero no tienen problemas con Chrome, Firefox u Opera.
• Embedded Open Type Fonts: estas son fuentes OTF compactas que se usan como fuentes para incrustarse en los sitios web. La mayoría de los navegadores disponibles las admiten.

En caso de que no estés seguro si la fuente que quieres usar es compatible o no, puedes usar Web Font Generator Tool, herramienta que te permite convertir la mayoría de las fuentes a un formato web-amigable. Funciona muy sencillo:

1. Ingresa a su sitio web.
2. Presiona el botón ‘Upload Fonts’ para que se abra el explorador de archivo y puedas seleccionar la o las fuentes que quieras convertir a un formato web-amigable.
3. Antes de poder continuar tienes que aceptar el acuerdo “Agreement” al seleccionar la casilla indicando que estás subiendo una fuente legal.
4. Ahora presiona el botón ‘Download’ que debió de haber aparecido. Selecciona en que carpeta de tu equipo quieres guardar el archivo .zip con las fuentes y guardalo.
5. Dentro del archivo que descargaste te encontraras tus fuentes en los formatos WOFF y WOFF 2.0 junto con sus archivos CSS y una página HTML demo. Estos formatos son aceptados por la mayoría de los navegadores.

¿Qué necesitas para usarlas en WordPress?

• Acceso a tu área de administrador de WordPress.
• Acceso al panel de control de tu Hosting o un cliente FTP.

1. Añadir fuentes personalizadas a WordPress usando plugins

Los plugins son la forma más sencilla de añadir fuentes a WordPress. Aquí tienes algunos de los plugins más populares:

WP Google Fonts

WP Google Fonts es la mejor forma de añadir fuentes personalizadas a tu WordPress. Este plugin incluye de forma automática al código de tu sitio lo necesario para comenzar a usar todas sus fuentes.

Lo único que tienes que hacer es instalar el plugin desde el directorio de plugins de WordPress. Luego ir a Google Font Control Panel y seleccionar los cambios que quieras hacer en tus fuentes.

Typekit Fonts para WordPress

Si tienes deseos de añadir las fuentes de Typekit Fonts a tu WordPress este plugin es tu mejor opción. Solo tienes que inscribirte en la página de Typekit y crear tu propio kit de fuentes.

Una vez que te hayas registrado y hayas creado tu kit, ya puedes utilizar el plugin de WordPress. Para configurarlo solo tienes que entrar a ‘Settings’ (Ajustes) > Typekit Fonts y pegar el código embed de tu kit. Este plugin cargará automáticamente las fuentes que estén agregadas en tu kit.

Use Any Fonts

Use Any Fonts es otro de los plugins más usados para añadir una gran variedad de fuentes personalizadas a tu sitio de WordPress. Al igual que los demás de este tutorial, lo puedes instalar desde el directorio oficial de plugins de WordPress. Una vez que hayas terminado con la instalación, ve a la sección de Use Any Fonts en el menú de administrador, crea una API Key y presiona el botón de ‘Verify’ (Verificar).

Cuando hayas terminado la verificación, el plugin te permitirá asignar fuentes personalizadas.

2.- Añadir fuentes a WordPress manualmente

Si no quieres instalar ningún plugin e tu sitio y prefieres hacer todo manualmente, también lo puedes hacer de una forma muy sencilla: tienes que subir las fuentes a tu hosting y editar el archivo CSS de tu tema.

Aquí tienes las instrucciones para hacerlo:

1. Tener la fuente descargada en tu computadora. No olvides tenerla en formato web-amigable.
2. Si la fuente se descargó en un archivo .zip debes de descomprimir el archivo.
3. Ahora tienes que subir tu fuente usando un cliente FTP o el Administrador de Archivos de tu hosting. Las fuentes se tienen que subir a la siguiente dirección: wp-content/tehemes/tu-theme/fonts. Si en tu tema no existe una carpeta llamada ‘fonts’ solo tienes que crearla.
4. Una vez que hayas subido la fuente tienes que dirigirte a tu área de administrador de WordPress ir a Apariencia > Editar. Ahí tienes que seleccionar el archivo style.css. Desplazate hasta el final del código de ese archivo y agrega el siguiente código (no olvides cambiar los valores font-family y url para que queden con tu fuente):

@font-face {

font-family: Aguafina Script-Regular;

src: url(http://hostinger-tutorials.com/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);

font-weight: normal;

}

1. Luego de agregar el código al final del archivo presiona el botón ‘Update file’ (Actualizar archivo) para que se guarden los cambios.

El código font-face carga las fuentes cada vez que un visitante entra a tu sitio web. Sin embargo, la fuente sigue sin aplicarse a los elementos. Así que por ahora no verás ningún cambio. En orden para asignar una fuente específica a un elemento, necesitas editar el archivo style.css. Por ejemplo, el código para aplicar la fuente Aguafina Script al título de nuestra página es:

.site-title {

font-family: "Aguafina Script-Regular", Arial, sans-serif;

}

Esperemos que este tutorial te haya sido de ayuda para usar fuentes personalizadas en tu sitio de WordPress.

Conclusion

Ahora posees una gran variedad de sitios donde puedes descargar fuentes, personaliza tu WordPress sin problemas

Añadir fuentes a WordPress – Preguntas frecuentes

Ahora que ya sabes cómo añadir una fuente personalizada a WordPress, aquí tiene algunas preguntas comunes sobre el tema.