UltKit

Konvertera TTF till WOFF2

Här börjar du när du vill självhosta ett typsnitt: WOFF2 är formatet som alla aktuella webbläsare hämtar först, och det är det minsta paketet för de TrueType-data du redan har. Sidan skriver också CSS-regeln som laddar typsnittet.

Teckensnittskonverterare

eller släpp TTF, OTF, WOFF …-filer här ·

Max 95 MB per fil· Upp till 20 filer· Raderas efter 30 minuter

Utdata

Filerna bearbetas på våra servrar och raderas efter 30 minuter.

Så använder du verktyget

  1. 1

    Ladda upp TTF-filerna

    Lägg till alla tjocklekar och stilar du tänker använda, upp till 20 filer på högst 95 MB vardera. Variabla TTF-filer fungerar också och behåller sina axlar.

  2. 2

    Behåll CSS påslaget och skapa en delmängd om du kan

    Inkludera @font-face-CSS är redan ikryssat. Under Avancerade inställningar ställer du in Behåll tecken på Basic Latin eller Latin + accenter om din webbplats är på ett västerländskt språk, och överväg att sätta Hinting till Ta bort.

  3. 3

    Konvertera till WOFF2

    Klicka på Konvertera till WOFF2 och ladda ner typsnitten tillsammans med .css-filen. Ladda upp båda till din webbplats och länka stilmallen, eller klistra in regeln i din egen.

Svar

Hur konverterar jag TTF till WOFF2 för min webbplats?

Ladda upp .ttf-filen, låt Inkludera @font-face-CSS vara ikryssat och klicka på Konvertera till WOFF2. Du får .woff2-filen och en .css-fil med en @font-face-regel som pekar på den.

Därför är WOFF2 rätt format för webbtypsnitt

En TTF består av okomprimerade tabelldata: konturer, mått, kerning och namn. WOFF2, som publicerades som W3C-rekommendation 2018, behåller exakt dessa tabeller men skickar dem genom Brotli, komprimeringsalgoritmen som Google släppte 2015, efter att först ha omorganiserat glyfkonturerna så att de komprimeras bättre. Googles egna tester visade att WOFF2 i genomsnitt är ungefär 30 % mindre än det äldre WOFF-formatet, och webbläsaren återskapar de ursprungliga typsnittsdata efter nedladdningen, så bokstävernas former ändras inte alls.

Typsnitt blockerar rendering, vilket gör att storleken spelar större roll än kilobyten antyder. Tills ett webbtypsnitt har laddats döljer webbläsaren texten eller visar ett reservtypsnitt, och ett sent byte kan förskjuta layouten. Mindre filer förkortar den tiden, och två alternativ här gör den ännu kortare: Behåll tecken tar bort glyfer som dina sidor aldrig visar, och Hinting inställt på Ta bort tar bort instruktioner som mobiler och skärmar med hög pixeltäthet ändå ignorerar. Behåll TTF-originalen för skrivbordsbruk. WOFF2 till TTF kan packa upp ett webbtypsnitt senare, men kan inte återskapa glyfer som en delmängd har tagit bort.

Filstorlek: TTF jämfört med WOFF2

TTF, fullständig teckenuppsättning

100%

Okomprimerade typsnittstabeller, som när de installeras på en dator

Typiskt för ett textypsnitt med flera skriftsystem

WOFF2, delmängd med Basic Latin

ofta 10–25 %

Brotli-komprimering plus färre glyfer; varierar med typsnittet

@font-face-regeln för ett WOFF2-typsnitt

Exempelregel; byt ut namnen och ta bort unicode-range om du inte gjorde någon delmängd
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Webbläsarstöd för WOFF2, version för version

  1. 2014

    Chrome 36

    Googles webbläsare är först med att avkoda WOFF2 som standard.

  2. 2015

    Firefox 39

    Mozilla aktiverar WOFF2-avkodning som standard.

  3. 2016

    Edge 14

    Microsofts ursprungliga Edge får WOFF2 med Windows 10 Anniversary Update.

  4. 2018

    W3C-rekommendation

    Specifikationen är slutförd. Då avkodar även Safari på macOS och iOS WOFF2.

TTF

TrueType-typsnitt

TTF är typsnittsformatet TrueType, som utvecklades av Apple i slutet av 1980-talet, släpptes 1991 och licensierades till Microsoft. Det beskriver teckenkonturer med kvadratiska kurvor och innehåller hinting-instruktioner som gör att text ser skarp ut på skärmen. TrueType stöds av alla skrivbordsoperativsystem, ordbehandlare och designprogram. Det saknar vissa avancerade typografiska funktioner i OpenType och är större än webbtypsnittsformaten.

Komprimering
Förlustfri
Transparens
–
Animation
–
Introducerades
1991 · Apple
TTF-omvandlare

WOFF2

Web Open Font Format 2

WOFF2 är den andra versionen av Web Open Font Format, bygger på Googles Brotli-komprimering och publicerades som W3C-rekommendation 2018. Filerna är cirka 30 % mindre än WOFF, vilket gör att sidor laddas snabbare. Alla moderna webbläsare stöder WOFF2, och det är det rekommenderade formatet för webbtypsnitt. Skrivbordsoperativsystem och designprogram kan inte installera det direkt.

Komprimering
Förlustfri
Transparens
–
Animation
–
Introducerades
2018 · W3C (Google)
WOFF2-omvandlare

TTF till WOFF2 paketerar ett skrivbordstypsnitt i den Brotli-komprimerade behållare som webbläsare föredrar, så att samma glyfer når besökarna med färre byte. Sidan åt andra hållet finns för dig som behöver installera ett typsnitt du hittat på webben.

Vanliga frågor om TTF till WOFF2

Behöver jag fortfarande en TTF- eller WOFF-reserv bredvid WOFF2?

För publika webbplatser idag behövs det oftast inte. Chrome, Edge, Firefox och Safari har läst WOFF2 i många år, och de få webbläsare som inte gör det, som Internet Explorer 11, är sällan värda en extra fil. Lägg bara till TTF till WOFF som en andra src-post om din statistik visar att du har sådana besökare.

Varför är mitt WOFF2-typsnitt fortfarande över 100 KB?

Komprimeringen minskar bara hur glyferna lagras, inte hur många de är. Ett typsnitt som täcker latinska, kyrilliska, grekiska och vietnamesiska tecken levererar alla. Det är genom att göra en delmängd av de skrift­system du faktiskt visar som ett textypsnitt hamnar på några tiotals kilobyte.

Vad gör font-display: swap?

Den gör att webbläsaren direkt visar texten i ett reservtypsnitt och byter till ditt webbtypsnitt när det har laddats, i stället för att dölja texten under nedladdningen. Lägg till den i din @font-face-regel som i exemplet ovan, eller använd optional om du hellre slipper ett sent byte på långsamma anslutningar.

Kan jag konvertera en TTF från Google Fonts till WOFF2 och hosta den själv?

Ja. Typsnitt från Google Fonts släpps under SIL Open Font License eller Apache License, och båda tillåter konvertering och egen hosting. Om du hostar filen själv slipper du dessutom en förfrågan till en extern server.

Fungerar WOFF2 i nyhetsbrev via e-post?

Bara i vissa klienter. Apple Mail och iOS Mail laddar webbtypsnitt via @font-face, medan Gmail och de flesta versioner av Outlook ignorerar dem och visar ditt reservtypsnitt. Ange alltid ett säkert systemtypsnitt i typsnittslistan i ett e-postmeddelande.