Existen una lista de tipografías estándares que todos los navegadores pueden interpretar, pero, ¿qué ocurre con las demás tipografías? ¿Cómo podemos implementarlas?
@font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS.
La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar.
Para el tipo de fuente, puede usarse en formato OpenType (.otf) o bien, en formato Truetype (.ttf).
Cómo implementar @font-face
Vamos a aplicarle la tipografía “Kimberley” en un encabezado H1, como ejemplo de Alistapart. Así funciona:
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
@font-face {
font-family: "Kimberley";
src: url(http://www.midominio.com/fuente/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
Obviamente, debemos ubicar la dirección donde se encuentra la tipografía que deseemos definir en nuestro sitio, en este caso, “Kimberley”.
Si tenemos una larga lista de fuentes propias, podemos usar @import:
@import url(http://www.midominio.com/style/index.css) all;
h1 { font-family: Goodfish, serif }
Y ya está. @font-face está soportada por Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+.
Una imagen de Internet Explorer 7+ aplicando @font-face:
Problemas con Internet Explorer 6+
Si deseemos aplicar @font-face en Internet Explorer 6+, sin usar formato “.otf”, debemos aplicar comentarios condicionales, además del que tengamos para los navegadores modernos (compatibles con @font-face, los listados en el anterior párrafo). El código a definir para Internet Explorer 6+ es este:
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}
</style>
<![endif]-->
Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar WEFT 3.
Y así Internet Explorer 6+ podrá interpretar @font-face. Cualquier duda o sugerencia podéis escribirla desde los comentarios.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Por ahora hay 28 comentarios ¿Quieres opinar?
[...] See the rest here: @font-face, inserta cualquier tipografía en tu sitio web | CSSBlog ES [...]
hola:
bueno he probado tu codigo pero no me funciona
te dejo el codigo haber si me hace falto algo
Documento sin título
@font-face {
font-family: “Kimberley”;
src: url(http://www.conapa.biz/font/ »
Sickness.TTF) format(“truetype”);
}
h1 { font-family: “Kimberley”, sans-serif }
@font-face {
font-family: “Kimberley”;
src: url(http://www.conapa.biz/font/Sickness.TTF) format(“truetype”);
}
h1 { font-family: “Kimberley”, sans-serif }
sdarknot
ahi esta todo el html haber si me ayudas pues te dejo mi correo para cualquier respuesta sdarknot@gmail.com desde ya gracias XD!!
@sdarknot esta pregunta mejor hazla en el foro, te ayudaremos mejor:
http://comunidad.cssblog.es
Un saludo.
Lamento informarles a todos que Chrome aun no soporta @font-face y estoy hablando de la versión 2.0.172.39, espero que en la 3 tenga resuelto esto..
pues la verda es k io estoy trabajando con ie7
y no funciona
Hola muchachos, lo que yo me pregunto es si en IE6, para importar la ruta del archivo .eot no hace falta un paso intermedio que acá están obviando… Cómo obtienes ese archivo .eot que importan usando los condicionales?
@Marcelo no lo obtienes, en vez de ser .ttf, por ejemplo, es .eot.
Un saludo.
no me digas k ese codigo solo funciona con fuentes de extension .eot
pucha creo k ya me rayastes (confundistes)
@sdarknot para que funcione en IE 6, es necesario aplicar fuentes, con la extensión .eot.
Un saludo.
ok man pero io lo estoy aplicando en intenet explore 7 y no me funciona
Y de donde descargas las versiones EOT de las fuentes? de la Verdana por ejemplo, para que el truco funcione en IE6.
@sdarknot pregúntalo en el foro:
http://comunidad.cssblog.es
Un saludo.
@Marcelo debes usar WEFT: http://www.microsoft.com/typography/WEFT.mspx
Si tienes alguna duda más, pregúntala en el foro: http://comunidad.cssblog.es, este no es sitio para solucionar problemas técnicos.
Un saludo.
ya lo publique pero aun no me responden
@sdarknot donde lo has publicado? (envíame el enlace). Según el sistema del foro, no has escrito ningún mensaje aún.
Un saludo.
Creo que yo también lo estoy haciendo mal. En el sub-foro de CSS Básico hay un hilo sobre el tema.
ya lo comente en el foro haber ojala k me puedan ayudar gracias
[...] la espera de que la propiedad de CSS3 @font-face sea implementada por todos los navegadores, se proponen alternativas para poder usar el tipo, la [...]
bueno sigo sin resolver el problema xk sera ¿?
@sdarknot sigue preguntando en el foro.
Un saludo.
yo lo acabo de probar, y me funciona tanto en firefox como internet explorer 8. saludoss
PD: yo siempre hago pruebas con mi iphone, y no funciona, el navegador es safari, pero sera la version safari de iphone en la que no tire.
jajajja a mi tambien me funciona en firefox y chrome y en internet me sale unas letras extrañas osea k si funciona pero eso es xk tengo la fuente instalada en mi makina xD …
al parece no m funciono en explorer, solo en firefox 3.5, probe con eot y aun asi no m funciono
[...] Así que nada, espero ver páginas más chulas a partir de ahora!! Si queréis más información sobre @font-face os dejo un par de posts más completos: @font-face in Depth de User Agent Man (del que he sacado lo básico para éste post) y otro de CSSBlog. [...]
@sdarknot hola solo una pregunta si nos puedes enseñar paso a paso como lo hiciste porfavor
en donde debe ser colocado este codigo y con que codigo haces llamar a la fuente, por ejemplo: TEXTO
Que hay, una preguntita, para hacer el font-face este, solo necesito fuente .ttf y .eot? cubro asi toda la gama de navegadores? y si necesito mas como .woff y .svg, puedo sacarlos tambien de una fuente ttf, hay algun conversor que lo haga? Igual ha sido mas que una “preguntita” Si pudiera contestarme le estaria muy agradecido, soy subscritor del blog por cierto xd. Saludos.
[...] 1- @font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web (mediante un cliente FTP, al servidor) y definirla mediante CSS. Via CCSBlog [...]