Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

  • Inicio >
  • Blog >
  • @font-face: Incrustando tipografías en una página web

@font-face: Incrustando tipografías en una página web

19 Ene 2011 por Santi

Comentarios: 14

Tipografías

Desde el principio una de las limitaciones más importantes en el diseño web ha sido en el uso de fuentes tipográficas. Aunque teóricamente era posible usar cualquier fuente en una página web, en realidad esto era impracticable debido a que cada visitante de la web debía tener la fuente en cuestión instalada en su ordenador para poder visualizarla correctamente. Por ello, hasta ahora los diseñadores web tenían que limitarse a usar un pequeño conjunto de fuentes "seguras": aquellas fuentes que vienen instaladas en los sistemas operativos más comunes (Windows, Mac OS X, Linux, ...) y que por lo tanto sabemos que van a estar instaladas en el 99% de los ordenadores visitantes.

Aunque el resto del artículo sigue siendo válido, el código CSS se ha quedado obsoleto. Para ver una versión actualizada del código, accede a nuestro artículo @font-face: Incrustando tipografías en una página web (revisado).

Por suerte la nueva revisión del estándar CSS soluciona este problema. CSS3 incorpora el comando @font-face, que nos permite incrustar fuentes en nuestras páginas web de la misma forma que se insertan imágenes. Si el visitante de la página web utiliza un navegador que soporte esta característica, el navegador se encargará automáticamente de descargar la fuente tipográfica para poder mostrar el texto correctamente, exactamente igual que venía haciendo con las imágenes incrustadas en la web.

Navegadores que soportan @font-face

Para ser precisos, el comando @font-face no es nuevo en CSS3, puesto que ya existía en la primera revisión de CSS2, pero por algún motivo fue descartada y no se incorporó en la versión definitiva de CSS2.1 (la que actualmente está vigente, hasta que se apruebe finalmente CSS3). En el último año, los navegadores más comunes han ido añadiendo soporte para esta y otras propiedades de CSS3. Un caso particular es el de Internet Explorer, ya que soportaba este comando desde su versión 5 (1999), aunque a su manera: no soporta todas las características de @font-face y usa su propio formato propietario para los ficheros de fuentes, Embedded Open Type (.eot), formato no soportado por el resto de navegadores.

Versiones en las que los distintos navegadores incorporaron soporte para @font-face:

  • Firefox 3.5
  • Chrome 4.0
  • Internet Explorer 5 (sólo fuentes en formato .eot)
  • Safari 3.1 (SafariMobile desde iOS 4.2)
  • Opera 10 (y Opera-Mobile 9.7)

Uso de @font-face

El uso de @font-face es muy simple, sólo debemos usar la sentencia @font-face para indicar la URL del fichero donde se encuentra la fuente y asignar un nombre para la fuente en la propiedad font-family:

@font-face {
    font-family: "Kimberley";
    src: url(fonts/kimberley.ttf) format("truetype");
}

Ahora, simplemente tenemos que usarla en la propiedad font-family de aquellos elementos a los que queramos aplicársela. En el siguiente ejemplo usaremos la fuente Kimberley en los encabezados de nuestra página:

h1 { font-family: "Kimberley", sans-serif; }

Es recomendable, como en este ejemplo, indicar fuentes de reserva para font-family, por si el navegador en el que se muestra la página no puede usar nuestra fuente (ya sea porque no reconoce el comando @font-face, o es incapaz de descargarse el fichero de la fuente). En nuestro ejemplo indicamos que en caso de no poder usar la fuente Kimberley, debe usarse la fuente sans-serif por defecto.

Usando @font-face con Internet Explorer

Nuestro ejemplo funcionará correctamente con todos los navegadores indicados anteriormente, a excepción de Internet Explorer, puesto que como ya indicamos, el navegador de Microsoft sólo soporta fuentes en formato propietario EOT. Pero explotando los propios errores de Internet Explorer podemos modificar de forma simple nuestro ejemplo para que funcione también en IE. Para ello primero deberemos convertir nuestra fuente en formato TrueType (.ttf) al formato Embedded Open Type (.eot) usando la utilidad de conversión de Microsoft WEFT o este conversor online. Ahora, debemos incluir en nuestra declaración de @font-face la URL del nuevo fichero .eot, y seguidamente incluir la propiedad local (que Internet Explorer no reconoce) en la línea src con el fichero .ttf, el ejemplo quedaría de la siguiente forma:

