Reductor de tipografies (subconjunts)

Com crear un subconjunt d’una tipografia

1. Comprova la llicència. Crear un subconjunt genera una còpia modificada de la tipografia. Les llicències obertes, com la SIL Open Font License (OFL) i l’Apache 2.0, ho permeten; moltes llicències comercials d’escriptori i web no, o només sota certes condicions. Llegeix primer la llicència de la teva tipografia.
2. Deixa un fitxer TTF, OTF o WOFF a la zona indicada, o fes-hi clic per triar-ne un. El panell Tipografia original mostra la família, el format, la mida del fitxer, el nombre de glifs i el nombre de caràcters que la tipografia associa.
3. Tria els Caràcters que cal conservar: Llatí bàsic, Llatí-1, Llatí, com a Google Fonts, Francès i Xifres i signes numèrics es poden combinar. Afegeix-hi els teus propis caràcters a Caràcters d’un text (es conserva cada caràcter diferent del text) o a Intervals Unicode, escrits com en CSS: U+0020-007E, U+2013, U+04??.
4. Marca Elimina el hinting si vols el fitxer més petit possible.
5. Fes clic a Crea el subconjunt. El motor (uns 650 KB) es carrega la primera vegada, i després la tipografia es processa al teu dispositiu.
6. Compara les mides a Resultat, mira la Previsualització del subconjunt, utilitza Baixa TTF (o OTF) i Baixa WOFF, i copia la regla CSS @font-face.

El fitxer de la tipografia no surt mai del teu ordinador: es llegeix, se’n crea el subconjunt i es torna a empaquetar al navegador.

Per al català, el conjunt Llatí-1 ja inclou totes les lletres accentuades (à, è, é, í, ï, ò, ó, ú, ü), la ç i el punt volat (·) de la ela geminada (l·l). Afegeix només, si cal, l’apòstrof tipogràfic (’), les cometes angulars (« ») i el signe de l’euro (€), que ja són dins del conjunt Llatí, com a Google Fonts.

Què fa un subconjunt

Una tipografia sovint conté centenars o milers de glifs: ciríl·lic, grec, vietnamita, símbols, variants. Una pàgina escrita en català o en un altre idioma europeu només en fa servir una fracció. Aquesta eina executa hb-subset, el creador de subconjunts del motor de text HarfBuzz (el mateix codi que utilitzen Google Fonts i moltes eines de compilació), compilat a WebAssembly. Conserva els glifs dels caràcters que has seleccionat, més els glifs que les funcions OpenType necessiten per mostrar-los (lligadures com «fi», versaletes i formes accentuades quan es poden assolir a partir dels teus caràcters), i elimina la resta. El kerning i les altres taules de maquetació s’ajusten en conseqüència.

Resultats típics: una tipografia completa de llatí + ciríl·lic + grec de 300 KB pot baixar a 20 o 30 KB per a un text en francès, i una tipografia de logotip reduïda a les lletres d’una sola paraula sovint pesa uns pocs quilobytes.

La línia No són a la tipografia llista els caràcters que has demanat i que la tipografia no té. Els navegadors els dibuixaran amb una tipografia de reserva.

Formats de sortida i unicode-range

• TTF/OTF: el subconjunt conserva el tipus de contorn de l’original (TrueType o CFF).
• WOFF: la mateixa tipografia amb cada taula comprimida amb zlib. Tots els navegadors actuals el llegeixen. Una entrada WOFF es descomprimeix primer.
• WOFF2 no està disponible: la seva compressió Brotli i les transformacions de taules no tenen cap codificador al navegador, i aquí tampoc no es poden llegir fitxers WOFF2. Converteix primer el WOFF2 a TTF (per exemple amb fontTools). El teu servidor també pot comprimir el TTF/OTF amb gzip o Brotli sobre la marxa.

La regla CSS @font-face llista primer el fitxer WOFF, defineix font-display: swap i afegeix un unicode-range construït a partir dels caràcters que hi ha realment al subconjunt. Amb unicode-range, el navegador només baixa el fitxer quan la pàgina fa servir un d’aquests caràcters, de manera que pots dividir una família en diversos fitxers (per exemple llatí i ciríl·lic) i deixar que cada visitant carregui només el que necessita. Edita el Nom de font-family perquè coincideixi amb el nom que fas servir al teu full d’estils.