Crear webfonts con ligaduras en base a SVG mediante Grunt-webfont

Las webfonts de iconos cada vez se hacen mas populares debido a la versatilidad de su uso y su adaptabilidad en distintos dispositivos, asi es como han prosperado proyectos como fontAwesome o icomoon que permite crear nuestras propias webfonts subiendo los SVG.

Pero que pasa cuando tenemos muchos SVG (mas de 100) y necesitamos generar una tipografía automágicamente?. Buscando la solución llegué a un task para grunt llamado grunt-webfont que genera una tipografía en base a una carpeta con SVG, generando además el CSS necesario para llegar y ocupar en nuestro proyecto y como si fuera poco soporta ligaduras!

Que necesitamos para instalarla?

En OSX (10.9 en mi caso) asumiendo que utilizamos homebrew como gestor de paquetes

> brew install ttfautohint fontforge --with-python

Esta línea instalará las dependencias necesarias para el task de grunt

  • ttfautohint: que genera el hinting de la tipografía, es decir, le aplica una función matemática de correción de pixeles para hacer la tipografía mas simpla o clara en diversos tamaños (sobre todo en los mas pequeños)
  • FontForge: es una librería que permite generar o editar tipografías en los formatos mas utilizados (es necesario utilizar este motor en caso de que se quiera tener soporte para las ligaduras)
  • QuartzX: versión de X.org para OSX (en mi caso homebrew me la pidió como dependencia para poder instalar las otras dos)

Luego, asumiendo que tienes instalado grunt y por ende npm procedemos a instalar grunt-webfont

> npm install grunt-webfont --save-dev 

Para el ejemplo, también utilizo la libreria grunt-contrib-watch que permite observar una carpeta y disparar una tarea en caso de que ocurra algún cambio, así que también la vamos a instalar

> npm install grunt-contrib-watch 

Ahora viene lo relevante, crearemos el archivo Gruntfile.js en donde configuraremos la ruta donde estan los iconos y la ruta de salida de la tipografía creada

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
	    webfont: {
		  icons: {
		    src: 'carpeta-con-mis-iconos-en-svg/*.svg',
		    dest: 'carpeta-donde-exportare-la-tipografia',
		    options: {
    			font: 'test', //nombre de la tipografía
    			ligatures: true, // soporte para ligaduras activado
    			engine: 'fontforge' //utilizamos fontforge como motor para generar la tipografía, la otra opción es 'node', sin embargo, no soporta ligaduras
    		}
  		}
	},
    watch: { //agregamos una tarea con grunt-contrib-watch para que se dispare en caso de cambiar algún SVG dentro de la carpeta
      files: ['carpeta-con-mis-iconos-en-svg/*.svg'],
      tasks: ['webfont'] //disparo la tarea webfont
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-webfont');
  grunt.registerTask('default', ['webfont']);

};

Una vez creado esto procederemos a ejecutar la tarea en la consola

> grunt webfont

o bien si queremos dejar el proceso mirando los cambios de la carpeta ejecutamos

> grunt watch

y si todo sale bien, deberiamos poder ver algo asi

> grunt webfont
Running "webfont:icons" (webfont) task
Font test-ae653cea290ff6ab86c68c76b7acc221 with 128 glyphs created.

Done, without errors.

Y listo, tenemos nuestra tipografía creada, lista para ser utilizada