@font-face con ie

@font-face está salvándome la vida últimamente en bastantes proyectos, haciendo que mi código sea más fácil de leer por motores de búsqueda y simplificando mucho la forma que tenía de hacer web, por no hablar del ahorro de KB en imágenes que solía gastar en estos menesteres del diseño tipográfico.

El caso es que el otro día, acabando la web de Uhuru Labs me metí en mi máquina virtual de windows donde hago las pruebas en Internet Explorer. Siempre había leído que IE fue de los primeros navegadores en adoptar @font-face y siendo así le di un voto de confianza y probé a ver como quedaba la fuente en este navegador al final de la maquetación. Cual fue mi sorpresa cuando ví que no se veía la fuente, si no que estaba cargando la siguiente de la lista de fuentes colocadas en font-family.

Me puse a buscar como un loco y dí con la solución. Para variar, Internet Explorer va por el buen camino hasta que se le cruzan los cables y decide no utilizar el estandar que utilizaría todo el mundo para importar fuentes, poniendo la fuente y el formato en el que está en el campo @font-face del fichero .css. Esto por ejemplo lo entiende un navegador normal.

@font-face {

font-family: Impact;
src: url(../font/impact.ttf) format(‘truetype’);

}

No, lo que espera Internet Explorer es que el diseñador utilice un tipo de fuente casposo llamado Embedded OpenType (EOT), creado por ellos por supuesto, para hacerle la vida un poco más complicada al mundo.

Con lo que, para que los niñatos que entran en la web con Internet Explorer la vean decentemente (siento si eres uno de ellos, de verdad que lo siento mucho…) hay que poner, además de las líneas que he puesto arriba otras tantas como estas:

@font-face
{

font-family: Impact;
src: url(../font/impact.eot); /* EOT para IE */

}

Para hacer esto, previamente habremos tenido que crear el fichero .eot a partir del .ttf. Yo esto lo hago con este conversor de .ttf a .eot. Rápido, sencillo de utilizar y directo al grano. Estas miniaplicaciones me gustan mucho.

Act: Estas miniaplicaciones me gustan mucho cuando funcionan. Quito el enlace porque me he vuelto loco para averiguar que el .eot que me había generado el conversor para una web que estoy haciendo era defectuoso, con lo que no cargaba bien la fuente en ie8.

He buscado un poco y lo mejor que se puede hacer es instalarse una aplicación para windows (creada para w98!), asquerosa en cuanto a diseño pero que funciona. Genera el .eot y este se carga perfectamente desde ie8. La aplicación se llama WEFT. Una vez instalada, la aplicación hace un escaneo de las fuentes instaladas en el sistema (ojo, porque si la fuente no la tienes instalada no podrás seleccionarla) y cuando termina lanza un wizard para generar una fuente. Hay que seguir todos los pasos. Yo personalmente no se ni para que sirve la aplicación, porque pide un montón de cosas raras como en que url vas a usar la fuente y tal. Yo he puesto carlosfaria.info y todo lo demás por defecto. El .eot generado lo lee ie8 perfectamente.

Si alguien necesita ayuda con el WEFT que pregunte que estaré encantado de ayudarle.

+info: Font Face Support in IE by Webfonts.info

TypeTester


Hace mucho tiempo que llevo usando esta mini aplicación web que permite comparar diferentes fuentes para ver como quedará en la web. A la vez que pruebas la fuente puedes probar el color, tamaño, colo de fondo, etc… con lo que se puede ajustar el formato que necesites al milímetro.

Una vez decidido el formato adecuado es posible descargar un fichero .css que contiene el estilo creado.

Muy útil, os lo digo en serio…

app: TypeTester

Fuentes 2009

Por estas fechas se suelen llevar a cabo en la esfera bloguera recopilaciones de cualquier cosa, algo así como juntar todo lo bueno que ha tenido un año en un aspecto. En los blogs de diseño se suele hacer recopilación de las fuentes más significativas a lo largo del año. Así es que yo no voy a ser menos y voy a poner las 5 que más he utilizado a la hora de crear mis pequeños proyectos (todas ellas gratuitas). Aquí están:

FontForge

Aunque tenga una interfaz fea fea, y que casca unas veces sí y otras también (al menos para OSX, no se para Linux como será de estable) este pedazo de software me acaba de salvar unos cuantos euros.

