Fuentes Embebidas con @font-face

Sigo metiéndole un poco a lo de desarrollo web, así que sigo soltando tips, más bien chustillas porque no es que se me dé demasiado bien (estoy demasiado acostumbrado a desarrollar siempre aplicaciones para ejecución en local o cliente/servidor), pero la de hoy es interesante.

Yo soy de los que cuando tienen que hacer un un header para el blog, página web o similar, busca una fuente molona, pilla el Gimp, escribe el nombre del blog, le mete un par de filtros, juega un poco con los colores, lo exporta a png y lo coloca hay en medio bien grande😉

¿y todo eso por qué? Pues porque si lo meto en html y le digo que use esa fuente pero el visitante no la tiene entre sus fuentes, lo que va a ver es un esperpento de Arial a gran escala (literalmente xD). Gracias a un simple @font-face en nuestro CSS podemos solucionar ésto de un plumazo. Lo de los filtros y demás “maestría” artística va a ser que no, pero eso lo añadía porque “ya que había que hacer una imagen…” xDDDD

Al tema, lo primero que haremos será declarar nuestra fuente en el fichero CSS tal que así:

@font-face {
font-family: “Old Stamper”;
src: local(“Old Stamper”), url(./old_stamper.ttf) format(“truetype”);
}

Depués, una vez definida la fuente la aplicaremos donde sea necesaria, para nuestro ejemplo en todo el body:

body {
font-family: “Old Stamper”;
}

una vez hecho ésto sólo tenemos que generar un html que tire de ese CSS y muestre algo de texto, por ejemplo:

<head>
<title>Embedded Font Typo Testing</title>
<link rel=”stylesheet” type=”text/css” href=”view.css” media=”all”>
</head>
<body>
<div align=”center”>Embedded Font Typo Testing</div>
</body>

Hay que tener en cuenta los navegadores que lo soportan y sus versiones: Firefox 3.5, Safari 3+ y 4+, IE 7+ (en IE6+ se puede aplicar también, con el formato de fuente .eot y haciendo un apaño pero… como que paso :P) y Opera (no puedo asegurar a partir de qué versión, pero la actual lo soporta).

Así se ve mi ejemplo (en un navegador que no lo soporta y en uno que si, firefox 3.0.x y opera 10):

 

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.

    • Anónimo
    • 2/01/10

    Una pregunta.

    ¿En qué fichero CSS hay que copiar eso? ¿Es en el template.css? ¿En qué línea?

    Perdone la novatada y gracias por su ayuda.

  1. Hi, its pleasant post on the topic of media print,
    we all be aware of media is a fantastic source of data.

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: