Si hace unos días aprendíamos cómo utilizar y añadir Google Web Fonts a nuestra página web, hoy le toca el turno a Adobe Edge Web Fonts, un servicio  que nos permite disponer de cientos de tipografías gratuitas para nuestra página web.

Adobe Edge Web Fonts es una aplicación que nos ofrece un catálogo de unas 500 fuentes para ser usadas en tus páginas. Este proyecto, que va en paralelo con Google Web Fonts, nos aporta solidez y versatilidad a la hora de encarar un proyecto web.

En este sencillo post vamos a aprender cómo utilizar esta aplicación en tan solo unos pasos. 🙂

1

Desde Adobe Edge Web Fonts  hacemos scroll hasta llegar al siguiente punto de la página:

adobe edge fonts
2

 Elegimos la tipografía que vamos a usar a la vez que obtenemos la muestra de cómo quedaría en pantalla. Copiamos el código naranja que se nos muestra más abajo y lo pegamos en el archivo HTML antes del cierre de la etiqueta </head>. En nuestro caso, tomamos como ejemplo la tipografía «Quicksand»:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Añadir Adobe Edge Web Fonts a mi página web</title>
        <script src="http://use.edgefonts.net/quicksand.js"></script>
    </head>
3

 Añadimos en la hoja de estilos CSS la propiedad de font-family a la etiqueta que nos interesa. Por ejemplo un titular  h1:

h1 {
  font-family: quicksand, serif;
}
4

 Si además queremos especificar que nuestro titular sea normal, negrita o cursiva debemos ir a la página con la documentación completa donde nos señalan todas las fuentes tipográficas de las que dispone nuestra familia elegida. Lo vemos con el ejemplo:

añadir diferentes tipografias en mi página web

Quickdand tiene 6 diferentes fuentes tipográficas. Pongamos que nuestra cabecera es Bold Italic. El código CSS quedará:

h1 {
  font-family: quicksand, serif;
  font-weight:700;
  font-style:italic;
}

¿Has visto qué sencillo? Dependiendo de las fuentes tipográficas que tiene cada familia, usaremos las propiedades de font-weight y font-style de diferente manera. Donde:

  • n e i corresponden a las propiedades font-style:normal y font-style:italic respectivamente.
  • El número que les sucede corresponde a la propiedad font-weight.

En el siguiente listado vemos la relación de n e i dentro de las propiedades CSS con el ejemplo de la fuente Quicksand:

n3      font-weight:300;
n4      font-weight:400;
n7      font-weight:700;

i3      font-weight:300;      font-family:italic;
i4      font-weight:400;      font-family:italic;
i7      font-weight:700;      font-family:italic;

Después de estos sencillos pasos solo queda practicar. !Ánimo! Y hasta el siguiente post 🙂