¿Estás pensando en incluir una tipografía personalizada en WordPress? Posiblemente quieres que tu web destaque un poco o simplemente conseguir insertar y utilizar un tipo de fuente que le de un toque más personal a tu página. Si trabajas con WP aquí te explico como insertar fuentes personalizadas en tu web.
Desde luego los archivos a modificar en este pequeño tutorial están pensados para wordpress, pero también si eres programador y haces tus propias páginas, debes saber que puedes utilizar el mismo método para agregar las fuentes a tu web personal o a la de algún cliente.
El utilizar fuentes alternativas en temas de WordPress se ha convertido en algo bastante habitual, además hay recursos en los que puedes encontrar cientos de ellas y usarlas de forma gratuíta, incluso sin tener ni siquiera que descargarlas para incluirlas en tu página. Por eso vamos a ver como insertar fuentes gratis en tu sitio.
Agregando fuentes personalizadas en WordPress desde Google Fonts
Como es el principal recurso de tipografías gratis que podemos encontrar, y además las podemos utilizar para cualquier tipo de proyecto que queramos, nos centraremos en las fuentes que nos ofrece Google desde su librería. Puedes encontrarlas todas accediendo aquí, y los pasos a seguir para insertarlas en tu página serán extremadamente sencillos.
Lo primero por supuesto será elegir una que nos guste y vaya con el diseño de nuestra página, y una vez ya tengamos echado el ojo simplemente tendremos que darle al botón que se indica en la imagen.
En la siguiente página abajo del todo encontraremos un recurso que nos indica como agregar el código en nuestro sitio, simplemente tendremos que copiarlo y pegarlo en nuestro archivo header.php en la carpeta del tema, y entre los tags <head>.
Por último para utilizarlas en nuestro diseño, desde el archivo style.css (o como lo hayamos llamado si no estamos en wordpress), simplemente tendremos que utilizar una porción de código similar a esta:
h1 {
font-family: 'Source Sans Pro', sans-serif;
}
Para saber exactamente el código que tenemos que insertar como familia de la fuente, podemos encontrarlo en la misma página que el código a incluir en el header, en el punto 4, que normalmente es el nombre de la fuente que estamos usando sin los símbolos +.
Si no quieres centrarte en utilizar exclusivamente las fuentes de Google, puedes también usar otros recursos como Typekit, fonts.com o FortSquirrel, que también tienen una variedad diferente y puedes usar en tu página de una forma parecida.
¿Tienes alguna fuente personalizada en tu sitio? ¿Cual?