Como usar Google Web Fonts en mi página web con CSS

Vamos a ver como añadir tipografías de Google Web Fonts a nuestra página web.

 

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.

google fonts web

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

 

 

lato-google-font

 

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.

embeber-fuentes-seleccionadas

 

 

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

easy-google-fonts

 

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *