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
Linkar las fuentes de Google fonts
Desde la página de Google fonts, hay que obtener el código para embeber las fuentes
Y ahora tenemos 2 maneras de linkar las fuentes de Google fonts
Mediante la etiqueta <link> o @import
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>
Luego en el CSS aplicaríamos la propiedad CSS font-family, tal y como nos la proporciona Google fonts
h1{
font-family: 'Bangers', cursive;
}
@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;
}
body{
font-family: 'Open Sans', sans-serif;
}
header{
background-color: #F9F8FC;
height: 316px;
}Luego en el CSS aplicaríamos la propiedad CSS font-family, tal y como nos la proporciona Google fonts
h1{
font-family: 'Bangers', cursive;
}
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
