Insertar cualquier tipografia con @font-face en tu web
Me ha parecido muy interesante y útil la propiedad @font-face, con la que podremos usar las tipografías que veamos que vendrán más acorde con nuestros diseños y sin preocuparnos de que el usuario no tenga instalada la tipografía utilizada.
Es bastante sencillo de implementar. Primero de todo tenemos que subir la tipografía (ttf o otf) en el servidor a través de nuestro ftp.
Y creamos el archivo css:
@font-face {
/*Insertamos la ruta donde se
encuentra el archivo de la tipografia
y el formato de la tipografia*/
font-family: "la_tipografia";
src: url(http://www.tudominio.com/la_tipografia.ttf) format("truetype");
}
h1 {
/*Asignamos a la etiqueta h1 la tipografia
definida anteriormente y el tamaño*/
font: 40px "la_tipografia", sans-serif ;
}
Y con esto podremos asignar “la_tipografía” a h1 sin ningún problema en los siguientes navegadores (Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+)
Obviamente desde Internet Explorer 6+ tendremos que añadir código al documento html y comentarlo, ya que tendremos que convertir el formato de la tipografía a .eot. Desde WEFT 3 lo podéis usar para convertir las tipografías ttf a eot (ingles).
<!--[if IE]>
<mce:style type="text/css" media="screen"><! @font-face{ font-family:'la_tipografia'; src: url('http://www.tudominio.com/la_tipografia.eot'); } -->
<!--[endif]-->
Entradas relacionadas
Comparte esta entrada:
5 comentarios en “Insertar cualquier tipografia con @font-face en tu web”
-
16 Sep, 2009
Font Squirrel, gran catálogo de tipografias para @font-face | Mac Grafic
[...] hace poco expliqué como Insertar cualquier tipografia con @font-face en tu web, ahora desde cssblog.es leo un artículo de una fantástica aplicación, Font Squirrel, una [...]
30 Ago, 2009
Ostras pues si que es interesante, desconocia esta propiedad totalmente, muchas gracias!
30 Ago, 2009
Pues si Karles, es una propiedad muy interesante y potente. Lo malo es que hace un poco mas pesada la web en el tema de optimización de carga. Pero bueno para proyectos pequeños es muy bueno !
Saludos
02 Ene, 2010
Para los novatos como yo: al crear el archivo css, ¿a qué carpeta de mi servidor lo subo?
¿Hay que hacer uno por tipo de letra?
Gracias y perdón si lo que digo es una bobería.
02 Ene, 2010
Hola Joomlero,
el archivo que tienes que subir a tu servidor depende de la ruta que le especifiques, lo puedes subir a la carpeta que quieras.
No hay que hacer uno por cada letra.
Saludos