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

 

Linkar las fuentes de Google fonts

Desde la página de Google fonts, hay que obtener el código para embeber las fuentes

google-fonts

families-selected-google-fonts

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.

Luego en el CSS aplicaríamos la propiedad CSS font-family, tal y como nos la proporciona Google fonts

font-family-google-fonts

 

 

 

 

 

 

 

 

 

@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

Luego en el CSS aplicaríamos la propiedad CSS font-family, tal y como nos la proporciona Google fonts

 

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 un comentario

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