Fontello
Generador de fuentes de iconos
Gratis
Plataformas soportadas
web
Etiquetas de herramienta
Qué es Fontello
Fontello es una utilidad web de alto rendimiento que permite a los desarrolladores crear fuentes de iconos personalizadas a partir de archivos vectoriales SVG. A diferencia de las bibliotecas de iconos monolíticas como Font Awesome, Fontello permite a los usuarios seleccionar iconos específicos de varios conjuntos o cargar sus propios SVG, lo que reduce significativamente el tamaño del paquete. Genera automáticamente archivos CSS, WOFF, EOT y TTF, garantizando la compatibilidad entre navegadores. Al eliminar los glifos no utilizados, optimiza el rendimiento web y minimiza las solicitudes HTTP, convirtiéndolo en una herramienta esencial para ingenieros front-end enfocados en una arquitectura de interfaz de usuario ligera y eficiente.
Funciones principales de Fontello
Selección personalizada de subconjuntos de iconos
Fontello permite seleccionar solo los glifos necesarios para su aplicación. Al excluir miles de iconos no utilizados, puede reducir el tamaño del archivo de fuente de cientos de kilobytes a solo unos pocos. Este control granular mejora directamente las Core Web Vitals, reduciendo específicamente los tiempos de Largest Contentful Paint (LCP) al minimizar el tamaño de carga de los activos críticos.
Conversión de SVG a fuente
La plataforma incluye un motor robusto que convierte rutas vectoriales SVG en formatos de fuente estandarizados (WOFF, WOFF2, TTF, EOT). Maneja la normalización de rutas y el escalado de coordenadas automáticamente, asegurando que sus iconos personalizados se rendericen con nitidez en cualquier resolución. Esto es superior al uso de SVG sin procesar en el DOM, ya que permite una fácil manipulación de color y tamaño mediante propiedades CSS estándar como 'color' y 'font-size'.
Generación automática de CSS
Tras la descarga, Fontello proporciona un archivo CSS listo para usar que incluye todas las declaraciones @font-face y definiciones de clase necesarias. Esto elimina la carga manual de escribir CSS repetitivo para el posicionamiento de iconos, ajustes de interlineado y alineación vertical. El código generado está optimizado para navegadores modernos, garantizando una renderización consistente en Chrome, Firefox, Safari y Edge sin requerir polyfills complejos.
Control de mapeo Unicode
Los usuarios tienen control total sobre el mapeo Unicode para cada icono. Esto es crítico para desarrolladores que integran iconos en sistemas heredados o sistemas de diseño complejos donde ciertos códigos de caracteres podrían estar reservados. Al asignar códigos manualmente, se evitan colisiones de caracteres y se asegura que la fuente de iconos se integre perfectamente con las pilas tipográficas existentes sin comportamientos inesperados.
Compatibilidad multiplataforma
Fontello genera múltiples formatos de fuente simultáneamente para garantizar la máxima compatibilidad con navegadores. Aunque WOFF2 es preferido para navegadores modernos debido a su compresión superior, Fontello incluye formatos antiguos como EOT y TTF para soportar entornos heredados. Esto asegura que su interfaz de usuario permanezca consistente en una amplia gama de dispositivos, desde smartphones modernos hasta navegadores de escritorio antiguos, sin requerir herramientas de conversión adicionales durante la compilación.
Cómo usar Fontello
Acceda a fontello.com y explore las colecciones de iconos integradas o arrastre y suelte sus propios archivos SVG en la pestaña 'Custom Icons'.,Seleccione los iconos específicos que necesita para su proyecto haciendo clic en ellos; los iconos seleccionados se resaltarán en rojo.,Vaya a la pestaña 'Customize Names' para renombrar sus iconos, lo que definirá los nombres de las clases CSS utilizadas en su hoja de estilos.,Diríjase a la pestaña 'Customize Codes' para asignar sus iconos a caracteres Unicode específicos si necesita evitar conflictos con conjuntos de caracteres existentes.,Haga clic en el botón rojo 'Download webfont' en la esquina superior derecha para recibir un archivo ZIP con las fuentes y el CSS generados.,Extraiga los archivos en el directorio de su proyecto y vincule el archivo CSS generado a su HTML para comenzar a usar los iconos mediante nombres de clase.
Casos de uso de Fontello
Optimización del rendimiento web
Los desarrolladores front-end utilizan Fontello para reemplazar bibliotecas de iconos pesadas. Al crear una fuente personalizada que contiene solo los 20-30 iconos utilizados realmente en una aplicación web, reducen el tamaño total de los activos hasta en un 90%, lo que conduce a cargas de página más rápidas y mejores clasificaciones SEO.
Branding con iconos personalizados
Diseñadores y desarrolladores colaboran para convertir logotipos de marca patentados y elementos de interfaz únicos en una fuente de iconos cohesiva. Esto permite que los activos de marca se estilicen mediante CSS, permitiendo cambios de color dinámicos al pasar el ratón o cambios de estado.
Prototipado rápido
Los diseñadores UI/UX utilizan Fontello para ensamblar rápidamente un conjunto de iconos de múltiples colecciones de código abierto (como Entypo o Iconic) para probar conceptos de interfaz. Proporciona una forma unificada de gestionar estilos de iconos dispares dentro de un mismo proyecto.
Quién se beneficia de Fontello
Desarrolladores Front-End
Necesitan gestionar activos de iconos de manera eficiente manteniendo tamaños de paquete pequeños. Fontello resuelve el problema de las bibliotecas de iconos 'pesadas' proporcionando un archivo de fuente optimizado y personalizado.
Diseñadores UI/UX
Requieren una forma de implementar iconos vectoriales personalizados en proyectos web sin depender de que los desarrolladores exporten y optimicen manualmente archivos SVG individuales para cada tamaño de pantalla.
Ingenieros de rendimiento
Enfocados en reducir las solicitudes HTTP y el tamaño de carga de los activos. Utilizan Fontello para consolidar múltiples iconos en un solo archivo de fuente, reduciendo el número de solicitudes de red necesarias para renderizar la interfaz.
Precios de Fontello
Fontello es un proyecto gratuito de código abierto. El software se proporciona bajo la licencia MIT, lo que permite su uso gratuito tanto en proyectos personales como comerciales.
