Categorías
CSS HTML tipografías

Añadir fuentes de Google Fonts en WordPress

Google nos da la oportunidad de usar diferentes tipos de letras en nuestro sitio web a través de su banco de tipografías gratuitas. Y lo hace de una manera muy sencilla que vamos a aprender en este post.

Conociendo el entorno de Google Fonts

Para empezar, vayamos a la página de Google Fonts y veamos cómo funciona. Te encontrarás con un directorio de todas las fuentes de Google Fonts. Puedes buscar directamente la fuente o encontrar la apropiada a través de los filtros de categorías, idioma o propiedades

Directorio de fuentes de Google Fonts

Al hacer clic en la tipografía elegida, en mi caso he elegido Oleo Script, Google te mostrará las diferentes variantes de esa tipogra´fía, pudiendo elegir una a una las que necesitas a través de la opción «Seleccionar este estilo». Fíjate cómo una vez seleccionas el estilo, se abre una nueva columna en la parte derecha con dos pestañas: resumen y añadir.

En la primera pestaña, «review», verás el resumen de todas las fuentes elegidas de las diferentes tipografías. En la pestaña Embed, tienes el código que debes incrustar en la web para poder visualizarla.

Ten en cuenta que cuantas más tipografías estés utilizando en tu página, más peso tendrá la misma y en consecuencia tardará más a la hora de cargarse.

Los pasos a dar parecen poco y sencillos. Por un lado debes incluir la etiqueta <link> dentro de las etiquetas <head> y </head> de tu html y por otro lado especificar la/s familias a través de la hoja de estilos CSS. Pero, ¿qué pasa cuando no tenemos ni idea de cómo llevarlas a cabo? Vamos por partes.

Añadir código entre las etiquetas <head> de una página en WordPress

Las etiquetas <head> de una web hecha en WordPress se encuentran en el archivo header.php. ¿Cómo accedemos a él? Podemos hacerlo de dos formas:

  1. Mediante FTP.
  2. A través del panel de administración de WordPress.

Vamos a ver las dos formas, pero mi consejo es que siempre que hagas cualquier cambio en un archivo de la web lo hagas a través del FTP. ¿Por qué? Pues porque si escribes mal el código o te falla la conexión en el momento del guardado desde el panel de administración de WordPress, vas a tener que contactar con el servidor para que recupere una copia de seguridad de tu página (si es que ofrece ese servicio gratuito o no). Intenta hacerte la vida más fácil 🙂

Acceder al archivo header.php mediante FTP

A través de los datos que obtendrás desde el servidor web que deben ser el nombre del servidor, usuario y contraseña podrás entrar en los archivos de tu página web mediante FTP.

Una vez dentro, esta es la ruta para llegar hasta el archivo header.php:

wp-content > themes > Nombre del tema que estás utilizando > header.php

Te recomiendo que hagas una copia de seguridad de este archivo antes de editarla. Así, en el caso de que surja cualquier problema, siempre tendrás la versión original del archivo.

Acceder al archivo header.php mediante el panel de administración de WordPress

Desde el backend de WordPress ve hacia Apariencia > Editor de temas. Te encontrarás con esta pantalla. En la columna derecha tienes un listado de todos los archivos correspondientes al tema que estás utilizando en tu WordPress. En la parte izquierda, el contenido. Haz click en header.php

Editor de temas de WordPress

Integrar Google Fonts en WordPress

Ahora que ya sabemos cómo acceder a los archivos del tema (recuerda que mi consejo es hacerlo a través del FTP) vamos a integrar Google Fonts. Para ello copiamos el código que nos ofrece la web de Google Fonts en la pestaña Embed como hemos visto anteriormente.

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">

Y lo pegamos justamente antes de la linea de código wp_head.

<?php wp_head(); ?>

El código debe quedar así:

<link href="https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap" rel="stylesheet">
<?php wp_head(); ?>

