Cómo modificar las fuentes de tu sitio web

Una vez hecha la instalación de nuestro sitio web en WordPress puede ocurrir que el tipo de fuente del tema elegido (o el que venga por defecto) no sea de nuestro agrado y nos preguntemos cómo modificar dichas fuentes por otras más a nuestro gusto.

Pues bien, el proceso de modificación de las fuentes no es complicado y vamos a tratar de explicar aquí, cómo hacerlo.

Elegir nuevas fuentes

Debemos tener en cuenta que algunas fuentes están sujetas a derechos de autor y en ese caso tendremos que pagar el canon estipulado. En el caso de páginas web, lo normal es establecer tarifas de pago por número de visitas: por ejemplo, 50$ por 100.000 visitas (páginas vistas).

También podemos recurrir a repositorios con fuentes gratuitas, como el que nos ofrece Google Fonts. En el momento en que se está redactando este tutorial Google Fonts nos ofrece 915 familias de fuentes. Esto, en principio, debería ser más que suficiente para satisfacer los gustos más exquisitos, de no ser así, siempre contamos con la opción de pago. El procedimiento a seguir es muy similar.

Figura 1: Pantalla de inicio de la web de Google Fonts
Figura 1: Pantalla de inicio de la web de Google Fonts

Para este tutorial vamos a suponer que deseamos que nuestros contenidos utilicen dos familias de fuente: «Lato» para los títulares y «Tinos» para los párrafos.

En la figura 1 vemos el aspecto que nos presenta la web de Google Fonts y en la esquina superior derecha, nos aparece un cajetín de búsqueda en el que colocaremos la palabra: lato. Ver figura 2

Figura 2: Cajetín de búsqueda de la fuente deseada
Figura 2: Cajetín de búsqueda de la fuente deseada

Hecho esto, en el panel principal de dicha web nos aparecerá la fuente seleccionada. Ver figura 3.

Figura 3: Familia seleccionada en Google Fonts
Figura 3: Familia seleccionada en Google Fonts

Si hacemos clic en el signo más que aparece marcado en la figura 3, lo que habremos hecho es seleccionar dicha familia de fuentes para su posterior descarga. Al hacerlo nos aparecerá al pie de la pantalla la indicación de una fuente seleccionada que hemos destacado en la figura 4.

Figura 4: Indicador de familia seleccionada
Figura 4: Indicador de familia seleccionada

Este proceso debemos repetirlo para la familia de fuentes Tinos. Hecho eso, haremos clic en la rayita blanca que nos aparece en el bloque negro de la figura 4 y se nos abrirá la ventana que representamos en la figura 5.

Figura 5: Códigos, de Google Fonts, para importar e insertar fuentes
Figura 5: Códigos, de Google Fonts, para importar e insertar fuentes

Existen varios procedimientos para incorporar nuevas fuentes en nuestro sitio web, en este caso, hemos escogido el que más me gusta a mí, pero ya sabes que «sobre gustos no hay nada escrito». Lo que haremos será: importar la fuente a nuestro archivo CSS (por lo general style.css) y luego definir los selectores (css) a los que aplicar cada fuente.

El código siguiente lo incluiremos en la cabecera de nuestro archivo style.css.

@import url('https://fonts.googleapis.com/css?family=Lato|Tinos');

Para ello iremos, en nuestro panel de administración de WordPress a: Apariencia -> Editor (Ver figura 6.

Figura 6: Editor de código en archivos de nuestro theme
Figura 6: Editor de código en archivos de nuestro theme

Una vez hayas hecho clic en «Editor» te aparecerá un panel de control que te permitirá modificar todos los archivos de tu tema. Esto es muy peligroso y debes andar con mucho cuidado con los cambios que hagas aquí. ¡La puedes liar parda!

Incorporar las nuevas fuentes

Figura 7:  Incorporación del código de importación de familia de fuentes
Figura 7: Incorporación del código de importación de familia de fuentes

Como puedes observar, el código ha sido insertado por encima de la etiqueta «html» de la hoja de estilos. Es importante que lo hagas así, ya que nuestro código debe incluirse, para importación, por delante de cualquier otro código CSS de nuestro tema.

A partir del momento en que hagas clic en el botón «Actualizar archivo» tu nueva fuente estará disponible para su uso, aunque no aparecerá en ningún contenido de tu web porque aún no hemos dado instrucciones de dónde deben aparecer tanto una como la otra. Eso es lo que vamos a hacer a partir de ahora.

Figura 8: Modificar la fuente  en el selector body
Figura 8: Modificar la fuente en el selector body

Como vemos en la figura 8, hemos localizado el selector body, comentado la declaración de fuente anterior (Source Sans Pro) para incorporar nuestra nueva fuente «Tinos». De esta forma hemos hecho que esta nueva fuente sea la que nuestro sistema tendrá por defecto. Es decir, siempre que no haya ninguna otra instrucción que lo contradiga.

Ahora le toca el turno a los títulos de los contenidos, para ello tenemos que modificar los selectores h1, h2… h6 (Ver figura 9.

Figura 9: Modificación de los títulos de los distintos contenidos de la web.
Figura 9: Modificación de los títulos de los distintos contenidos de la web.

Como vemos se ha comentado la línea correspondiente a la fuente anterior (Source Sans Pro) y se ha incorporado la nueva: Lato.

Este es el proceso que debemos continuar con todos los selectores sobre los que queramos actuar para modificar la fuente que deseemos aplicar.

Ir arriba