:::: MENU ::::

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.

@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


8 Comentarios

  • Gendrith |

    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’);

  • JessiK |

    Es un excelente recurso, pero lo que yo haría -porque no lo
    he hecho aún- es implementar una carga asincrónica de la fuente
    porque mi sitio se tarda mucho en cargar las fuentes y hasta que
    no las carga casi no se ve nada :S

    Pero es buenísimo poder usar cualquier fuente!

  • Chiara |

    Coincido con Kessik en cuanto a la carga. De todas formas es una buena forma de poder utilizar las fuentes que gustemos.

  • Maquetación Web |

    Gracias por el aporte, en cuanto al formato que algunos navegadores no aceptan es mejor prevenir y utilizar la sintaxis completa para agregar los diferentes formatos .eot, .woff, .ttf y .svg.
    Saludos
    Jhonatan

  • Jazzmiin |

    excelente me a sido de mucha utilidad, en verdad estaba buscando algo diferente y lo halle! Gracias por compartirlo con nosotros!

    saludos!

Publica tu comentario

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.