TTF naar WOFF2 omzetten

Er wordt niets opnieuw getekend. Een TTF is een verzameling tabellen — de omtrekken, de tekentabel, de metrieken, de kerning, de OpenType-featuredefinities — en WOFF2 behoudt elke daarvan, gecomprimeerd met Brotli na een voorbewerkingsslag die lettertypedata herschikt naar een vorm die de compressor goed aankan. Een WOFF2 uitpakken levert de TTF terug die erin ging.

Dat is waarom de omzetting verliesvrij is en waarom hij geen nadenken over kwaliteit vergt. Er is geen instelling om verkeerd te doen, geen hersampling, geen kleurbeslissing. Het enige waar je hier fout in kunt gaan, is of je het mocht doen — en dat is het volgende onderdeel, wat de meeste tools overslaan.

Een lettertype is software en wordt zo gelicentieerd. De desktoplicentie bij een gekochte TTF dekt installatie op een bepaald aantal machines en het maken van dingen ermee; die dekt niet automatisch het plaatsen van het bestand op een webserver waar iedereen het kan downloaden. Webgebruik is normaal een aparte licentie, apart verkocht, en vaak geprijsd per maandelijkse paginaweergaven.

Niets in het bestand houdt je tegen, wat precies het probleem is — de omzetting duurt een seconde en de schending is onzichtbaar tot iemand kijkt. De uitzondering om te kennen is de SIL Open Font License, waaronder de meeste gratis lettertypes verschijnen: die staat omzetten, subsetten en zelf hosten toe, mits het lettertype niet los verkocht wordt.

Een lettertype bereikt een pagina via een @font-face-regel die een familienaam geeft, naar het bestand wijst, en verklaart welk gewicht en welke stijl dat specifieke bestand vertegenwoordigt. De familienaam is lokaal aan je stylesheet en willekeurig — hij hoeft niet overeen te komen met wat het lettergieterij het noemde.

De veelgemaakte fout is één regel voor de hele familie. De browser weigert vet niet in te stellen; hij synthetiseert er een door de gewone gewichten uit te smeren, en het resultaat is zichtbaar slechter dan de echte vetgedrukte versie die ongebruikt in dezelfde map staat. Eén regel per bestand, met eerlijke gewicht- en stijlwaarden, is de hele discipline.

Een retail-TTF dekt Latijns, Latijns Extended, Cyrillisch, Grieks, valutasymbolen en honderden tekens die niemand op een Engelstalige site ooit zal typen, en elke bezoeker downloadt alles daarvan. Het lettertype terugbrengen tot de tekens die echt nodig zijn, overtreft doorgaans wat de compressie zelf bereikt.

Doe beide, in die volgorde: eerst subsetten, dan omzetten. Een desktoplettertype van 300 KB teruggebracht tot basis-Latijn en verpakt als WOFF2 landt routinematig rond 25 KB. Wees voorzichtig met de subsetter — gevraagd alleen de gebruikte tekens te bewaren, gooit hij graag ook de ligatuur- en alternatieventabellen weg.

Een browser die een lettertype moet gebruiken dat hij nog niet klaar heeft met downloaden, moet beslissen wat hij ondertussen doet. Standaard wacht hij — tot drie seconden in de meeste browsers — en toont niets. Dat is de flits van onzichtbare tekst, en het is de meest voorkomende reden dat een site met eigen typografie traag aanvoelt op een telefoon.

Eén regel lost het op: font-display: swap in de @font-face-regel tekent de tekst meteen in een terugval en herschikt zodra het echte lettertype aankomt. De herschikking is zichtbaar en veel beter dan een leeg scherm.

De gewoonte om WOFF2, dan WOFF, dan TTF, dan EOT, dan een SVG-lettertype in dezelfde regel te declareren, dateert van rond 2013 en dient niemand meer. Elke huidige browser leest WOFF2, inclusief Safari en de mobiele browsers, al jaren.

Het ene bestand declareren is het huidige advies. Een browser die oud genoeg is om WOFF2 te missen, valt terug op een systeemlettertype, wat een aanvaardbare uitkomst is en aanzienlijk beter dan vijf kopieën van elk gewicht onderhouden voor een browser die niemand draait.

Een familie omzetten betekent elk bestand omzetten: regular, cursief, vet, vet cursief, en elk extra gewicht dat het ontwerp echt gebruikt. Elk wordt zijn eigen WOFF2 en zijn eigen @font-face-regel onder dezelfde familienaam, en de browser downloadt alleen wat een pagina nodig heeft.

Hier gaat het paginagewichtbudget meestal verloren. Vier gewichten van 25 KB is 100 KB voordat er iets anders geladen is, en de meeste ontwerpen gebruiken er twee. Zet alleen om wat de stylesheet aanroept — de ongebruikte gewichten kosten niets op schijf en alles in de netwerkwaterval als een regel er stiekem naar wijst.

TrueType-omtrekken dragen hinting-instructies — een klein stapelgebaseerd programma per glyph dat de renderer vertelt hoe de vorm bij kleine afmetingen te vervormen zodat stammen op hele pixels landen. Die instructies zijn tabellen als elke andere en overleven de omzetting naar WOFF2 intact.

Of ze hun bytes waard zijn, is een andere vraag. Schermen met hoge pixeldichtheid hebben genoeg pixels om de correctie onzichtbaar te maken, en macOS negeert hinting volledig. Op een zwaar gehinte lettertype kunnen de instructies een merkbaar deel van het bestand zijn, en een subsetter kan opdracht krijgen ze te laten vallen.

Dit paar draait op onze server in plaats van in je browser, omdat het werk door fontTools wordt gedaan en daar geen browserversie van bestaat. Het bestand reist over een versleutelde verbinding, wordt in een geïsoleerde omgeving omgezet, en de werkmap wordt verwijderd zodra de taak klaar is.

De gratis limiet is 25 MB per bestand. Geen alledaags lettertype komt in de buurt — een volwaardige TTF met een grote tekenset is enkele honderden kilobytes, en een CJK-lettertype, de categorie die echt groot wordt, past er nog ruim binnen.