Hoy en día cada décima de segundo cuenta a la hora de mejorar el rendimiento de nuestro diseño web. Es lo que se denomina WPO (Web Performance Optimization). Técnicas como el uso de sprites e imágenes se están sustituyendo por otras técnicas que nos permiten mejorar este rendimiento y acelerar la carga.
Utilizar webfonts para mostrar iconos en nuestros diseños web es una técnica utilizada desde hace algún tiempo y bastante conocida. Puedes consultar en esta misma página un artículo relacionado: Utilizar tipos de iconos o webfonts en lugar de imágenes con HTML y CSS: Font Awesome y efectos 3D.
Es una técnica muy fácil de utilizar. Utilizando CSS cargas una tipografía que está compuesta de iconos y por medio de clases puedes mostrar dichos iconos en la web. Los tiempos de carga son mucho más rápidos dado que todos los iconos se encuentran integrados en un sólo fichero, son tipos vectoriales por lo que funcionan en cualquier tamaño y podemos aplicarles estilos CSS. Todo son ventajas.
Existen muchas tipografías de iconos de uso libre como FontAwesome, Fontelico, Entypo, Typicons, Iconic, etc. Incluso algunos conocidos frameworks como Twitter Bootstrap o Zurb Foundation incorporan sus propias fuentes.
Sin embargo, nunca es suficiente… ¡Podemos mejorar!
Personalización y empleo de varios webfont en uno solo
Aunque el tamaño de un tipo de letra de estas características es ciertamente ridículo si los comparamos con una versión en imagen todo se puede optimizar y mejorar. El tamaño de los cientos de iconos FontAwesome oscilan entre los 80k en un solo fichero del formato .TTF a los 38k del fichero en formato .EOT. Naturalmente siempre se puede reducir su tamaño dado que es muy dificil que emplees todos los iconos de cualquier fuente en un sólo proyecto. Lo ideal sería contar con herramientas que te permitan generar una webfont sólo con los iconos y estilos CSS que vas a emplear.
Imaginad que únicamente necesitáis 15 o 20 iconos para vuestro diseño web con unos cuantos iconos sociales (fundamentales), iconos de acción, los típicos de aceptar cancelar y poco más. Realmente sólo necesitaréis menos del 10%. Entonces, ¿qué sentido tiene cargar la fuente completa? Para haceros una idea, un fichero con sólo 20 iconos de FontAwesome tiene un tamaño de entre 4k y 6k. Estamos hablando de una reducción en tamaño de más del 90%.
El otro frente sería la combinación de tipos de letra. Cuando lleveis un tiempo trabajando con tipografías empezareis a cansaros de utilizar los mismos iconos sociales. O de emplear los mismos diseños para los botones de acción. También cada página o proyecto es distinto así que tendrás que utilizar varias tipografías simultaneamente. Esto se traduce en más tráfico y más peticiones al servidor si las cargáis individualmente y un funcionamiento menos optimizado. Naturalmente lo ideal sería poder combinar los iconos de distintas tipografías en uno solo para poder reducir el número de peticiones de ficheros a nuestro servidor y su tráfico.
Y ahí es donde entrar algunos optimizadores y gestores de webfonts como Fontello o Icomoon ).
Con cualquiera de ellos podremos:
- Elegir de una webfont sólo los iconos que nos interesan.
- Combinar entre sí varias webfont para obtener una única tipografía personalizada para cada proyecto.
- Importar otras tipografías o ficheros .SVG independientes para generar una tipografía nueva y combinada con otras.
- Cargar proyectos anteriores y modificarlos
Personalizar una webfont con Fontello
He elegido Fontello para realizar este ejemplo porque se trata de un proyecto libre, gratuito, que se puede utilizar bajo licencia MIT. También te puedes descargar el proyecto de GitHub y personalizarlo como un recurso propio. Todas las fuentes contenidas en el proyecto se distribuyen bajo la Open Font License o Creative Commons.
Es importante recordar que los tipos de letra pueden estar publicados bajo distintos tipos de licencias: Open Font License, Creative Commons, Copyright, etc. Puede permitirse su redistribución o no. Incluir un tipo de letra en una web se considera comunicación pública y puede acarrearte problemas. Leed las licencias y qué podéis y qué no podéis hacer con una tipografía
Comenzamos
En este caso voy a generar una tipografía seleccionando varios iconos sociales. En primer lugar lo que se muestra es un amplio catálogo con todas las webfonts disponibles. Me voy a desplazar hacia el final de la página y por ejemplo voy a seleccionar en la webfont Zocial los siguientes iconos: Facebook, Twitter, Pinterest, Google Plus y Linkedin. Directamente se actualizará mi «carrito» con el número de iconos seleccionados.
Ahora vamos a buscar entre los demás algún tipo de iconos de acción para nuestros proyecto. Los típicos de enviar un correo, volver a la home, carro de la compra, perfil, likes, etc.
Integrando iconos externos
Por último vamos a importar algunos iconos específicos que hemos descargado de IconFinder, consultándo previamente su licencia. En este caso hemos elegido un conjunto de iconos que nos permite su utilización citando simplemente al autor: Designmodo.
Para ellos hemos descargado los iconos que nos interesan y los hemos ido añadiendo al proyecto en formato .SVG. Es importante recordar este detalle. Además Fontello nos permite añadir iconos individuales o fuentes completas, siempre en formato .SVG.
Si en algún momento necesitáis convertir una tipografía a .SVG porque la tenéis en otro formato (en .TTF por ejemplo) podéis utilizar conversores online como el de FontEsquirrel y subir el .SVG generado.
Lo siguiente que deberemos de hacer es personalizar los nombres de las clases .CSS que utilizaremos en nuestro diseño para mostrar los iconos.
Incluso como último paso, aunque no es realmente necesario, podemos asignar cada icono un código UNICODE: una letra en concreto por ejemplo. En este caso hemos asociado cada icono a una letra del alfabeto, aunque como digo no es necesario.
Descargando nuestra webfont personalizada
Un vez finalizado el proceso podemos descargar un fichero comprimido con nuestra tipografía en los formatos necesarios para que los soporten los distintos navegadores; hojas de estilos .CSS para poder integrar los iconos en nuestro diseño; y un fichero en formato .JSON donde se almacena toda la información de nuestra webfont.
¿Pero cuanto ocupa esta versión optimizada y personalizada? Pues contando el CSS y el tamaño de los fuentes de letra en unos 8k tenemos el código necesario para mostrar más de 25 iconos.
Si en algún momento necesitamos modificar nuestra webfont (quitar o añadir nuevos iconos), cambiar el nombre de las clases, etc podemos volver a importar el fichero .JSON en la página y realizar las modificaciones que necesitemos.
Con esta sencilla técnica no sólo podemos mejorar el tiempo de carga de nuestra página, sino el posicionamiento y SEO. Además de que en cualquier momento podemos añadir y quitar iconos de forma fácil.
Espero que os sea de utilidad. Y vosotros. ¿Qué otras técnicas o servicios de personalización de iconos utilizáis?
Autor:
Última actualización:
Hola,muy interesante tu articulo y ademas lo voy a probar aver que tal me sale.Gracias.
Gracias Ioan. Ya me contarás 😉
Me gustaría algún software offline para esta operación de mezclar 2 fuentes y elegir solo los íconos que nos interesan. Muchas gracias por el artículo
Por desgracia no puedo ayudarte. Supongo que para ello sería mejor contactar con algún diseñador gráfico. Me alegra que te gustara el artículo.
Fantástica recomendación y muy buen artículo, Oscar. Lo he puesto en práctica y me ha sido de ayuda. Un saludo!
Muchas gracias a tí. 😉