Insertar cualquier tipografia con @font-face en tu web

Insertar cualquier tipografia con @font-face en tu web
29 agosto, 2009 Paco Castilla

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

  1. Karles23 9 años hace

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

    • Pkdisseny 9 años hace

      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

  2. Joomlero 9 años hace

    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 9 años hace

      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

  3. Mauricio 7 años hace

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

  4. Linda 7 años hace

    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 7 años hace

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

  5. Edward 7 años hace

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

  6. Blisterca 6 años hace

    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

  7. Luis 5 años hace

    Excelente, gracias por compartir lo que sabes.

Pingbacks

  1. […] 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 […]

  2. […] Si es cierto que las tipografía tienen a veces unos precios que no nos podemos permitir, pero afortunadamente existen miles de fuentes gratuitas que puedes descargar de internet, por eso he encontrado varios sitios donde te las ofrecen gratuitamente. Ten en cuenta que muchas se pueden usar también como font-face para crear tu diseño web impactante. Estos artículos explican fácilmente como usar la propiedad font-face en CSS: arumeinformatica o macgrafic. […]

  3. […] Si es cierto que las tipografía tienen a veces unos precios que no nos podemos permitir, pero afortunadamente existen miles de fuentes gratuitas que puedes descargar de internet, por eso he encontrado varios sitios donde te las ofrecen gratuitamente. Ten en cuenta que muchas se pueden usar también como font-face para crear tu diseño web impactante. Estos artículos explican fácilmente como usar la propiedad font-face en CSS: arumeinformatica o macgrafic. […]

  4. […] Si es cierto que las tipografía tienen a veces unos precios que no nos podemos permitir, pero afortunadamente existen miles de fuentes gratuitas que puedes descargar de internet, por eso he encontrado varios sitios donde te las ofrecen gratuitamente. Ten en cuenta que muchas se pueden usar también como font-face para crear tu diseño web impactante. Estos artículos explican fácilmente como usar la propiedad font-face en CSS: arumeinformatica o macgrafic. […]

  5. […] Si es cierto que las tipografía tienen a veces unos precios que no nos podemos permitir, pero afortunadamente existen miles de fuentes gratuitas que puedes descargar de internet, por eso he encontrado varios sitios donde te las ofrecen gratuitamente. Ten en cuenta que muchas se pueden usar también como font-face para crear tu diseño web impactante. Estos artículos explican fácilmente como usar la propiedad font-face en CSS: arumeinformatica o macgrafic. […]

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.