css3FontConvert: un script para generar @font-face compatibles

Recientemente he estado trabajando en el front-end de algunos sitios web y al intentar incorporarle fuentes .ttf de Google Web Fonts y tratar de hacerlas compatibles con todos los navegadores que corren en las distintas plataformas, ya sea en escritorio o móviles, se me ha hecho un poco engorroso, por lo que buscando como solucionarlo me he topado con css3FontConvert.


css3FontConvert como lo indica su desarrollador no es mas que un script en bash que se usa a través de la linea de comandos permitiendo transformar las fuentes .ttf a las @font-face con soporte para todos los navegadores, el script trabaja bajo Windows usando Cygwin (no he realizado pruebas allí), Mac OSX y GNU/Linux (Mi distribución de momento favorita y en la que esta basado este post es Archlinux Fedora en su versión 20 ).

La Instalación:

La instalación para GNU/Linux es algo "sencilla", tan solo debemos hacer un git clone a su repositorio en github de la siguiente forma:

cd $HOME
git clone https://github.com/zoltan-dulac/css3FontConverter

Lo anterior ejecutado clonara css3FontConverter y lo colocara en nuestro directorio HOME. Luego tendremos que cumplir con los requerimientos que el desarrollador ha publicado en su entrada de blog , en donde se mencionan tener instalados las siguientes aplicaciones y utilidades:

  1. Font-Forge: un editor de fuente de contorno que permite crear su propio PostScript, TrueType, OpenType, con clave CID, multi-master, cff, svg y bitmap (bdf, FON, NFNT) fuentes, o de modificar las existentes. Podremos instalarlos con yum install fontforge fontforge-devel para los usuarios de Fedora o sudo apt-get install fontforge para Debian/Ubuntu.
  2. La utilidad para convertir de TTF archivos a EOT llamada ttf2eot , como soy usuario de Fedora 20 he descargado desde el repositorio de momo-i.org para Fedora el .rpm , en el resositorio pueden encontrar las versiones para las arquitecturas i386 y x86_64  luego de la descarga de la utilidad se ha instalado con el siguiente comando rpm -ivh ttf2eot-0.0.2-2.fc20.x86_64.rpm .
  3. Descargar el paquete sfnt2woff ,  en el repositorio de mono-i.org para Fedora 20 se puede conseguir el paquete tanto para la arquitectura i386 como la x86_64 de esta utilidad por lo que al descargarloy solo fue necesario ejecutar en la linea de comandos rpm -ivh sfnt2woff-0.0-2.git4da27cc.fc20.x86_64.rpm
  4. Por ultimo descargar e instalar ttfautohint . Para Fedora 20 se encuentran en los repositorios por los que he ejecutado yum install ttfautohint

Configuración:

Adicional a la instalación de los requerimientos, debemos modificar una ruta en el script de bash, con cualquier editor de texto de su preferencia para GNU/Linux editaremos el archivo convertFonts.sh , las linea que tendremos que comentar es:

#PATH="$PATH:/Users/zhawry/bin/"

Forma de Usar:

Si todo ha sido instalado correctamente, la manera de usar es muy sencilla, ejecutaremos través de nuestra linea de comandos:

./convertFonts.sh TuGoogleWebFonts.ttf

Al ejecutar el script deberías tener una salida similar a esta:

Converting TuGoogleWebFonts to eot
(Using ttf2eot)
Converting TuGoogleWebFonts to svg
Converting TuGoogleWebFonts to woff
Writing Stylesheet ...
Extracting SVG ID
Getting Font Name
DONE!

El script shell genera una serie de fuentes adicionales, la .eot, .woff, .svg y .ttf  que posteriormente agregaremos al .css del sitio web, un ejemplo podría ser:

@font-face {
    font-family: "TuGoogleWebFonts";
    src: url('TuGoogleWebFonts.eot?') format('eot'),
           url('TuGoogleWebFonts.woff') format('woff'),
           url('TuGoogleWebFonts.ttf')  format('truetype'),
           url('TuGoogleWebFonts.svg#Anton') format('svg');
}

Recuerden copiar los archivos .eot, .woff, .svg y .ttf al directorio de su sitio web donde se encuentre su archivo css. Es de mencionar que la anterior fuente .ttf utilizada es renombrada al archivo con nombre old y que podemos descartar luego.

Mas Información:

Pueden encontrar mas información visitando el post en el blog del desarrollador.