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:
[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 ;
}
[/css]
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).
[css]<!–[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]–>
[/css]
15 comentarios
Luis
Excelente, gracias por compartir lo que sabes.
Blisterca
Muy bueno y simple de resolver, funciona perfectamente Yo a penas estoy conociendo esto del CSS y me vino bien esta explicacion. Parece poca cosa pero como cambia la cara de la pagina que estamos diseñando cuando le damos familias tipográficas con la estética adecuada.
Gracias, por el gran aporte
Edward
Hola Macgrafic!! logré y correcto tipografia con CSS..
Gracias!!! te pasaste!!!
Saludos desde Chile!
Linda
Hola, qué tal. Mi pregunta es: ¿cómo puedo hacerle para poner toda la web con esa misma tipografía?
Espero tu respuesta.
Gracias de antemano.
Macgrafic
Hola Linda, define en tu css el body o *.
*{tu estilo global} ó body {tu estilo global}
Mauricio
Bueno, en mi opinión acepta todos los exploradores con el @font-face?, porque algunos si aceptan y otras no.
Joomlero
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.
Macgrafic
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
Karles23
Ostras pues si que es interesante, desconocia esta propiedad totalmente, muchas gracias!
Pkdisseny
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