Hace algunas semanas que estoy trabajando activamente en el rediseño de My-Weather-Indicator para Android. Se trata de un profundo cambio que va desde el propio motor de gestión de la información del tiempo, hasta el diseño estético de la aplicación, intentando aproximarse lo más posible a los criterios marcados por Material Design.

Uno de los aspectos que estoy intentando mejorar es el de reducir el tamaño de la aplicación, para lo que estoy sustituyendo las imágenes en formato PNG por una tipografía que incluya todos los símbolos que necesito.

Para la creación de la fuente he utilizado Inkscape, una herramienta de diseño vectorial, que desde hace ya algún tiempo se ha convertido en una herramienta indispensable, y que ha comenzado a desplazar a Gimp, según para que cosas.

A continuación, puedes ver como crear tu propia tipografía utilizando Inkscape…

Tipografías e Inkscape

Crear una tipografía con Inkscape es relativamente sencillo, aunque te tengo que confesar que es una operación verdaderamente tediosa, por lo menos si tienes que partir de cero. Pero esto no es porque lo hagas con Inkscape, es simplemente el proceso de creación de cualquier fuente.

• El primer paso es descargar la plantilla que utilizarás para realizar las fuentes, y abrirla en Inkscape.

[wpfilebase tag=file path=’varios/fontstarter.svg’ /]

• A continuación tienes que abrir el editor de fuentes en Inkscape. Para ello abre el menú Texto>Editor de fuentes SVG …, tal y como ves en la siguiente imagen,

• El siguiente paso es guardar la plantilla con otro nombre para evitar perder el original.
• Ahora nos centramos ya en el proceso. Lo primero es situar la imagen que queramos utilizar como carácer a en el interior de la página, sobre la guía existente. Es importante indicar que la imagen debe ser un trayecto, en otro caso, deberás convertirlo previamente.

Selecciona la pestaña de *glifos en el editor SVG, haz clic en la etiqueta font1 y selecciona el glyp 1, como ves en la siguiente imagen,

• A continuación pulsa el botón Obtener curvas de la selección…. Si en la parte inferior donde indica vista preliminar escribes el carácter a, verás el resultado.
• Por último, solo te queda definir el nombre de la fuente, para lo que debes hacer doble clic en font1 en la columna derecha del editor SVG y el nombre de la familia, que lo definirás en la pestaña Ajustes globales.
• Guarda el archivo creado con formato SVG.
• Para finalizar tienes que utilizar algún método para convertir la fuente de SVG a TTF. En este caso he utilizado un convertirdor online Online Font Converter. Que permite convertir a gran variedad de formatos distintos. Así seleccionas el que deseas y lo descargas.

Conclusiones

Se trata de un método realmente sencillo y efectivo, y que te permitirá crear tus propias fuentes en pocos pasos, ya sea para tus propias aplicaciones, para tu página web o para lo que consideres.

En mi caso, va a suponer una reducción importante en el tamaño de la aplicación My-Weather-Indicator para Android, dado que todos los iconos que necesito vendrán empaquetados en esta fuente, lo que además me facilitará la actualización y cambios de la misma.

Más información,

• Inkscape
• Clever someday
• Online Font Converter