Web Font Specimen | Tipografía web en contexto web | @font-face

Web Font Specimen es un paquete de archivos con el que testear un tipo web con todas las caracterí­sticas propias de la tipografí­a web CSS.

Utiliza el reset.css de Eric Meyer y el framework 960.gs para que probemos en nuestro navegador todas las posibilidades de renderizado de cualquier tipo, incluido cualquiera que queramos utilizar con @font-face.

image

Cómo y dónde descargar una fuente lista para usar @font-face

Usar esta propiedad CSS3 es cada vez más frecuente, Pedro explica su uso con detalle.

El problema y el dilema con @font-face además de los navegadores es de nuevo el de los derechos de autor, para esto se está trabajando en un formato, el WOFF.

Veamos varios sitios de donde descargar fuentes en el formato adecuado y un generador online de estos formatos.

  1. Webfonts.info: Listado de fuentes gratuitas o con licencia Creative Commons
  2. En The League of MoveableType tienes un montón de fuentes gratuitas y de código abierto.image
  3. Una vez que te has asegurado que la fuente que vas a utilizar en tu web no infringirá estos derechos puedes utilizar este generador de fuentes @font-face para convertir tus fuentes TTF u OTF a este formato, a SVG o al de IE, el formato EOT o directamente descargarte las que han generado otros. image
  4. Otras posibilidades pasan por Typotheque o por Typekit, sus servicios ofrecen la posibilidad de apuntar a una fuente alojada en sus servidores. Cuentas gratuitas o premium, a Typekit sólo puedes acceder por invitación. 

    image
    Esta es una comparativa de Font Squirrel (los del generador) y Typekit.

  5. En Kernest los tipógrafos suben sus diseños y lo comparten gratis o no y los diseñadores web los usan. 
  6. 40+ Excellent Freefonts For Professional Design: recopilación de fuentes gratuitas para diseño web de Smashing Magazine

Cómo configurar Web Font Specimen

Lo importante no es saber usar @font-face sino acertar con la tipografí­a y para esto es para lo que usamos Web Font Specimen.

El zip descargado contiene una carpeta css y dentro de ella la carpeta type, ahí­ es donde tenemos que poner nuestra fuente:

image

En el archivo index.html editamos el CSS del head, de forma que sustituimos “Your typeface” por el nombre de nuestra fuente, la ruta y el formato. Si no tenemos versión para los estilos bold e italic comentamos esas lí­neas.

image

Si no quieres usar la propiedad @font-face pero quieres utilizar Web Font Specimen para comparar dos fuentes que estén instaladas en tu equipo simplemente cambia Georgia y Verdana que son las fuentes que compara por defecto.

image

Con eso bastarí­a aunque si quieres hacerlo bien puedes editar también en el HTML el nombre de la fuente en las lí­neas 40 y 73.

El resultado

La página resultante nos mostrará:

image

A: Nombre de la fuente

B: Encabezados, listas, énfasis

C: Comparación de tamaños

D: Interlineado

E: Glifos

F: Tamaño, ancho de lí­nea

G: fon-size en caja alta y baja

H: En escala de grises

I: Contraste: Texto claro sobre fondo oscuro

J: Contraste en color

K: Créditos: Web Font Specimen se distribuye bajo licencia Creative Commons 3.0

Enlaces

Cursos de diseño web en cursos v2b

Para aprender a tu ritmo y desde tu equipo. Todos estos cursos son en formato videotutorial y tienen la garantí­a de video2brain.

Puedes ver en esta demo más de 12 horas de ví­deotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartita para que estos cursos resulten gratuitos para trabajadores residentes en España.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Escribí esto el 23/11/2009

4 comentarios

  1. Telúrico dice:

    Solo una pequeña duda. Lo de “@font-face” se supone que es para “incrustar” fuentes en una página web, de manera que todo el mundo (tenga la fuente que tu usaste o no) vea la misma tipografí­a, ¿no?

    Es algo que no tengo claro.

    Un saludo

  2. Telúrico dice:

    Ah, oook ok.

    Muchas gracias por la aclaración ;-)

    Saaaaludos

Enlazan a este artículo:

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies