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.
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.
- Webfonts.info: Listado de fuentes gratuitas o con licencia Creative Commons
- En The League of MoveableType tienes un montón de fuentes gratuitas y de código abierto.
- 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.
- 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.
Esta es una comparativa de Font Squirrel (los del generador) y Typekit. - En Kernest los tipógrafos suben sus diseños y lo comparten gratis o no y los diseñadores web los usan.
- 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:
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.
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.
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á:
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
- Demo de Web Font Specimen
- Página oficial de Web Font Specimen y Descarga (9KB)
- Autor: Tim Brown
- Vía WebAppers [en]
- ¿Qué fuente es mejor usar en web? Aporta tu opinión en El mejor y el peor tipo de letra para web
- Otras opciones para usar una fuente no de sistema (eCSStender, sIFR | Facelift | Typeface | Cufon | @font-face )
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:
- Suscripción Anual Online: sólo 189€
- Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.
Cualquier duda ponte en contacto, estaremos encantados de atenderte.
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
Efectivamente Telúrico, lo has explicado perfectamente. De ahí que necesitemos el archivo de la fuente.
Saludos
Ah, oook ok.
Muchas gracias por la aclaración ;-)
Saaaaludos