Instanciador de fontes variáveis

• Instanciação instantânea de fontes variáveis: nosso instanciador de fontes variáveis lê todos os eixos da fonte (peso, largura, inclinação, tamanho óptico) e gera uma instância estática na hora no seu navegador - sem envio a servidor, sem processamento na nuvem e sem espera.
• Instanciador de fontes variáveis online seguro: seu arquivo de fonte nunca sai do seu dispositivo ao usar nosso instanciador de fontes variáveis online. Toda a análise de eixos e a remoção de tabelas acontecem localmente com a biblioteca opentype.js no navegador - 100 % privado.
• Instanciador de fontes variáveis sem instalação: crie instâncias de fontes variáveis diretamente no navegador sem baixar software, sem plugins e sem conta. Nosso instanciador de fontes variáveis funciona em qualquer navegador moderno e em qualquer sistema operacional.
• Instâncias nomeadas + controle manual de eixos: aplique as instâncias nomeadas integradas (Regular, Bold, Light etc.) com um clique, ou arraste os controles de eixo para controlar com precisão peso, largura, inclinação, tamanho óptico e qualquer eixo personalizado.

• Otimização de desempenho web: reduza o peso das fontes em projetos web que usam apenas um peso ou estilo. Remover as tabelas variáveis de uma fonte variável de 200 KB pode produzir uma instância estática de 60-80 KB - uma melhoria significativa nos tempos de carregamento.
• Melhoria de Core Web Vitals e LCP: elimine a sobrecarga desnecessária de fontes variáveis em páginas que usam um único estilo de fonte. Nosso instanciador de fontes variáveis produz uma fonte estática que carrega mais rápido e reduz requisições de fontes que bloqueiam a renderização.
• Empacotamento de fontes em apps mobile: inclua uma instância específica de peso e largura em aplicativos mobile em vez da fonte variável completa. Uma instância estática é menor e carrega mais rápido em dispositivos com memória e largura de banda limitadas.
• Entrega de fontes em design systems: gere instâncias de pesos específicos (Regular 400, Medium 500, Bold 700) a partir de uma única fonte variável para pacotes de design system. Instâncias estáticas garantem renderização consistente em todos os ambientes.
• Compatibilidade com navegadores antigos: crie instâncias estáticas de fontes para ambientes que não suportam fontes variáveis - navegadores antigos, geradores de PDF e clientes de e-mail. Nosso instanciador de fontes variáveis produz saída TTF/OTF padrão.
• Otimização de CDN e recursos estáticos: reduza os custos de armazenamento e largura de banda do CDN servindo instâncias estáticas em vez de fontes variáveis completas. Uma instância estática em um peso específico costuma ser 40-60 % menor que o arquivo de fonte variável completo.

A instanciação de fontes variáveis é o processo de converter uma fonte variável - que codifica um intervalo contínuo de estilos ao longo de vários eixos de design (peso, largura, inclinação, tamanho óptico) - em uma instância estática menor, congelada em valores de eixo específicos. Fontes variáveis usam a especificação OpenType 1.8 e armazenam os dados de variação dos glifos em tabelas como fvar (variações de fonte), gvar (variações de glifos) e HVAR/VVAR (variações de métricas). Essas tabelas podem adicionar 50-150 KB ao arquivo de fonte. Nosso instanciador de fontes variáveis lê as definições de eixos da fonte com opentype.js, permite definir valores de eixo e remove as tabelas exclusivas de fontes variáveis para produzir uma fonte estática menor - tudo localmente no seu navegador.

1. 1 Envie sua fonte variável: arraste e solte qualquer arquivo de fonte variável (TTF, OTF, WOFF, WOFF2). A ferramenta analisa a tabela fvar com opentype.js para extrair todas as definições de eixos e instâncias nomeadas - nenhum dado é enviado a servidor algum.
2. 2 Defina os valores dos eixos: use os presets de instâncias nomeadas (Regular, Bold, Light etc.) para seleção com um clique, ou arraste os controles de eixo para definir valores precisos de peso, largura, inclinação, tamanho óptico e qualquer eixo personalizado. Todo o processamento acontece localmente no seu navegador.
3. 3 Baixe a instância estática: clique em «Criar instância estática» - a ferramenta remove as tabelas exclusivas de fontes variáveis (fvar, gvar, avar, HVAR, VVAR, MVAR, STAT) e baixa a fonte estática menor. O painel de resultados mostra o tamanho original, o tamanho de saída e o percentual de redução.

• fvar (Font Variations): a tabela de definições de eixos - define todos os eixos de design, seus intervalos e as instâncias nomeadas. Removida na saída estática, já que os eixos não são mais necessários.
• gvar (Glyph Variations): a maior tabela variável - armazena os ajustes delta de cada contorno de glifo em cada posição de eixo. Removê-la produz a maior redução de tamanho.
• HVAR / VVAR (Metric Variations): armazenam variações de largura de avanço e altura em todo o espaço de design. Removidas porque as métricas ficam congeladas nos valores de eixo escolhidos.
• STAT / avar / MVAR / cvar: tabelas de variação adicionais para atributos de estilo, normalização de eixos, variações de métricas e variações de CVT - todas removidas na saída de instância estática.

Esta ferramenta faz remoção de tabelas: ela remove as tabelas exclusivas de fontes variáveis para produzir uma fonte menor, mas não aplica ajustes delta no nível dos glifos aos contornos. A fonte de saída usa os contornos de glifos padrão da fonte variável, que podem não corresponder perfeitamente à aparência renderizada em valores de eixo diferentes dos padrão. Para instanciação completa no nível dos glifos (aplicando ajustes delta para produzir contornos exatos nos valores de eixo escolhidos), use o instanciador do fonttools (fonttools varLib.instancer) ou a ferramenta de desktop de instanciação de fontes variáveis do Google Fonts.