Webfonts con Google Fonts

neo 2.0 - Webfonts con Google Fonts

Gracias a Google Fonts podemos utilizar las diferentes tipografías de su librería para nuestros diseños Web.

Entra en Google Fonts, selecciona la tipografía o tipografías que quieres utilizar, por ejemplo, vamos a seleccionar la tipografía Monserrat. Usamos el buscador que aparece en la parte superior derecha, donde pone “Search”; escribimos Montserrat y automáticamente nos mostrará tres resultados:

  • Montserrat.
  • Montserrat Alternates.
  • Montserrat Subrayada.

Seleccionamos la primera “Montserrat” haciendo clic en el botón (+).

Ahora en la parte inferior aparece una ventana desplegable con las familias tipográficas seleccionadas, en nuestro caso “1 Family Selected”. Haciendo clic sobre esa ventana nos abrirá las instrucciones con el código que debemos copiar y pegar en nuestro sitio para embeber la tipografía, así como la propiedad CSS para hacer uso de la misma. Fíjate que tenemos dos pestañas: “EMBEBED” y “CUSTOMIZE”.

Copia y pega el siguiente código entre las etiquetas <head> </head> de tu sitio web.

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

En tu hoja de estilos CSS copia y pega la siguiente propiedad en la clase o clases que desees:

font-family: 'Montserrat', sans-serif;

Si hacemos clic en la pestaña “CUSTOMIZE”, podremos añadir o seleccionar las distintas tipografías que componen dicha familia tipográfica, así como el “Lenguage”.

Para este caso podremos seleccionar entre las siguientes tipografías que componen la familia tipográfica:

  • thin 100
  • thin 100 italic
  • extra-light 200
  • extra-light 200 italic
  • light 300
  • light 300 italic
  • regular 400
  • regular 400 italic
  • medium 500
  • medium 500 italic
  • semi-bold 600
  • semi-bold 600 italic
  • bod 700
  • bold 700 italic
  • extra-bold 800
  • extra bold 800 italic
  • black 900
  • black 900 italic

Y en “Lenguages”:

  • Latin
  • Latin Extended
  • Vietnamese

Al seleccionar una o varias tipografías, cambiará el código que debemos pegar entre las etiquetas <head> </head> de nuestra Web, así como las propiedades CSS que tendremos que emplear en cada caso.

Supongamos que hemos seleccionado del listado las siguientes tipografías:

  • light 300
  • light 300 italic
  • regular 400
  • regular 400 italic
  • medium 500
  • medium 500 italic

Y no hemos modificado el “Lenguage”, dejando el que viene por defecto “Latin”.

Si volvemos a la pestaña “EMBEBED”, habrá cambiado el código que debemos copiar y pegar entre las etiquetas <head> </head> por el siguiente:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">

Y en nuestras clases CSS tendremos que añadir determinadas propiedades para usar la tipografía correcta.

Es decir, si queremos usar la tipografía Montserrat light 300 (Montserrat:300), tendremos que añadir las siguientes propiedades a nuestra clase CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 300;

Si queremos que además sea en itálica (cursiva), usaremos la tipografía Montserrat:300i, añadiendo las siguientes propiedades a nuestras clases CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-style: italic;

Puedes usar el método estándar para hacer la llamada que carga la tipografía:

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i" rel="stylesheet">

O puedes usar un método alternativo, @import, código que deberás copiar y pegar en tus hojas de estilos CSS o entres las etiquetas <style> </style>:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i');

Elegir entre un método u otro, dependerá de cómo esté construido tu sitio Web; es decir, si tu página web no utiliza una plantilla, y cada sección de tu web es un archivo HTML o PHP con sus correspondientes etiquetas <head> </head> quizás sea más simple utilizar el método @import en tu hoja de estilos CSS, si por el contrario tu web hace uso de una plantilla y solo tienes un fichero con las etiquetas <head> </head>, el cual se carga automáticamente en todas las páginas de tu sitio, utiliza el método estándar.

Por último, añadir un consejo: No es recomendable utilizar diferentes familias tipográficas en un sitio Web, al menos, no más de 2.

No hay comentarios:

Publicar un comentario

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?