Skapa typsnittssubset

Så skapar du ett typsnittssubset

1. Kontrollera licensen. Ett subset är en ändrad kopia av typsnittet. Öppna licenser som SIL Open Font License (OFL) och Apache 2.0 tillåter det; många kommersiella licenser för dator och webb gör det inte, eller bara under vissa villkor. Läs typsnittets licens först.
2. Släpp en TTF-, OTF- eller WOFF-fil i släppytan, eller klicka på den för att välja en. Panelen Ursprungligt typsnitt visar familj, format, filstorlek, antal glyfer och antal tecken som typsnittet innehåller.
3. Välj Tecken att behålla: Grundläggande latin, Latin-1, Latin, som i Google Fonts, Franska och Siffror och taltecken kan kombineras. Lägg till egna tecken i Tecken från en text (varje unikt tecken i texten behålls) eller i Unicode-intervall, skrivna som i CSS: U+0020-007E, U+2013, U+04??.
4. Kryssa i Ta bort hinting om du vill ha minsta möjliga fil.
5. Klicka på Skapa subset. Motorn (cirka 650 kB) läses in första gången, och sedan bearbetas typsnittet på din enhet.
6. Jämför storlekarna under Resultat, titta på Förhandsvisning av subsetet, använd sedan Ladda ner TTF (eller OTF) och Ladda ner WOFF, och kopiera regeln under CSS @font-face.

Typsnittsfilen lämnar aldrig din dator: den läses, beskärs och paketeras om i webbläsaren.

Vilket urval passar svensk text?

Det finns ingen färdig förinställning för svenska, men du behöver ingen: Latin-1 innehåller å, ä, ö, Å, Ä och Ö (och é, ü för lånord), så den räcker för vanlig svensk text. Välj Latin, som i Google Fonts om du också använder typografiska citattecken ” ’, tankstreck – och eurotecknet; de finns i intervallet U+2000–206F och i €. Förinställningen Franska är avsedd för franska sidor. För en logotyp eller en rubrik klistrar du helt enkelt in texten i Tecken från en text.

Vad ett subset gör

Ett typsnitt innehåller ofta hundratals eller tusentals glyfer: kyrilliska, grekiska, vietnamesiska, symboler, alternativa former. En sida på svenska använder bara en bråkdel av dem. Verktyget kör hb-subset, subsetfunktionen i textmotorn HarfBuzz (samma kod som Google Fonts och många byggverktyg använder), kompilerad till WebAssembly. Det behåller glyferna för de tecken du har valt, plus de glyfer som OpenType-funktioner behöver för att visa dem (ligaturer som ”fi”, kapitäler och accentformer när de kan nås från dina tecken), och tar bort resten. Kerning och andra layouttabeller beskärs i motsvarande grad.

Typiska resultat: ett komplett typsnitt med latin, kyrilliska och grekiska på 300 kB kan krympa till 20 eller 30 kB för text på ett västeuropeiskt språk, och ett logotypsnitt som bara behåller bokstäverna i ett enda ord väger ofta några få kilobyte.

Raden Finns inte i typsnittet listar tecken du har begärt som typsnittet saknar. Webbläsare ritar dem med ett reservtypsnitt.

Utdataformat och unicode-range

• TTF/OTF: subsetet behåller originalets konturtyp (TrueType eller CFF).
• WOFF: samma typsnitt med varje tabell komprimerad med zlib. Alla aktuella webbläsare kan läsa det. En WOFF-fil packas först upp.
• WOFF2 är inte tillgängligt: dess Brotli-komprimering och tabelltransformationer saknar kodare i webbläsaren, och WOFF2-filer kan inte heller läsas här. Konvertera WOFF2 till TTF först (till exempel med fontTools). Din server kan också komprimera TTF/OTF med gzip eller Brotli i farten.

Regeln under CSS @font-face listar WOFF-filen först, sätter font-display: swap och lägger till ett unicode-range byggt på de tecken som faktiskt finns i subsetet. Med unicode-range laddar webbläsaren bara ner filen när sidan använder något av de tecknen, så du kan dela upp en familj i flera filer (till exempel latin och kyrilliska) och låta varje besökare läsa in bara det som behövs. Ändra Namn för font-family så att det stämmer med namnet i din stilmall.