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
Filerna bearbetas på våra servrar och raderas efter 30 minuter.
Genom att ta bort skriftsystem du inte använder kan ett webbtypsnitt krympa från hundratals KB till under 30 KB. Behåll alla tecken för typsnitt som du installerar på en dator.
Klistra in texten eller tecknen som typsnittet måste täcka, t.ex. ett logotypord eller en rubrik. Allt annat tas bort.
Hinting gör liten text skarpare på Windows-skärmar. Att ta bort den sparar ofta 10–30 % på webbtypsnitt; auto-hint lägger till den i typsnitt som saknar den.
Lämna tomt för att behålla originalet. Genom att byta namn kan du installera det konverterade typsnittet bredvid originalet utan konflikt.
T.ex. Regular, Bold, Italic. Lämna tomt för att behålla originalets stilnamn.
Så använder du verktyget
- 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
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
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.
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
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
@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
2014
Chrome 36
Googles webbläsare är först med att avkoda WOFF2 som standard.
2015
Firefox 39
Mozilla aktiverar WOFF2-avkodning som standard.
2016
Edge 14
Microsofts ursprungliga Edge får WOFF2 med Windows 10 Anniversary Update.
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
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)
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 skriftsystem 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.