Saludos comunidad,

En mundo dominado por la web se hace cada vez más importante la utilización de elementos gráficos e iconografía para diseñar nuestros portales o sitios web. Uno de los elementos bastante utilizados y que juega un papel fundamental en este empeño son las #WebFonts, que desde su aparición, han devenido en un uso casi totalitario por parte de los diseñadores web.

Sé que me dirán que con una Internet repleta de buenas y nutridas colecciones de WebFonts como #FontAwesome, #Glyphicons y #MaterialIcons por solo citar algunas, alguien podría preguntarse el por qué tener que crear WebFonts propias. Pues bien, la respuesta es simple, a veces queremos dar un toque más personal a lo que estamos creando y decidimos que la iconografía a emplear, va a ser completamente original, y ya eso amerita el esfuerzo. Es por eso que en este post, les voy a mostrar cómo crear nuestras propias webFonts usando #Inkscape, la aplicación de gráficos vectoriales por excelencia de Linux.

Pues bien, lo primero que vas a necesitar es tener instalado en tu PC la herramienta Inkscape. Puedes instalarla usando en gestor de Software de tu sistema o mediante el comando.

sudo apt install inkscape

Es importante además tener algo de conocimiento acerca del trabajo con herramientas de este tipo, ya que aumentaría mucho la velocidad a la que puedas crear un WebFont, pero bueno, trataré de explicarlo de la mejor manera posible.

Configura el lienzo de Inkscape para crear Tipografías para ello sigue los pasos siguientes:
Click en el menú “Archivo” >> “Nuevo a partir de plantilla”
– Luego seleccionar en el cuadro de dialógo resultante “Lienzo para Tipografía” y hacer click en “Crear desde plantilla”

El lienzo debe transformarse en un lienzo con guías diseñado específicamente para el diseño de tipografías o fuentes.

Ahora vamos a mostrar la Caja de herramientas para tipografías

Haz click en el menú Texto >> “Editor de Fuentes SVG”
En el panel resultante a la derecha es donde estaremos creando nuestra tipografía a partir de los dibujos del lienzo. Selecciona el botón “Nuevo” que se encuentra al final del editor de Fuentes y dale un nombre a la tipografía que quieras crear. Yo usaré el nombre WebFont .

Ahora abriremos la pestaña “Glifos” de ese mismo diálogo y comenzaremos a crear nuestros glifos. Un glifo no es más que el dibujo correspondiente a cada caracter en una tipografía. En nuestro caso los glifos serán diseñados en el lienzo y luego asignados a un carácter específico.

Hora de pintar

Para dibujar los glifos usaremos fundamentalmente la herramienta pluma de la caja de herramientas a la izquierda. Aunque pueden combinarse el resto de las herramientas para lograr un acabado más perfecto.
Una vez que se tenga un dibujo del glifo terminado en el lienzo, es hora de asignarle un glifo en nuestra tipografía. Para ello vamos al panel de edición de Fuentes y en la pestaña Glifos, accionamos el botón “Nuevo Glifo” en la parte inferior izquierda. Se creará un elemento al que le debemos especificar un nombre y el carácter que le corresponde.
En mi caso al primer glifo le pondré “star” como nombre y ‘1’ como carácter.

Luego seleccionamos el dibujo que hemos creado en el lienzo y hacemos click en el botón “Obtener curvas desde la selección” para asignar el dibujo al glifo creado.
Para comprobar que se ha hecho la operación correctamente, podemos escribir el carácter asociado al glifo en el cuadro de texto que dice Vista Previa, y debe dibujarse justo encima, la imagen que le hemos asignado a ese carácter.

Si todo fue bien puedes borrar el lienzo y continuar creando el resto de los glifos.

Una vez completados todos los glifos de nuestra WebFont guardamos el archivo usando un formato de “SVG plano”. Para ello vamos a Archivo >> Guardar Como.. y en el tipo de archivo seleccionamos “SVG plano” y damos Guardar.

Hasta aquí el trabajo con InkScape. Ahora es necesario convertir ese archivo SVG en un archivo de fuentes compatible con los navegadores. Para esta tarea usaremos una página web que brinda este servicio y además te genera los archivos CSS necesarios para tu webFont.

Convirtiendo el SVG a WOFF

Abriremos un navegador y pondremos la ruta http://font-converter.net

Hacemos click en el botón verde que aparece en la pantalla inicial para cargar nuestro archivo SVG o simplemente lo arrastramos hacia la página.

Una vez hecho esto pasamos al siguiente paso, en el que seleccionaremos los formatos a los que queremos exportar nuestras fuentes. En mi caso me quedaré solo con #WOFF y #TTF y pulsamos en el botón “Convert your font”.
Si la conversión tiene éxito, se descargará un archivo comprimido con las fuentes generadas dentro.

Una vez descargadas las fuentes generadas, debemos hacer un ligero cambio en nuestra webFont. Para ello abriremos el archivo style.css de nuestra fuente y lo modificaremos para que quede de la forma siguiente.

@font-face {
   font-family: "webFont";

   src: url("./fonts/webFont.ttf") format("truetype"), 
   url("./fonts/webFont.woff") format("woff"),
   url("./fonts/webFont.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
}

.icon{
   font-family: webFont;
}

.icon-star:before{
   content: '1';
}

.icon-star-line:before{
   content: '2';
}

.icon-home:before{
   content: '3';
}

En la primera regla CSS del archivo el valor de la propiedad font-family es “webFont” que es el nombre que le vamos a dar a nuestra fuente. Puede ser el nombre que ustedes quieran, pero sí es muy importante que sea lo más original posible para que no hayan problemas y se pueda confundir o solapar quizás con alguna otra fuente del mismo nombre.

En las reglas CSS que corresponden a cada uno de los dibujos de la fuente, la propiedad “content” responde al caracter que asignamos a un dibujo determinado en Inkscape cuando creamos la fuente. Por lo que el carácter “1” corresponderá a la estrella con relleno, el “2” a la estrella con líneas, etc.

Ya con esto hemos terminado de crear nuestra webFont solo resta probarla. Para ello vamos a utilizar la propia página web de ejemplo que se descargó junto con el resto de los archivos que se llama index.html.
La editamos y creamos algún elemento span con las clases que le asignamos a nuestras fuentes y al cargar la página en el navegador vemos como ya se muestran nuestros íconos personalizados.

Para los que no les gusta leer

Sé que a muchos no les gusta tener que leer algo tan largo para poder hacer alguna cosa, así que para esos que prefieren el camino más corto, les dejo un Video con todo lo que he detallado en el Post. (espero que no que hayan tenido que leer hasta aquí para poder ver el video, jeje)

Crear WebFont con InkScape (VIDEO)

Nota: Mis disculpas a los de fuera de la UCI, pero por el tamaño del video no he podido alojarlo directamente en el blog, así que solo estará accesible para los usuarios UCI.

Y eso fue todo. Espero que sea de su agrado y que pronto estén haciendo sus propias webFonts personalizadas al estilo Inkscape.

Cualquier opinión, queja, duda o “Troll comment”, favor de dejarla en los comentarios >> EOF 😉