Tipografías especiales en HTML y CSS - Tutorial Diseño Web

Cómo utilizar cualquier fuente TTF en una página web Cuando programamos una página web, lo mejor es darle buena importancia al diseño. Y por gusto personal, o a veces petición específica de un cliente, necesitamos una fuente en particular. Si la fuente es conocida y viene por defecto en el sistema operativo (Windows), o la trae algún software de uso común y globalizado (Office), ahi no hay problema. El tema es si la fuente que necesitamos es "rara", o si necesitamos que la página se vea exáctamente igual, por ejemplo en Linux. Suponemos que el texto es mucho y que vá a estar sujeto a cambios, por lo que no vamos a recurrir a crear una imágen con un editor gráfico.Vamos a utilizar CSS para mostrar una tipografía a partir de el propio archivo de la fuente. Obviamente a la hora de mostrar el resultado final vamos a tener que subir esa tipografía al servidor. Lo primero es ubicar la fuente con la que vamos a trabajar. Partimos de la base que ya debe estar instalada en nuestra PC. Ubicamos la carpeta de fuentes (C:WindowsFonts [por defecto]), elegimos la fuente, y vamos a Edición > Copiar. Pegamos el archivo en la carpeta de nuestro proyecto. A partir de aca el trabajo se divide en 2. ¿Por qué? La mayoría de los navegadores trabajan sin problemas con el formato .TTF. Sin embargo, el problemático Internet Explorer no. Necesitamos convertir ese .TTF en un .EOT. Para eso vamos a usar la herramienta TTF2EOT . Como se trabaja por línea de comandos lo mejor va a ser extraerlo en la carpeta del proyecto por ahora. Abrimos un Editor de línea de comandos (Inicio > Ejecutar > cmd ) y navegamos hasta la carpeta del proyecto (cambiamos de unidad y luego usamos el comando cd). Una vez dentro de la carpeta escribimos: nombre_del_ejecutable archivo_original.ttf nombre_de_destino.eotUna vez que damos enter confirmamos que se creó el archivo y cerramos el editor de comandos. Ya tenemos los archivos de la fuente listos. Ahora vamos al proyecto. Voy a usar 2 diferentes tipografías. Ya tengo listos los 4 archivos (2 por cada fuente). En el editor de páginas web que usen, ubicamos la sección head, vamos a crear una etiqueta style y dentro una @font-face por cada fuente que vamos a usar. Font-family es cómo la vamos a llamar dentro del HTML, pueden poner lo que quieran; como src obviamente elegimos el archivo TTF de la fuente. Luego que tenemos listo eso, debajo de la etiqueta style, vamos a crear el condicional para IE. El código CSS es igual excepto que los archivos de referencia van a ser los .EOT. Vamos a ver cómo se ve en distintas opciones: Firefox 8, en Windows XP Internet Explorer 8, en Windows XP (no anda el sombreado) Firefox 8, en Ubuntu 11.10Bueno eso fue todo por ahora. Pueden usar la fuente que quieran y de una manera práctica. Espero que les resulte útil.