Vamos a ver como añadir tipografías de Google Web Fonts a nuestra página web.
Tabla de contenidos
Google Fonts
Google Fonts es un directorio de tipografías libre. Muchas de las fuentes están bajo la SIL Licencia de Fuente Abierta (SIL Open Font License) 1.1, y otras bajo la Licencia de apache (Apache License), ambas son licencias de software libre . Esto es importante de cara a realizar un uso de dichas fuentes.
Implementación en las páginas web
Hay que tener en cuenta que es un recurso externo, lo que implica aumentar el tiempo de carga de nuestra página web, siempre que queramos usarlas sin alojalarlas en nuestro servidor web. No se recomienda usar mas de 3 fuentes diferentes de Google fonts mediante este método de carga.
Cabe destacar que Google fonts nos permite también la descarga de las fuentes, para poder instalarlas en nuestro PC o en nuestro servidor web para poder usarlas a través de la regla-arroba @font-face
Obtener las fuentes de Google fonts
Lo primero es acceder ala página de Google Fonts. Una vez allí, nos encontraremos una interfaz como la de la imagen inferior, en la cual están detalladas las partes de la misma.
A continuación vamos a ver la secuencia, de un supuesto caso en el que quiero aplicar en mi página web las fuentes Lato Bold y Lato Regular. Utilizo el buscador poniendo Lato, en el termino de búsqueda y luego selecciono, en este caso, las 2 fuentes que me interesan de esta familia
Una vez seleccionadas, le damos al botón de Ver fuentes seleccionadas y veremos la pantalla inferior en la cual podemos seleccionar el método para embeber la fuentes en nuestra web (etiqueta <link> o @import) o bien descargarlas.
La etiqueta <link>
Si embebemos la fuente mediante la etiqueta <link>, el código que nos proporciona Google fonts, hay que insertarlo en el <head> de nuestro HTML.
<head> <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet"> </head>
@import
Si embebemos la fuente mediante @import debemos insertar obligatoriamente el código que nos proporciona Google fonts al principio de nuestra hoja de estilos CSS. Esta opción es muy util para utilizar tipografías de Google fonts en WordPress, ya que no nos hace falta acceder al <head> y hacemos la carga exclusivamente por la CSS
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
*{
margin: 0;
padding: 0;
}
Plugin para WordPress
También tenemos la opción si no controlamos de código y estamos usando un WordPress, de aplicar las fuentes de Google Web fonts a través de un plugin. Las opciones para aplicar las fuentes son mucho más limitadas que haciéndolo a través de código CSS.
El plugin nos deja controlar la tipografía para cada cada uno de los encabezados desde el H1 hasta el H6 así como la de los párrafos.
El plugin se llama Easy Google Fonts y lo podéis encontrar en el repositorio de WordPress
