Font-subsetter – lag mindre webfonter

Slik lager du et delsett av en font

1. Sjekk lisensen. Et delsett er en endret kopi av fonten. Åpne lisenser som SIL Open Font License (OFL) og Apache 2.0 tillater det. Mange kommersielle lisenser for skrivebord og nett gjør det ikke, eller bare på visse vilkår. Les lisensen til fonten din først.
2. Slipp en TTF-, OTF- eller WOFF-fil i slippsonen, eller klikk på den for å velge en. Panelet Opprinnelig font viser Familie, Format, Filstørrelse, antall Glyfer og antall Tegn fonten dekker.
3. Velg Tegn som skal beholdes: Grunnleggende latin, Latin-1, Latin, som i Google Fonts, Fransk og Sifre og tallsymboler kan kombineres. Legg til egne tegn i Tegn fra en tekst (hvert enkelt tegn i teksten beholdes) eller i Unicode-områder, skrevet som i CSS: U+0020-007E, U+2013, U+04??.
4. Huk av for Fjern hinting hvis du vil ha den minst mulige filen.
5. Klikk på Lag delsett av font. Motoren (omtrent 650 KB) lastes første gang, deretter behandles fonten på enheten din.
6. Sammenlign størrelsene under Resultat, se på Forhåndsvisning av delsettet, bruk deretter Last ned TTF (eller OTF) og Last ned WOFF, og kopier regelen CSS @font-face.

Fontfilen forlater aldri datamaskinen din: den leses, får delsett og pakkes på nytt i nettleseren. Ingenting du skriver inn, sendes til en server.

Husk æ, ø og å

Forhåndsvalget på norske sider er forhåndsinnstillingen Fransk, og den inneholder ikke æ, ø og å (og ikke Æ, Ø og Å). For norsk tekst huker du av for Latin-1 eller Latin, som i Google Fonts, som begge har med de norske bokstavene, og fjerner haken ved Fransk hvis du vil. Sjekk Forhåndsvisning av delsettet med en norsk setning, og se på linjen Finnes ikke i fonten for å se om fonten selv mangler tegn.

Hva et delsett gjør

En font inneholder ofte hundrevis eller tusenvis av glyfer: kyrillisk, gresk, vietnamesisk, symboler, alternative former. En side på norsk bruker bare en brøkdel av dem. Dette verktøyet kjører hb-subset, delsettverktøyet i tekstmotoren HarfBuzz (den samme koden som Google Fonts og mange byggeverktøy bruker), kompilert til WebAssembly. Det beholder glyfene til tegnene du har valgt, pluss glyfene OpenType-funksjoner trenger for å vise dem (ligaturer som «fi», kapitéler og aksentformer når de kan nås fra tegnene dine), og fjerner resten. Kerning og andre layouttabeller kuttes ned tilsvarende.

Typiske resultater: en full font med latin, kyrillisk og gresk på 300 KB kan gå ned til 20 eller 30 KB for norsk tekst, og en logofont med delsett av bokstavene i ett enkelt ord veier ofte bare noen få kilobyte.

Linjen Finnes ikke i fonten lister tegn du ba om som fonten ikke har. Nettleserne tegner dem da med en reservefont.

Utdataformater og unicode-range

• TTF/OTF: delsettet beholder konturtypen til originalen (TrueType eller CFF).
• WOFF: den samme fonten med hver tabell komprimert med zlib. Alle moderne nettlesere leser den. En WOFF-fil som inndata dekomprimeres først.
• WOFF2 er ikke tilgjengelig: Brotli-komprimeringen og tabelltransformasjonene har ingen koder i nettleseren, og WOFF2-filer kan heller ikke leses her. Konverter WOFF2 til TTF først (for eksempel med fontTools). Serveren din kan også komprimere TTF/OTF med gzip eller Brotli underveis.

Regelen CSS @font-face lister WOFF-filen først, setter font-display: swap og legger til en unicode-range bygget av tegnene som faktisk finnes i delsettet. Med unicode-range laster nettleseren bare ned filen når siden bruker ett av disse tegnene, slik at du kan dele en familie i flere filer (for eksempel latin og kyrillisk) og la hver besøkende laste bare det vedkommende trenger. Rediger Navn på font-family slik at det passer med navnet i stilarket ditt.