Inserta cualquier tipografía en tu web con @font-face



@font-face es un propiedad de CSS disponible desde CSS2 y que la han incorporado los navegadores actuales (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). De esta forma ya no estaremos restringidos a utilizar las fuentes clásicas en nuestras páginas y tampoco hace falta utilizar librerías javascript, flash o imágenes para obtener los mismos resultados.

Sintaxis Básica

El uso de esta propiedad es sencilla, para ello hay que definir un nombre y la ruta donde se encuentra el archivo de la fuente. Por ejemplo en el siguiente código vamos a utilizar la fuente helveticaneue_light.ttf la cual está ubicada en la carpeta fonts y que la nombramos como “HelveticaNeueLight” para utilizarlo posteriormente.

  1. @font-face {
  2.     font-family: ‘HelveticaNeueLight’;
  3.     src: url(‘fonts/helveticaneue_light.ttf’) format(“truetype”);
  4.     font-style: normal;
  5.     font-weight: normal;
  6. }

Luego para utilizar esta fuente recién declarado lo hacemos mediante la propiedad font-family en donde le pasamos el nombre que hemos definido anteriormente.

  1. h3 {
  2.     font-family: ‘HelveticaNeueLight’;
  3.     font-size: 18px;
  4.     color: #F36;
  5. }

Sintaxis Completa

Lamentablemente no todos los navegadores aceptan el mismo formato de archivo para las fuentes, por ello existe una sintaxis mas compleja la cual asegura mayor compatibilidad con los navegadores. En donde se requiere tener las fuentes en diferentes formatos: .eot, .woff, .ttf y .svg.

  1. @font-face {
  2.     font-family: ‘HelveticaNeueLight’;
  3.     src: url(‘../fonts/helveticaneue_light.eot’);
  4.     src: url(‘../fonts/helveticaneue_light.eot?#iefix’) format(‘embedded-opentype’),
  5.          url(‘../fonts/helveticaneue_light.woff’) format(‘woff’),
  6.          url(‘../fonts/helveticaneue_light.ttf’) format(‘truetype’),
  7.          url(‘../fonts/helveticaneue_light.svg#HelveticaNeueLight’) format(‘svg’);
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }

Como convertir las fuentes

Si no tenemos las fuentes en todos los formatos antes mencionados, existe un servicio gratuito @font-face Generator que permite hacer la conversión a todos los formatos necesarios para la máxima compatibilidad.

Seleccionan la fuente y esta devolverá un archivo zip que contiene las fuentes en los formatos necesarios así como el código CSS necesario para colocarlo en nuestra hoja de estilos.

Como obtener las fuentes

La mayoría de las fuentes tienes derechos de autor asi que no las podremos utilizar a menos que tengamos la licencia de uso. Pero también existen fuentes gratuitas, para descargar estas fuentes existen dos páginas con gran variedad de tipografías.

Para finalizar les dejo los archivos fuente con un ejemplo de uso de fuentes utilizando @font-face.

Mas Información

© 2006 – 2011 unijimpe – Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Deja un comentario

Contador