Guardamos el archivo y nos aseguramos de subirlo correctamente al FTP. Tendremos que sobreescribir el archivo anterior. No te olvides de tener tu copia de seguridad del archivo header.php a mano por lo que pueda pasar.

Ahora vamos a acceder a añadir el estilo CSS y lo vamos a hacer desde el panel de administración de WordPress. Tan fácil como ir Apariencia > Personalizar > CSS adicional. Y aquí, escribimos lo siguiente:

* { font-family: 'Oleo Script', cursive; }

Y te debe quedar algo como en la siguiente imagen. Con el asterisco *, le estamos diciendo que queremos que todos los elementos de nuestra página usen la tipografía ‘Oleo Script’. Guardamos haciendo clic en Publicar.

Añadir estilos CSS desde el panel de administración de WordPress

Para los maquetadores, es una ventaja poder utilizar este tipo de recursos que ofrece Google. Puedes darle un toque personal a tu proyecto con una tipografía diferente, simplificas el peso de la página, ya que las tipografías están ubicadas en servidores de Google y además y no menos importante, son fuentes de código abierto, gratuitas. ¡Así que solo queda disfrutar! 🙂

Categorías
CSS HTML Maquetación web tipografías

Añadir Adobe Adge Web fonts a mi página web

Si hace unos días aprendíamos cómo utilizar y añadir Google Web Fonts a nuestra página web, hoy le toca el turno a Adobe Edge Web Fonts, un servicio  que nos permite disponer de cientos de tipografías gratuitas para nuestra página web.

Adobe Edge Web Fonts es una aplicación que nos ofrece un catálogo de unas 500 fuentes para ser usadas en tus páginas. Este proyecto, que va en paralelo con Google Web Fonts, nos aporta solidez y versatilidad a la hora de encarar un proyecto web.

En este sencillo post vamos a aprender cómo utilizar esta aplicación en tan solo unos pasos. 🙂

1

Desde Adobe Edge Web Fonts  hacemos scroll hasta llegar al siguiente punto de la página:

adobe edge fonts
2

 Elegimos la tipografía que vamos a usar a la vez que obtenemos la muestra de cómo quedaría en pantalla. Copiamos el código naranja que se nos muestra más abajo y lo pegamos en el archivo HTML antes del cierre de la etiqueta </head>. En nuestro caso, tomamos como ejemplo la tipografía «Quicksand»:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Añadir Adobe Edge Web Fonts a mi página web</title>
        <script src="http://use.edgefonts.net/quicksand.js"></script>
    </head>
3

 Añadimos en la hoja de estilos CSS la propiedad de font-family a la etiqueta que nos interesa. Por ejemplo un titular  h1:

h1 {
  font-family: quicksand, serif;
}
4

 Si además queremos especificar que nuestro titular sea normal, negrita o cursiva debemos ir a la página con la documentación completa donde nos señalan todas las fuentes tipográficas de las que dispone nuestra familia elegida. Lo vemos con el ejemplo:

añadir diferentes tipografias en mi página web

Quickdand tiene 6 diferentes fuentes tipográficas. Pongamos que nuestra cabecera es Bold Italic. El código CSS quedará:

h1 {
  font-family: quicksand, serif;
  font-weight:700;
  font-style:italic;
}

¿Has visto qué sencillo? Dependiendo de las fuentes tipográficas que tiene cada familia, usaremos las propiedades de font-weight y font-style de diferente manera. Donde:

  • n e i corresponden a las propiedades font-style:normal y font-style:italic respectivamente.
  • El número que les sucede corresponde a la propiedad font-weight.

En el siguiente listado vemos la relación de n e i dentro de las propiedades CSS con el ejemplo de la fuente Quicksand:

n3      font-weight:300;
n4      font-weight:400;
n7      font-weight:700;

i3      font-weight:300;      font-family:italic;
i4      font-weight:400;      font-family:italic;
i7      font-weight:700;      font-family:italic;

Después de estos sencillos pasos solo queda practicar. !Ánimo! Y hasta el siguiente post 🙂