Resulta que esta tarde me he instalado una fuente desde DaFont.com con la que estuve trabajando el otro dia en un logo en un ordenador con Windows  XP. La fuente en cuestión es Go Long por Matthew Welch (guapísima por cierto). Cual es mi sorpresa al arrancar Illustrator y no encontrar la fuente recien instalada en la lista de fuentes disponibles. Me bajara de donde me bajara la fuente al instalarla no me la listaba ni en Illustrator ni en Photoshop. Pensé que debía ser un problema con la fuente porque era la primera vez que me pasaba. Así es que arranqué el Catálogo tipográfico y haciendo click con el botón derecho en la fuente (aquí si que me la listaba), seleccioné la opción “Validar tipo de letra”. Me daban dos problemas leves uno en la tabla ‘name’ y otro en la tabla ‘hhea’.

Creo que el principal problema radicaba en la tabla ‘hhea’ ya que el problema que daba en la tabla ‘name’ era debido a que tenia diferente nombre para MAC que para Windows (Go Long y GoLong respectivamente) pero el problema de ‘hhea’ era más gordo por lo visto.

Me puse a buscar qué información se almacenaba en dicha tabla y me encontré con esta página de Apple Developer donde explican claramente la información ‘hhea’:

The 'hhea' table contains information needed to layout fonts whose characters are written horizontally, that is, either left to right or right to left. This table contains information that is general to the font as a whole.

Telita, pensé, según lo visto si hay problemas con esta tabla mal vamos. Así es que me puse a investigar e intentar encontrar algún programa que me dejara convertir la fuente a algún formato nativo de Mac. Solo encontraba software de pago y, la verdad, pagar por un software que de momento solo me iba a servir para arreglar una fuente pues como que no.

Gracias a la zona de utilidades varias que tienen en MyFonts.com descubrí FontForge una completa aplicación que me vendría a las mil maravillas para realizar mis cambios y ver si podía salvar la fuente.

Instalé, arranqué, cargué la fuente y guardé como .dfont (Data fork resource Font), la cual ya pude instalar y utilizar en mi trabajo.

Si alguien quiere la fuente para OSX que me la pida, la tengo por aquí a buen recaudo ya que supongo que le pasará lo mismo a cualquiera que instale la fuente directamente desde DaFont.com.

Pass fail

No me había parado a pensar nunca en lo feas que son las tarjetas de embarque. Bueno, supongo que no me había parado a mirarlas más que nada porque si se tercia no cojo más de un avión al año.

Pero por lo visto Tyler Thompson si que se ha fijado (seguro que debe cojer más aviones que yo) y ha abierto un post sobre el rediseño de tarjetas de embarque ofreciendo un par de alternativas como esta:

Sin palabras

Via ISO50.

Por cierto, el footer de la página de Tyler Thompson no tiene desperdicio:

Hi, if you are coming to this site via Internet Explorer 6, you might not be getting the best experience possible. Honestly, I can’t even begin to think about what your entire experience on the internet must be like? (…probably like riding a bike on the highway while cars blow by you on their way to Costco to get gallons of mayonnaise and 60-inch plasma TV’s). How will you ever be able to use this website?????? You wont. You’re an asshole and your browser is an asshole. So look, I’m going to be honest: I kind of hate you. BUT we c-a-n make this work. Here is what I am going to need you to do: fire up your Toshiba ShitBook© that weighs about 45 pounds, wipe the Cheeto dust off the screen, download Safari, delete Internet Explorer from your computer, punch yourself in the face, and get me a pulled pork sandwich.

¡¡¡¡ Kill ie !!!!

fontcapture

Llevaba tiempo queriendo probar esta mini aplicación web, mediante la cual es posible crear una fuente de tu puño y letra.

Pasos a seguir:

  • Entra en fontcapture.com y descarga e imprime la plantilla.
  • Escribe todos los caracteres que te dice la plantilla teniendo en cuenta la linea base, la ascendente y la descendente.
  • Escanea la plantilla rellena y enviala mediante el formulario.

Yo he seguido todos los pasos y me ha salido esta fuente. La he hecho aprisa y corriendo, con lo que las mayúsculas me han quedado horrendas y tanto la ele minúscula como la ka minúscula dejan también un poco que desear, pero para hacer la prueba no ha estado mal.

fuente

Podeis bajaros la fuente que me ha salido aquí. He tenido que subirla con extensión pdf, en realidad es un archivo .rar, le cambiais la extensión y listo: carlos-ttf