3 formas para utilizar cualquier tipografía en WordPress

Te voy a mostrar un método muy simple para que puedas utilizar cualquier tipo de tipografía WordPress. Si utilizas WordPress, seguramente estarás familiarizado con las posibilidades que ofrece en cuanto a tipografías para los diferentes titulares y textos (H1, H2, H3… y párrafo). La mayoría de plantillas se integra perfectamente con Google Fonts, y ofrece un selector donde puedes elegir directamente la tipografía que te guste.

Pero en muchas ocasiones lo que nos apetece es usar tipografías, o tipos de letra que no aparecen en la lista. Si sois exigentes e inconformistas, y además os gusta la tipografía y el diseño, puede que os hayáis encontrado con este problema.

Tiene solución. Es posible instalar otros tipos de Letra en WordPress, y hay varias formas. Vamos a ver 3 maneras de hacerlo.

En éste post puedes ver un pack de tipografías GRATIS y descargártelas para tu uso personal. También tienes una lista con unos cuantos sitios para descargar tipografías, aunque para mi, últimamente el que se lleva la palma es Befonts.

 

1 – Cómo instalar tipografías en WordPress con el mátodo @font-face

¿Que ocurre si quieres usar otra fuente que has comprado, o algunas de las tantas fuentes gratuitas que hay por internet? Puedes hacer que se muestren con el método @font-face. El método @font-face te va a permitir, a través de un código introducido en el CSS de tu web, hacer que se muestren los tipos de letra que tu decidas, los cuales previamente tienes que haber metido dentro de otra carpeta de tu web. No te preocupes si te suena todo muy raro o difícil, porque vamos a ver cómo hacerlo paso a paso.

El proceso sería el siguiente, lo primero es generar el código para que funcione. para ello Fontsquirrel nos lo pone a huevo:

  • Entra en Fontsquirrel y haz click en la sección”generator”, situada en el menú.
  • Sube el archivo de tu tipografía, y descarga el “kit”.

tipografias gratis web

  • Abre el documento que acabas de descargar, y pega todos los archivos de las tipografías (.ttf, .eot, .woff, .woff2 y .svg) en tu hosting, dentro de la carpeta “fonts” de tu plantilla. Debes buscarla dentro de: public_html/wp-content/themes/nombre de tu theme/fonts
  • Abre el archivo stylesheet.css que se encuentra en lo que te has descargado de Fontsquirrel en el paso nº 2, copia el código, y pégalo en la sección “custom css” de tu página web. Quizá debas modificar la URL y poner la ruta completa para que funcione.

 

tipografias gratuitas

SUBSCRÍBETE 

Suscríbete a una lista de personas que están interesadas en seguir obteniendo trucos de Marketing Online.

  • Asocia la tipografía a cada tipo de texto, mediante código CSS. Me explico: Por ejemplo, para que todos los H1 tuvieran la tipografía “futura”, tendrías que añadir el siguiente CSS:
h1 {

font-family: futura; }

Hecho esto, debes comprobar que se ve correctamente desde otro dispositivo u ordenador en el cual no tengas instalada la tipografía, para así tener una visión real. Si no te ha funcionado, prueba especificando un poco más la ruta en la que se encuentran los tipos de letra (lo que hiciste en el paso 3º), en la propiedad @font-face, en el código CSS. Es decir, pon la dirección mas completa.

Por ejemplo:


@font-face {
font-family: ‘loveloblack’;
src: url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.eot’);
src: url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.woff2′) format(‘woff2’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.woff’) format(‘woff’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.ttf’) format(‘truetype’),
url(‘/wp-content/themes/bridge/fonts/lovelo_black-webfont.svg#loveloblack’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

 

 

Es importante que tengas la tipografía en todos los formatos: .eot, .woff, .woff2, .ttf, .svg.

 

Plugins para utilizar cualquier tipografía en WordPress

Otra manera, mas fácil de instalar fuentes externas en WordPress es haciendo uso de plugins.

2 – Use any font plugin

Si quieres usar tus propias tipografías de forma sencilla en WordPress, puedes hacerlo utilizando un plugin llamado Use any font. Este plugin te permite importar una tipografía gratis, e instalarla para poder utilizarla en tu página web.

El problema es que únicamente te permite una tipografía de forma gratuita. Por lo que si necesitases instalar alguna mas, deberás pagar.

3 – Easy Google Fonts plugin

Easy Google Fonts es una forma muy simple de usar cualquier fuente. La ventaja que tiene este plugin es que no necesitas importar ningún tipo de letra a tu WordPress, sino  que podrás elegir entre todas las tipografías que tiene Google Fonts. Esto es una maravilla porque Google Fonts tiene mas de 800 tipografías para elegir.

Éste plugin además te dejará seleccionar  el color que quieras aplicar a cada tipo de letra dentro de tu sitio web. La mayoría de plantillas de WordPress tienen ya la posibilidad de usar Google Fonts dentro de sus opciones de configuración. Pero si la tuya no es de esas, y has visto alguna Google font que te guste, con este plugin lo tendrás fácil.

 

Ya no hay límites para adaptar tu web a tu imagen corporativa, con estos métodos podrás huir de las tipografías incluidas en tu plantilla e instalar tus propias fuentes en WordPress. pruébalo, y si tienes alguna duda intentamos resolverlo en los comentarios.

3 formas para utilizar cualquier tipografía en WordPress
5 (100%) 5 votes

Álvaro Peña Costilla

Author Álvaro Peña Costilla

Dedicado al Marketing Online y al diseño web en Tooeasy. Me gusta todo lo relacionado con las nuevas tecnologías, el diseño gráfico, el branding y la fotografía.

More posts by Álvaro Peña Costilla
Twittear
Compartir
Compartir
+1
Pin