En las últimas semanas los subscriptores de Creative Cloud han podido ver cómo se han añadido nuevos iconos en la pestaña de aplicaciones así como modificaciones a las ya existentes. De esta manera Adobe Edge pasa a ser Edge Animate y se añaden Edge Code (anteriormente llamado Brackets), Edge Inspect (conocido anteriormente como Shadow) y Edge Web Fonts. Una colección de fuentes web que se añaden al servicio ya existente de TypeKit.

 

En este post vamos a tratar un poco más de cerca Edge Web Fonts. Estas fuentes son un primer paso para trabajar con fuentes web y pueden ser una puerta de entrada para empezar a trabajar directamente con este tipo de fuentes antes de adentrase en las posibilidades extras de Typekit, ya que su instalación y uso son realmente rápidos.

 

Actualmente hay sobre 500 familias de fuentes disponibles para usar de modo ilimitado. La forma de utilizarlas es la siguiente.

 

Primero debes añadir un script de JavaScript a la etiqueta <head> de la página para a continuación referenciar una Font-family en tu hoja de estilo.

El JavaScript debería ser algo como esto:

 

<script src=”http://use.edgefonts.net/droid-sans.js&#8221;></script>

 

E integrado en la página sería algo como esto:

 

<!doctype html>

<html>

<head>

  <script src=”http://use.edgefonts.net/Balthazar.js&#8221;></script>

  <style>

    h1 {

      font-family: Balthazar, serif;

      font-style: normal;

      font-weight: 400;

    }

  </style>

</head>

<body>

  <h1>Hola mundo en Balthazar</h1>

</body>

</html>

 

En este caso se ha usado la fuente Balthazar pero se podía sustituir por cualquiera de las tipografías disponibles aquí http://www.edgefonts.com/#list-of-available-fonts

 

La URL en el tag de JavaScript determina que fuentes son cargadas en tu página. Aquí está la especificación  de esa URL

 

use.edgefonts.net/[<family>[:<fvd…>[:<subset>]]…].js

Vamos a analizar las partes que están disponibles. Cada uno de estos elementos está separado por dos puntos ( : ).

 

·         familia: El nombre de la familia de fuentes

·         fvd: Una o más variaciones de la fuente separados por una coma.

·         subset: El nombre de un subset. Los valores disponibles son default y all.

 

Se pueden incluir múltiples familias separándolas con un punto y coma ( ; ).

 

Ambas, el fvd and subset parameters son opcionales. Si se omite fvd, la respuesta contendrá fuentes del conjunto de las cuatro básicas: regular, itálica, negrita e itálica negrita. Si una familia no contiene ninguna de las cuatro básicas, la respuesta no contendrá fuentes para esa familia. Si subset se omite, será utilizado default.

 

A continuación hay algunos ejemplos de usar una o más familias con varias combinaciones de FVDs y subsets.

 

 

# One family with default options (results in n4,i4,n7,i7)

# and the “default” subset).

use.edgefonts.net/averia-libre.js

 

# One family in two styles. Averia Libre Light (n3) and

# Light Italic (i3) in the “default” subset.

use.edgefonts.net/averia-libre:n3,i3.js

 

# One family, in one style, in the “all” subset.

use.edgefonts.net/averia-libre:n3:all.js

 

# Two families. Averia Libre Regular (n4) in the “default”

# subset, and Bree Serif Regular (n4) in the “all” subset.

use.edgefonts.net/averia-libre:n4;bree-serif:n4:all.js

 

# Two families with default options.

use.edgefonts.net/averia-libre;bree-serif.js

Una vez se ha incluido el tag de JavaScript en tu página, usa los nombres family y fvd de la URL para escribir CSS que apliquen a esas fuentes.

 

El valor family en la URL se mapea directamente a la propiedad CSS  font-family.

 

font-family: averia-libre, sans-serif;

Cada fvd se traduce directamente a un valor para las propiedades Font-weight y Font-style.  El FVD n4 significa estilo normal, peso 400. El FVD i4 significa itálica, peso 400. N7 significa estilo normal peso 700 etc.

 

Así que, dada la URL use.edgefonts.net/averia-libre:n3,n9.js, puedes escribir el siguiente CSS para usar la Fuente Averia Libre con peso 900 para los titulares con peso 300 para el cuerpo de texto.

 

h1 {

font-family: averia-libre, sans-serif;

font-weight: 900;

font-style: normal;

}

p {

font-family: averia-libre, sans-serif;

font-weight: 300;

font-style: normal;

}

 

Se recomienda siempre especificar ambas propiedades font-weight y font-style cada vez que se use una fuente.

 

Aquí hay una lista común de fuentes y sus mapeos correspondientes en peso.

 

  • 100 Fina
  • 200 Extra-Light
  • 300 Light
  • 400 Normal, Book
  • 500 Medium
  • 600 Semi-bold
  • 700 Bold
  • 800 Heavy
  • 900 Black

 

Puedes ampliar información en http://www.edgefonts.com/