TTF naar WOFF2 converteren
Een lettertype zelf hosten begint hier: WOFF2 is het formaat dat elke actuele browser als eerste downloadt, en het is de kleinste verpakking voor de TrueType-gegevens die u al hebt. Deze pagina schrijft ook de CSS-regel die het lettertype laadt.
Lettertypeconverter
of sleep TTF, OTF, WOFF …-bestanden hierheen ·
Max. 95 MB per bestand· Tot 20 bestanden· Verwijderd na 30 minuten
Bestanden worden op onze servers verwerkt en na 30 minuten verwijderd.
Door schriften te verwijderen die u niet gebruikt, kan een webfont van honderden KB krimpen tot minder dan 30 KB. Behoud alle tekens voor lettertypen die u op een computer installeert.
Plak de tekst of tekens die het lettertype moet dekken, bijv. een logowoord of een kop. Al het andere wordt verwijderd.
Hints maken kleine tekst scherper op Windows-schermen. Ze verwijderen bespaart bij webfonts vaak 10–30%; auto-hint voegt ze toe aan lettertypen die er geen hebben.
Laat leeg om het origineel te behouden. Door te hernoemen kunt u het geconverteerde lettertype naast het origineel installeren zonder conflict.
Bijv. Regular, Bold, Italic. Laat leeg om de oorspronkelijke stijlnaam te behouden.
Zo gebruikt u deze tool
- 1
Upload de TTF-bestanden
Voeg elk gewicht en elke stijl toe die u wilt gebruiken, tot 20 bestanden van maximaal 95 MB per stuk. Variabele TTF's werken ook en behouden hun assen.
- 2
Laat CSS aan staan en maak zo mogelijk een subset
@font-face-CSS meeleveren staat al aangevinkt. Zet onder Geavanceerde instellingen de optie Tekens behouden op Basic Latin of Latin + accenten als uw site in een westerse taal is, en overweeg Hinting op Verwijderen te zetten.
- 3
Converteren naar WOFF2
Klik op Converteren naar WOFF2 en download de fonts samen met het .css-bestand. Upload beide naar uw site en koppel het stylesheet, of plak de regel in uw eigen stylesheet.
Hoe converteer ik TTF naar WOFF2 voor mijn website?
Upload de .ttf, laat @font-face-CSS meeleveren aangevinkt en klik op Converteren naar WOFF2. U krijgt het .woff2-bestand plus een .css-bestand met een @font-face-regel die ernaar verwijst.
Waarom WOFF2 het webfontformaat is om te gebruiken
Een TTF bestaat uit ongecomprimeerde tabeldata: contouren, metrieken, kerning, namen. WOFF2, in 2018 gepubliceerd als W3C Recommendation, behoudt precies die tabellen maar haalt ze door Brotli, het compressie-algoritme dat Google in 2015 uitbracht, nadat de glyphcontouren eerst zijn herordend zodat ze beter comprimeren. Uit tests van Google zelf bleek WOFF2 gemiddeld ongeveer 30% kleiner dan het oudere WOFF, en de browser herstelt na het downloaden de originele fontdata, dus aan de lettervormen verandert niets.
Fonts blokkeren het renderen, waardoor hun grootte zwaarder weegt dan de kilobytes doen vermoeden. Zolang een webfont niet binnen is, verbergt de browser de tekst of toont een reservefont, en een late wissel kan de opmaak laten verspringen. Kleinere bestanden verkorten dat moment, en twee opties hier doen dat nog meer: Tekens behouden verwijdert glyphs die uw pagina's nooit tonen, en Hinting op Verwijderen schrapt instructies die telefoons en schermen met hoge dichtheid toch negeren. Bewaar de TTF-bronbestanden voor desktopgebruik; WOFF2 naar TTF kan een webfont later uitpakken, maar kan glyphs die een subset heeft verwijderd niet terugbrengen.
Bestandsgrootte van TTF en WOFF2 vergeleken
TTF, volledige tekenset
100%
Ongecomprimeerde fonttabellen, zoals geïnstalleerd op een desktop
WOFF2, subset Basic Latin
vaak 10–25%
Brotli-compressie plus minder glyphs; verschilt per font
De @font-face-regel voor een WOFF2-lettertype
@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;
}Browserondersteuning voor WOFF2 per versie
2014
Chrome 36
De browser van Google is de eerste die WOFF2 standaard decodeert.
2015
Firefox 39
Mozilla schakelt WOFF2-decodering standaard in.
2016
Edge 14
De oorspronkelijke Edge van Microsoft voegt WOFF2 toe met de Windows 10 Anniversary Update.
2018
W3C Recommendation
De specificatie is definitief; tegen die tijd decodeert ook Safari op macOS en iOS WOFF2.
TTF
TrueType-lettertype
TTF is het TrueType-lettertypeformaat dat Apple eind jaren tachtig ontwikkelde en in 1991 uitbracht, en daarna in licentie gaf aan Microsoft. Het beschrijft glyphcontouren met kwadratische krommen en bevat hinting-instructies die tekst scherp laten ogen op schermen. TrueType wordt ondersteund door elk desktopbesturingssysteem, tekstverwerker en ontwerpprogramma. Het mist enkele geavanceerde typografische functies van OpenType en is groter dan weblettertypeformaten.
- Compressie
- Zonder verlies
- Transparantie
- –
- Animatie
- –
- Geïntroduceerd
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 is de tweede versie van het Web Open Font Format, gebaseerd op Googles Brotli-compressie en in 2018 gepubliceerd als W3C-aanbeveling. Bestanden zijn ongeveer 30% kleiner dan WOFF, wat pagina's sneller laat laden. Elke moderne browser ondersteunt WOFF2 en het is het aanbevolen formaat voor weblettertypen. Desktopbesturingssystemen en ontwerpprogramma's kunnen het niet rechtstreeks installeren.
- Compressie
- Zonder verlies
- Transparantie
- –
- Animatie
- –
- Geïntroduceerd
- 2018 · W3C (Google)
TTF naar WOFF2 verpakt een desktopfont in de met Brotli gecomprimeerde container die browsers verkiezen, zodat dezelfde glyphs bezoekers in minder bytes bereiken; de omgekeerde pagina is er voor wie een font van het web wil installeren.
Veelgestelde vragen over TTF naar WOFF2
Heb ik naast WOFF2 nog een TTF- of WOFF-fallback nodig?
Voor openbare websites tegenwoordig meestal niet. Chrome, Edge, Firefox en Safari lezen al jaren WOFF2, en de weinige browsers die dat niet doen, zoals Internet Explorer 11, zijn zelden een extra bestand waard. Voeg TTF naar WOFF-uitvoer alleen als tweede src-regel toe als uw statistieken zulke bezoekers laten zien.
Waarom is mijn WOFF2-lettertype nog steeds groter dan 100 KB?
Compressie verkleint alleen hoe de glyphs worden opgeslagen, niet hoeveel het er zijn. Een font met Latijn, Cyrillisch, Grieks en Vietnamees levert ze allemaal mee. Subsetten naar de schriften die u echt toont, brengt een tekstfont terug tot enkele tientallen kilobytes.
Wat doet font-display: swap?
Het zegt de browser om de tekst meteen in een reservefont te tonen en over te schakelen zodra uw webfont binnen is, in plaats van de tekst te verbergen tijdens het downloaden. Voeg het toe aan uw @font-face-regel zoals in het voorbeeld hierboven, of gebruik optional als u liever geen late wissel op trage verbindingen wilt.
Kan ik een TTF van Google Fonts naar WOFF2 converteren en zelf hosten?
Ja. Google Fonts-families verschijnen onder de SIL Open Font License of de Apache License, die beide conversie en zelf hosten toestaan. Als u het bestand zelf host, scheelt dat bovendien een verzoek aan een externe server.
Werkt WOFF2 in e-mailnieuwsbrieven?
Alleen in sommige apps. Apple Mail en iOS Mail laden webfonts via @font-face, terwijl Gmail en de meeste Outlook-versies ze negeren en uw reservefont tonen. Vermeld in een e-mail altijd een veilig systeemfont in de fontstack.