Font subsetter

Zo subset je een lettertype

1. Controleer de licentie. Subsetten maakt een gewijzigde kopie van het lettertype. Open licenties zoals de SIL Open Font License (OFL) en Apache 2.0 staan dat toe; veel commerciële desktop- en weblicenties niet, of alleen onder voorwaarden. Lees eerst de licentie van je lettertype.
2. Sleep een TTF-, OTF- of WOFF-bestand naar het neerzetvlak, of klik erop om er een te kiezen. Het paneel Oorspronkelijk lettertype toont de familie, het formaat, de bestandsgrootte, het aantal glyphs en het aantal tekens dat het lettertype bevat.
3. Kies de Te behouden tekens: Basis-Latijn, Latin-1, Latijn, zoals bij Google Fonts, Frans en Cijfers en getaltekens kun je combineren. Voeg eigen tekens toe in Tekens uit een tekst (elk afzonderlijk teken van de tekst blijft behouden) of in Unicode-bereiken, geschreven zoals in CSS: U+0020-007E, U+2013, U+04??.
4. Vink Hinting verwijderen aan als je het kleinst mogelijke bestand wilt.
5. Klik op Lettertype subsetten. De engine (ongeveer 650 kB) wordt de eerste keer geladen, daarna wordt het lettertype op je apparaat verwerkt.
6. Vergelijk de groottes bij Resultaat, bekijk het Voorbeeld van de subset, gebruik dan TTF downloaden (of OTF) en WOFF downloaden, en kopieer de regel CSS @font-face.

Het lettertypebestand verlaat je computer nooit: het wordt in de browser gelezen, gesubset en opnieuw verpakt.

Welke tekenset voor Nederlands?

Er is geen aparte voorinstelling voor Nederlands, maar alle Nederlandse letters met accenten (é, ë, ï, ó, è…) zitten in Latin-1. Het euroteken (€) en typografische aanhalingstekens (“ ” ‘ ’) zitten daar niet in: kies dan Latijn, zoals bij Google Fonts, of plak je echte tekst in Tekens uit een tekst. De “ij” wordt in gewone tekst als twee letters geschreven en heeft dus geen extra teken nodig.

Wat subsetten doet

Een lettertype bevat vaak honderden of duizenden glyphs: Cyrillisch, Grieks, Vietnamees, symbolen, alternatieve vormen. Een pagina in het Nederlands gebruikt daar maar een fractie van. Deze tool draait hb-subset, de subsetter van de tekstengine HarfBuzz (dezelfde code die Google Fonts en veel buildtools gebruiken), gecompileerd naar WebAssembly. Hij behoudt de glyphs voor de tekens die je hebt gekozen, plus de glyphs die OpenType-functies nodig hebben om ze weer te geven (ligaturen zoals “fi”, kleinkapitalen en vormen met accenten als die vanuit je tekens bereikbaar zijn), en verwijdert de rest. Kerning en andere opmaaktabellen worden daarop afgestemd.

Typische resultaten: een volledig lettertype met Latijn, Cyrillisch en Grieks van 300 kB kan voor Franse of Nederlandse tekst dalen tot 20 à 30 kB, en een logolettertype dat tot de letters van één woord is teruggebracht, weegt vaak maar een paar kilobyte.

De regel Niet in het lettertype somt tekens op die je hebt gevraagd maar die het lettertype niet heeft. Browsers tekenen die met een vervangend lettertype.

Uitvoerformaten en unicode-range

• TTF/OTF: de subset behoudt het type contouren van het origineel (TrueType of CFF).
• WOFF: hetzelfde lettertype, met elke tabel gecomprimeerd met zlib. Elke actuele browser kan het lezen. Een WOFF-invoer wordt eerst uitgepakt.
• WOFF2 is niet beschikbaar: voor de Brotli-compressie en tabeltransformaties bestaat geen encoder in de browser, en WOFF2-bestanden kunnen hier ook niet gelezen worden. Zet WOFF2 eerst om naar TTF (bijvoorbeeld met fontTools). Je server kan de TTF/OTF ook direct met gzip of Brotli comprimeren.

De regel CSS @font-face zet het WOFF-bestand bovenaan, stelt font-display: swap in en voegt een unicode-range toe die is opgebouwd uit de tekens die echt in de subset zitten. Met unicode-range downloadt de browser het bestand pas als de pagina een van die tekens gebruikt. Zo kun je een familie in meerdere bestanden splitsen (bijvoorbeeld Latijn en Cyrillisch) en laadt elke bezoeker alleen wat hij nodig heeft. Pas de Naam font-family aan zodat die overeenkomt met de naam in je stylesheet.