Font Squirrel, gran catálogo de tipografias para @font-face

Macgrafic — Tue, 08 Sep 2009 08:51:49 +0000

Si 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 aplicación web con un inmenso catálogo de tipografías donde nos las podemos descargar y poderlas usar, totalmente libres de derechos, con la propiedad @font-face de CSS en todos nuestros diseños web.

Insertar cualquier tipografia con @font-face en tu web

Macgrafic — Sat, 29 Aug 2009 19:34:00 +0000

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]

[/css]

Macgrafic - Tutoriales InDesign, Photoshop y fotografía. Vectorizar logo » @font-face

Font Squirrel, gran catálogo de tipografias para @font-face

Insertar cualquier tipografia con @font-face en tu web