Añadir Google Fonts en tu Página Web (CSS)

Todos hemos empezado creando páginas web con nuestras fuentes típicas: Arial, Times New Roman, Century Gothic, Verdana, etc... Estas son las llamadas fuentes seguras. Son accesibles desde cualquier navegador y no necesitan librerías externas para ser cargadas.

Hoy en día podemos encontrar varios recursos que nos facilitan dar un look personalizado a nuestra web instalando otros tipos de fuentes o tipografías.

Google Fonts es la más accesible y fiable. Nos da la posibilidad de utilizar filtros para encontrar el tipo de fuente que buscamos según las necesidades y el tipo de página web que estemos diseñando.

Hasta aquí todo bien, pero también hay que tener en cuenta el lado negativo. Al ser un recurso externo también nos penaliza el tiempo de carga de nuestra web. Lo recomendable es utilizar como máximo 3 fuentes diferentes: una para los títulos, otra para el texto de nuestra web y la última para textos que queremos resaltar o utilizar en casos especiales. Además, la homogeneidad es uno de los principios del diseño web y si empezamos a mezclar tipos de fuentes y tamaños estaremos infringiendo esta ley universal.

Instalar una fuente de Google Fonts es fácil. Utilizaremos como ejemplo la fuente ROBOTO y MODAK. La herramienta ya nos da información de como instalarlo. Lo haremos paso a paso:

INSTALACIÓN STANDARD

Añadiremos a nuestro html entre la etiqueta <head></head> este código:

<link href="https://fonts.googleapis.com/css?family=Modak|Roboto" rel="stylesheet">

INSTALACIÓN VÍA @IMPORT

Esta es la forma más recomendada de hacerlo. Insertamos en primera línea donde tengamos nuestro CSS el código generado:

@import url('https://fonts.googleapis.com/css?family=Modak|Roboto');

 

UTILIZACIÓN

Para el body utilizaremos la fuente ROBOTO:

body { font-family: 'Roboto', sans-serif; }

Para las etiquetas de títulos h1, h2 y h3 la fuente MODAK:

h1, h2, h3 {font-family: 'Modak', cursive;}

RESULTADO

Para los títulos:

Título H1, Título H2, Título H3

Para el body:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dictum erat. Nullam lobortis non metus eget ultrices. Phasellus commodo dictum purus sed fermentum.