Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • @font-face: Incrustando tipografías nunha páxina web

@font-face: Incrustando tipografías nunha páxina web

19 Xan 2011 por Santi

Comentarios: 14

Tipografías

Desde o principio unha das limitacións máis importantes no deseño web foi no uso de fontes tipográficas. Aínda que teoricamente era posible usar calquera fonte nunha páxina web, en realidade isto era impracticable debido a que cada visitante da web debía ter a fonte en cuestión instalada no seu computador para poder visualizala correctamente. Por iso, ata agora os deseñadores web tiñan que limitarse a usar un pequeno conxunto de fontes "seguras": aquelas fontes que veñen instaladas nos sistemas operativos máis comúns (Windows, Mac OS X, Linux, ...) e que polo tanto sabemos que van estar instaladas no 99% dos computadores visitantes.

Aínda que o resto do artigo segue sendo válido, o código CSS quedouse obsoleto. Para ver unha versión actualizada do código, accede ó noso artigo @font-face: Incrustando tipografías nunha páxina web (revisado).

Por sorte a nova revisión do estándar CSS soluciona este problema. CSS3 incorpora o comando @font-face, que nos permite incrustar fontes nas nosas páxinas web da mesma forma que se inseren imaxes. Se o visitante da páxina web utiliza un navegador que soporte esta característica, o navegador encargarase automaticamente de descargar a fonte tipográfica para poder mostrar o texto correctamente, exactamente igual que viña facendo coas imaxes incrustadas na web.

Navegadores que soportan @font-face

Para ser precisos, o comando @font-face non é novo en CSS3, posto que xa existía na primeira revisión de CSS2, pero por algún motivo foi descartada e non se incorporou na versión definitiva de CSS2.1 (a que actualmente está vixente, ata que se aprobe finalmente CSS3). No último ano, os navegadores máis comúns foron engadindo soporte para esta e outras propiedades de CSS3. Un caso particular é o de Internet Explorer, xa que soportaba este comando desde a súa versión 5 (1999), aínda que ó seu xeito: non soporta todas as características de @font-face e usa o seu propio formato propietario para os ficheiros de fontes, Embedded Open Type (.eot), formato non soportado polo resto de navegadores.

Versións nas que os distintos navegadores incorporaron soporte para @font-face:

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

Uso de @font-face

O uso de @font-face é moi simple, só debemos usar a sentenza @font-face para indicar a URL do ficheiro onde se atopa a fonte e asignar un nome para a fonte na propiedade font-family:

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

Agora, simplemente temos que usala na propiedade font-family daqueles elementos ós que queiramos aplicarlla. No seguinte exemplo usaremos a fonte Kimberley nos encabezados da nosa páxina:

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

É recomendable, como neste exemplo, indicar fontes de reserva para font-family, por se o navegador no que se mostra a páxina non pode usar a nosa fonte (xa sexa porque non recoñece o comando @font-face, ou é incapaz de descargarse o ficheiro da fonte). No noso exemplo indicamos que en caso de non poder usar a fonte Kimberley, debe usarse a fonte sans-serif por defecto.

Usando @font-face con Internet Explorer

O noso exemplo funcionará correctamente con todos os *navegadores indicados anteriormente, fóra de Internet Explorer, posto que como xa indicamos, o navegador de Microsoft só soporta fontes en formato propietario EOT. Pero explotando os propios erros de Internet Explorer podemos modificar de forma simple o noso exemplo para que funcione tamén en IE. Para iso primeiro deberemos converter a nosa fonte en formato TrueType (.ttf) ó formato Embedded Open Type (.eot) usando a utilidade de conversión de Microsoft WEFT ou este conversor online. Agora, debemos incluír na nosa declaración de @font-face a URL do novo ficheiro .eot, e seguidamente incluír a propiedade local (que Internet Explorer non recoñece) na liña src co ficheiro .ttf, o exemplo quedaría da seguinte forma:

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

É importante que a propiedade src ca URL para Internet Explorer sexa a primeira. Desta forma Internet Explorer descargará o ficheiro .eot (o único que entende) e ignorará a liña do ficheiro .ttf por posuír propiedades que non recoñece (local e format), mentres que o resto de navegadores usará a segunda liña src (posto que para unha mesma propiedade úsase a definición máis recente).

Onde conseguir fontes

É necesario advertir que as tipografías están suxeitas ós dereitos de propiedade intelectual, así que antes de usar unha fonte na nosa páxina web debemos asegurarnos de que temos permiso para iso. Por sorte existen varios repositorios de fontes gratuítas, como Font Squirrel e Google Font Directory.

A web de Font Squirrel proporciónanos unha ferramenta online que nos será de gran utilidade para traballar con fontes: @font-face Generator permítenos converter o ficheiro de fontes a varios formatos (.ttf, .eot, .svg, ...), optimizar a fonte para o seu uso en webs, eliminar carácteres innecesarios para que pese menos, e ata xerar automaticamente o CSS de @font-face para a nosa web.

Máis información

Comentarios

14 comentarios. Comentar.

1. Anónimo o 21 Mai 2011 ás 20:31:45

muy bien

2. Eli o 24 Mai 2011 ás 10:59:58

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

3. David o 24 Mai 2011 ás 11:14:40

Gran aporte. Muchas gracias.

4. Miguel o 15 Xuñ 2011 ás 09:20:04

Me ha sido de gran utilidad. Infinitamente agradecido

5. Marcelo o 12 Nov 2011 ás 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 o 12 Nov 2011 ás 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 o 17 Nov 2011 ás 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 o 17 Xuñ 2012 ás 17:22:16

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

9. Anónimo o 11 Set 2013 ás 00:10:50

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

10. Luis o 23 Set 2013 ás 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 o 07 Xul 2015 ás 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 o 11 Abr 2016 ás 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 o 11 Abr 2016 ás 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 o 10 Set 2017 ás 20:07:24

excelente

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?