Diseño gráfico y editorial. Tutoriales de Indesign y Photoshop. Vectorizar logo e imágenes

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:
[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]


Comments
Harvey Specter
Posted at 1:41 pm 30 Agosto, 2009
Karles23
Responder
Author

Ostras pues si que es interesante, desconocia esta propiedad totalmente, muchas gracias!

    Harvey Specter
    Posted at 6:51 pm 30 Agosto, 2009
    Pkdisseny
    Responder
    Author

    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

Harvey Specter
Posted at 12:53 am 2 Enero, 2010
Joomlero
Responder
Author

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.

    Harvey Specter
    Posted at 1:52 am 2 Enero, 2010
    Macgrafic
    Responder
    Author

    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

Harvey Specter
Posted at 2:53 am 6 Enero, 2012
Mauricio
Responder
Author

Bueno, en mi opinión acepta todos los exploradores con el @font-face?, porque algunos si aceptan y otras no.

Harvey Specter
Posted at 10:41 pm 8 Marzo, 2012
Linda
Responder
Author

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.

    Harvey Specter
    Posted at 1:02 pm 13 Marzo, 2012
    Macgrafic
    Responder
    Author

    Hola Linda, define en tu css el body o *.
    *{tu estilo global} ó body {tu estilo global}

Harvey Specter
Posted at 6:53 pm 13 Abril, 2012
Edward
Responder
Author

Hola Macgrafic!! logré y correcto tipografia con CSS..
Gracias!!! te pasaste!!!
Saludos desde Chile!

Harvey Specter
Posted at 2:34 am 17 Septiembre, 2012
Blisterca
Responder
Author

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

Harvey Specter
Posted at 1:04 am 16 Julio, 2013
Luis
Responder
Author

Excelente, gracias por compartir lo que sabes.

Leave a Reply