@font-face {
    font-family: "Kimberley";
    src: url(fonts/kimberley.eot); /* IE */
    src: local("Kimberley"), url(fonts/kimberley.ttf) format("truetype"); /* resto de navegadores */
}

Es importante que la propiedad src con la URL para Internet Explorer sea la primera. De esta forma Internet Explorer descargará el fichero .eot (el único que entiende) e ignorará la línea del fichero .ttf por poseer propiedades que no reconoce (local y format), mientras que el resto de navegadores usará la segunda línea src (puesto que para una misma propiedad se usa la definición más reciente).

Dónde conseguir fuentes

Es necesario advertir que las tipografías están sujetas a los derechos de propiedad intelectual, así que antes de usar una fuente en nuestra página web debemos asegurarnos de que tenemos permiso para ello. Por suerte existen varios repositorios de fuentes gratuitas, como Font Squirrel y Google Font Directory.

La web de Font Squirrel nos proporciona una herramienta online que nos será de gran utilidad para trabajar con fuentes: @font-face Generator nos permite convertir el fichero de fuentes a varios formatos (.ttf, .eot, .svg, ...), optimizar la fuente para su uso en webs, eliminar caracteres innecesarios para que pese menos, e incluso generar automáticamente el CSS de @font-face para nuestra web.

Más información

Comentarios

14 comentarios. Comentar.

1. Anónimo el 21 May 2011 a las 20:31:45

muy bien

2. Eli el 24 May 2011 a las 10:59:58

Muchas gracias, me has aclarado un par de cosillas ^_^

3. David el 24 May 2011 a las 11:14:40

Gran aporte. Muchas gracias.

4. Miguel el 15 Jun 2011 a las 09:20:04

Me ha sido de gran utilidad. Infinitamente agradecido

5. Marcelo el 12 Nov 2011 a las 19:41:53

Antes que nada debo decirles que el tutorial esta muy bueno. El unico inconveniente que tengo es el siguiente, yo inclui dos fuentes, para el resto de los navegadores y cuando pruebo para IE haciendo como dice el tuto, no solo que no se ve en IE, sino que en los demas navegadores tampoco funcionan. Cual puede ser la solucion?

Gracias

6. Marcelo el 12 Nov 2011 a las 19:57:23

Despues de buscar llegue a la solucion:

@font-face {

font-family: ‘fuente’;

src: url(‘fuente.eot’);

src: url(‘fuente.eot?#iefix’) format(‘embedded-opentype’),

url(‘fuente.ttf’) format(‘truetype’);

}

Con esta forma hacemos que primero detecte IE la fuente y luego los demas navegadores.

Saludos.

7. Luis el 17 Nov 2011 a las 17:28:22

@Marcelo,

Gracias por tus comentarios. Me ha hecho revisar el código y ver lo que se ha avanzado desde un tiempo a esta parte. He creado un nuevo artículo con el código que se utiliza actualmente: @font-face: Incrustando tipografías en una página web (revisado)

Un saludo.

8. Rafa el 17 Jun 2012 a las 17:22:16

Excelente, muchas gracias, no podía solucionarlo y con este artículo me funciona perfecto en Internet Explorer!!

9. Anónimo el 11 Sep 2013 a las 00:10:50

és obligado en el @font-face , que se tenga q agregar el "format (truetype).???

10. Luis el 23 Sep 2013 a las 11:16:27

Hola Anónimo.

Siento no haber podido contestar antes. De todas formas dejo aquí la respuesta por si puede ser útil a otras personas.

Según las especificaciones del atributo "src" de "font-face", el "hint" "format" es opcional y sirve para indicar al navegador el formato de la fuente que hay en esa URL. Si el navegador no soporta ese formato de fuente, no se descarga el archivo. Si no pones el "format", el navegador tendrá que descargarse el archivo de la fuente para ver de que tipo es (y si no es compatible, habrá perdido el tiempo y conexiones para nada).

Un saludo.

11. Anónimo el 07 Jul 2015 a las 16:47:02

Un gran aporte está url: http://www.fontsquirrel.com/tools/webfont-generator

sin duda de las mejores que he visto.

12. john el 11 Abr 2016 a las 22:10:40

buena tarde lo que me pasa es que con la fuente icomoon no me esta reconociendo el iphone que podrá ser

gracias por su colaboración

13. john el 11 Abr 2016 a las 22:11:53

buena tarde lo que me pasa es que con la fuente icomoon no me esta reconociendo el iphone que podrá ser

gracias por su colaboración

14. Anónimo el 10 Sep 2017 a las 20:07:24

excelente

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?