Instanciador de fuentes variables

• Instanciación instantánea de fuentes variables: nuestro instanciador de fuentes variables lee todos los ejes de la fuente (peso, ancho, inclinación, tamaño óptico) y genera una instancia estática al instante en tu navegador - sin subir a servidores, sin procesamiento en la nube y sin esperas.
• Instanciador de fuentes variables online seguro: tu archivo de fuente nunca sale de tu dispositivo al usar nuestro instanciador de fuentes variables online. Todo el análisis de ejes y la eliminación de tablas ocurren localmente con la biblioteca opentype.js en el navegador - 100 % privado.
• Instanciador de fuentes variables sin instalación: crea instancias de fuentes variables directamente en tu navegador sin descargar software, sin plugins y sin cuenta. Nuestro instanciador de fuentes variables funciona en cualquier navegador moderno y en cualquier sistema operativo.
• Instancias con nombre y control manual de ejes: aplica las instancias con nombre integradas (Regular, Bold, Light, etc.) con un clic, o arrastra los controles de eje para controlar con precisión peso, ancho, inclinación, tamaño óptico y cualquier eje personalizado.

• Optimización del rendimiento web: reduce el peso de las fuentes en proyectos web que solo usan un peso o estilo. Eliminar las tablas variables de una fuente variable de 200 KB puede producir una instancia estática de 60-80 KB, una mejora significativa para los tiempos de carga.
• Mejora de Core Web Vitals y LCP: elimina la sobrecarga innecesaria de las fuentes variables en páginas que usan un solo estilo de fuente. Nuestro instanciador de fuentes variables produce una fuente estática que carga más rápido y reduce las peticiones de fuentes que bloquean el renderizado.
• Empaquetado de fuentes en apps móviles: incluye una instancia concreta de peso y ancho en aplicaciones móviles en lugar de la fuente variable completa. Una instancia estática es más pequeña y carga más rápido en dispositivos móviles con memoria y ancho de banda limitados.
• Entrega de fuentes en sistemas de diseño: genera instancias de pesos concretos (Regular 400, Medium 500, Bold 700) a partir de una única fuente variable para paquetes de sistema de diseño. Las instancias estáticas garantizan un renderizado consistente en todos los entornos.
• Compatibilidad con navegadores antiguos: crea instancias estáticas de fuentes para entornos que no admiten fuentes variables - navegadores antiguos, generadores de PDF y clientes de correo. Nuestro instanciador de fuentes variables produce salida TTF/OTF estándar.
• Optimización de CDN y recursos estáticos: reduce los costes de almacenamiento y ancho de banda del CDN sirviendo instancias estáticas en lugar de fuentes variables completas. Una instancia estática en un peso concreto suele ser un 40-60 % más pequeña que el archivo de fuente variable completo.

La instanciación de fuentes variables es el proceso de convertir una fuente variable - que codifica un rango continuo de estilos a lo largo de varios ejes de diseño (peso, ancho, inclinación, tamaño óptico) - en una instancia estática más pequeña con los ejes congelados en valores concretos. Las fuentes variables usan la especificación OpenType 1.8 y almacenan los datos de variación de glifos en tablas como fvar (variaciones de fuente), gvar (variaciones de glifo) y HVAR/VVAR (variaciones de métricas). Estas tablas pueden añadir entre 50 y 150 KB al archivo de fuente. Nuestro instanciador de fuentes variables lee las definiciones de ejes de la fuente con opentype.js, te permite fijar valores de eje y elimina las tablas exclusivas de fuentes variables para producir una fuente estática más pequeña - todo localmente en tu navegador.

1. 1 Sube tu fuente variable: arrastra y suelta cualquier archivo de fuente variable (TTF, OTF, WOFF, WOFF2). La herramienta analiza la tabla fvar con opentype.js para extraer todas las definiciones de ejes e instancias con nombre - no se envía ningún dato a un servidor.
2. 2 Fija los valores de los ejes: usa los preajustes de instancias con nombre (Regular, Bold, Light, etc.) para seleccionar con un clic, o arrastra los controles de eje para fijar valores precisos de peso, ancho, inclinación, tamaño óptico y cualquier eje personalizado. Todo el procesamiento ocurre localmente en tu navegador.
3. 3 Descarga la instancia estática: haz clic en «Crear instancia estática» - la herramienta elimina las tablas exclusivas de fuentes variables (fvar, gvar, avar, HVAR, VVAR, MVAR, STAT) y descarga la fuente estática más pequeña. El panel de resultados muestra el tamaño original, el tamaño de salida y el porcentaje de reducción.

• fvar (Font Variations): la tabla de definiciones de ejes - define todos los ejes de diseño, sus rangos y las instancias con nombre. Se elimina en la salida estática porque los ejes ya no son necesarios.
• gvar (Glyph Variations): la tabla variable más grande - almacena los ajustes delta de cada contorno de glifo en cada posición de eje. Eliminarla produce la mayor reducción de tamaño.
• HVAR / VVAR (Metric Variations): almacenan las variaciones de ancho de avance y altura en todo el espacio de diseño. Se eliminan porque las métricas quedan congeladas en los valores de eje elegidos.
• STAT / avar / MVAR / cvar: tablas de variación adicionales para atributos de estilo, normalización de ejes, variaciones de métricas y variaciones de CVT - todas eliminadas en la salida de la instancia estática.

Esta herramienta realiza eliminación de tablas: quita las tablas exclusivas de fuentes variables para producir una fuente más pequeña, pero no aplica ajustes delta a nivel de glifo en los contornos. La fuente de salida usa los contornos de glifo por defecto de la fuente variable, que pueden no coincidir exactamente con el aspecto renderizado en valores de eje distintos de los predeterminados. Para una instanciación completa a nivel de glifo (aplicando ajustes delta para producir contornos exactos con los valores de eje elegidos), usa el instanciador de fonttools (fonttools varLib.instancer) o la herramienta de escritorio de instanciación de fuentes variables de Google Fonts.