WOFF naar WOFF2 omzetten

Een bestand met deze extensie komt zelden alleen voor. Het staat in een fonts-map naast een .eot, een .svg, een .ttf en soms een tweede .woff voor de cursief, met een stylesheet ernaast met een src-lijst van vijf items en een commentaar over Internet Explorer. Die map is gegenereerd door een webfont-tool op een moment dat vier containers serveren de enige manier was om elke browser te bereiken.

Niets daarvan klopt nog, en het nuttige kader voor deze omzetting is niet «maak dit bestand kleiner» maar «breng deze map terug tot één bestand per gewicht». Het omwikkelen is het makkelijke deel. De regel eromheen, de tekenset waarmee de kit gebouwd is, en of je gelicentieerd bent hiervoor zijn de moeite van vijf minuten waard.

Beide containers bevatten dezelfde sfnt-tabellen die een TTF of OTF bevat: de glyph-omtrekken, de tekentabel, de horizontale metrics, de kerning en de OpenType-functiedefinities. WOFF wikkelt ze in en deflate’t elk met zlib. WOFF2 transformeert de tabellen eerst naar een vorm die beter comprimeert en past dan Brotli toe.

Twee compressoren en een extra voorbewerkingsstap zijn waar het verschil vandaan komt, en voor een gewoon tekstlettertype komt dat neer op ongeveer dertig procent. Het lettertype zelf is onaangeroerd: identieke omtrekken, identieke spatiëring, identieke functies.

Het is verleidelijk om principieel naar het desktoporigineel te grijpen, en hier maakt het niets uit. WOFF is een lossless container, dus uitpakken geeft precies de tabellen terug die erin gingen, en die opnieuw inpakken als WOFF2 levert hetzelfde resultaat op als vanaf de TTF in dezelfde map.

Dat is de moeite van zeggen waard, want het advies is omgekeerd voor andere omzettingen in deze familie. Van een WOFF naar een installeerbare TTF of OTF telt herkomst wel degelijk. Naar WOFF2 blijf je hoe dan ook binnen dezelfde tekenset, dus gebruik welk bestand je ook hebt.

Een gegenereerde regel uit die tijd noemt vijf bronnen: EOT met een query-string-truc, WOFF2 als het al gegenereerd was, WOFF, TTF, en SVG met een fragment-id. Twee daarvan zijn voor browsers die niemand meer ondersteunt.

Het register noteert dat WOFF2 elke huidige browser bereikt, wat de vermindering veilig maakt: één regel src: url("merk.woff2") format("woff2") is de moderne regel. Kijk naar je eigen analytics voordat je de WOFF-invoer verwijdert — een bedrijfsintranet is het geval dat dit breekt.

Dit is het deel van de pagina waar niemand voor komt en het deel dat het meest kan uitmaken. Commerciële webfontlicenties verbieden regelmatig het wijzigen, omzetten of herencoderen van de geleverde bestanden, en een omzetting is precies dat, ook als er niets aan het lettertype zelf verandert.

Een lettertype dat met een geërfd project meekwam, heeft ergens een licentie — in de aankoopgegevens, de merkoverdracht, de repositorygeschiedenis. Zoek die eerst op. Open licenties zijn het makkelijke geval; de SIL Open Font License staat omzetten, subsetten en herverspreiden toe.

Vrijwel alle gewichtsbesparing in een webfont komt van glyphs weglaten, dus kits werden routinematig teruggebracht tot basis-Latijn en wat leestekens. Dat was toen redelijk en is waar de gaten in een moderne pagina vandaan komen: een euroteken, een echt kastlijntje, krultekens, een naam met ł of ș.

Opnieuw omwikkelen herstelt daar niets van. Toont de site een leeg vak of een duidelijk mismatchend fallback-teken, dan zat het teken nooit in het bestand, en is de oplossing opnieuw snijden vanaf het desktoporigineel.

Een kit uit die tijd heeft één bestand per gewicht en stijl: regular, cursief, medium, semibold, bold, bold-cursief. Zes downloads, zes @font-face-blokken, en een vaste set gewichten waar een ontwerper ooit tussenin wil zitten.

Is het lettertype sindsdien als variabel lettertype uitgebracht, dan kan één WOFF2 alles vervangen met een continue gewichtsas, meestal kleiner dan de statische set die het vervangt. Controleer of de foundry een variabele snit levert voor je een middag besteedt aan zes statische bestanden opnieuw omwikkelen.

Elk lettertype draagt een naamtabel, en kitgeneratoren herschreven die vrijelijk — een bestand waarvan het lettertype heel specifiek heet, staat er vaak binnenin als merksans-webfont. Omdat de @font-face-regel elke gewenste familienaam declareert, blijft de mismatch vaak jarenlang onopgemerkt.

Het houdt op onschadelijk te zijn in twee situaties: als de interne naam botst met een op de bezoekersmachine geïnstalleerd lettertype, en als twee op verschillende momenten gemaakte bestanden dezelfde familienaam claimen.

Drie dingen zijn de moeite van tegelijk instellen waard. Een lange cachelevensduur met een gehashte bestandsnaam, want een lettertype verandert nooit op zijn plek. Een preload-link voor het gezicht boven de vouw. En unicode-range als je losse subsets hebt.

Lettertypen zijn ook een van de weinige assettypen waar compressie op de server averechts werkt: WOFF2 is al intern Brotli-gecomprimeerd, en het nogmaals gzippen voegt werk toe zonder besparing.

Deze omzetting draait op onze server, niet in je browser, want fontTools heeft geen browserbuild. Het bestand reist over een versleutelde verbinding, wordt in een geïsoleerde omgeving omgezet, en de werkmap wordt verwijderd zodra de taak eindigt.

Het gratis niveau staat 25 MB per bestand toe, ruim meer dan elk webfont, en een batch komt terug als één ZIP. Een batch is meestal wat deze klus werkelijk is — de kit heeft zes bestanden en de regel wordt eenmalig herschreven.