@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.
- @font-face {
- font-family: 'HelveticaNeueLight';
- src: url('fonts/helveticaneue_light.ttf') format("truetype");
- font-style: normal;
- font-weight: normal;
- }
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.
- h3 {
- font-family: 'HelveticaNeueLight';
- font-size: 18px;
- color: #F36;
- }
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.
- @font-face {
- font-family: 'HelveticaNeueLight';
- src: url('../fonts/helveticaneue_light.eot');
- src: url('../fonts/helveticaneue_light.eot?#iefix') format('embedded-opentype'),
- url('../fonts/helveticaneue_light.woff') format('woff'),
- url('../fonts/helveticaneue_light.ttf') format('truetype'),
- url('../fonts/helveticaneue_light.svg#HelveticaNeueLight') format('svg');
- font-weight: normal;
- font-style: normal;
- }
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
Comentarios Total 3 comentarios
Publicado: 02/11/2011 12:49 am
Muy útil post!
Publicado: 02/11/2011 3:41 am
Suena muy bueno para ser verdad.
¿Tiene alguna desventaja implementar esto?
Otra cosa, revisando en w3schools habla de que soporta IE eot y los demás ttf, con lo cual la propiedad quedaria con estas solamente:
font-family: ‘HelveticaNeueLight’;
src: url(‘../fonts/helveticaneue_light.eot’),
url(‘../fonts/helveticaneue_light.ttf’) format(‘truetype’);
Publicado: 02/11/2011 12:03 pm
También existe Open Font Library :)