Criar subconjunto de fontes

Como criar um subconjunto de uma fonte

1. Verifica a licença. Criar um subconjunto gera uma cópia modificada da fonte. Licenças abertas como a SIL Open Font License (OFL) e a Apache 2.0 permitem-no; muitas licenças comerciais, de desktop ou web, não o permitem, ou só sob certas condições. Lê primeiro a licença da tua fonte.
2. Larga um ficheiro TTF, OTF ou WOFF na zona indicada, ou clica nela para escolher um. O painel Fonte original mostra a família, o formato, o tamanho do ficheiro, o número de glifos e o número de caracteres que a fonte mapeia.
3. Escolhe os Caracteres a manter: Latim básico, Latin-1, Latim, como no Google Fonts, Francês e Algarismos e sinais numéricos podem ser combinados. Acrescenta os teus próprios caracteres em Caracteres de um texto (todos os caracteres distintos do texto são mantidos) ou em Intervalos Unicode, escritos como em CSS: U+0020-007E, U+2013, U+04??.
4. Marca Remover hinting se quiseres o ficheiro mais pequeno possível.
5. Clica em Criar subconjunto. O motor (cerca de 650 KB) carrega da primeira vez e depois a fonte é processada no teu dispositivo.
6. Compara os tamanhos em Resultado, vê a Pré-visualização do subconjunto e usa Transferir TTF (ou OTF) e Transferir WOFF; por fim copia a regra CSS @font-face.

O ficheiro da fonte nunca sai do teu computador: é lido, reduzido e reempacotado no navegador.

E o português?

Não há uma predefinição específica para português, mas não precisas dela: todas as letras do português (á, à, â, ã, é, ê, í, ó, ô, õ, ú, ç e as respetivas maiúsculas), bem como as aspas « », estão no Latin-1. Para um texto em português, Latin-1 ou Latim, como no Google Fonts (que acrescenta o €, o travessão e as aspas curvas) são a escolha certa.

O que faz um subconjunto

Uma fonte contém muitas vezes centenas ou milhares de glifos: cirílico, grego, vietnamita, símbolos, variantes. Uma página escrita em português usa apenas uma fração deles. Esta ferramenta executa o hb-subset, o criador de subconjuntos do motor de texto HarfBuzz (o mesmo código usado pelo Google Fonts e por muitas ferramentas de build), compilado para WebAssembly. Mantém os glifos dos caracteres que selecionaste, mais os glifos de que as funcionalidades OpenType precisam para os apresentar (ligaduras como «fi», versaletes e formas acentuadas quando são alcançáveis a partir dos teus caracteres), e remove o resto. O kerning e as outras tabelas de layout são reduzidos em conformidade.

Resultados típicos: uma fonte completa latim + cirílico + grego de 300 KB pode descer para 20 ou 30 KB para um texto em francês ou português, e uma fonte de logótipo reduzida às letras de uma única palavra pesa muitas vezes poucos kilobytes.

A linha Não existem na fonte lista os caracteres que pediste e que a fonte não tem. Os navegadores vão desenhá-los com uma fonte alternativa.

Formatos de saída e unicode-range

• TTF/OTF: o subconjunto mantém o tipo de contornos do original (TrueType ou CFF).
• WOFF: a mesma fonte com cada tabela comprimida com zlib. Todos os navegadores atuais a leem. Uma entrada WOFF é primeiro descomprimida.
• WOFF2 não está disponível: a compressão Brotli e as transformações de tabelas não têm codificador no navegador, e os ficheiros WOFF2 também não podem ser lidos aqui. Converte primeiro o WOFF2 para TTF (por exemplo com o fontTools). O teu servidor também pode comprimir o TTF/OTF com gzip ou Brotli em tempo real.

A regra CSS @font-face indica primeiro o ficheiro WOFF, define font-display: swap e acrescenta um unicode-range construído a partir dos caracteres realmente presentes no subconjunto. Com unicode-range, o navegador só transfere o ficheiro quando a página usa um desses caracteres, por isso podes dividir uma família em vários ficheiros (por exemplo latim e cirílico) e deixar cada visitante carregar só o que precisa. Edita o Nome font-family para corresponder ao nome usado na tua folha de estilos.