Als u TTF-lettertypen op uw website serveert, stuurt u ongeveer 30% meer gegevens dan nodig. WOFF2 levert hetzelfde lettertype in een veel kleinere bestand, en iedere moderne browser ondersteunt het. Hier is hoe u kunt converteren — en waarom het belangrijk is voor de prestaties van uw site.
Waarom WOFF2?
WOFF2 (Web Open Font Format 2.0) gebruikt Brotli-compressie om lettertypen te verkleinen met ongeveer 30% ten opzichte van TTF, zonder kwaliteitsverlies. De letterglyphs, hinting, kerning en alle typografische functies worden identiek bewaard. Wanneer een browser een WOFF2-bestand laadt, decomprimeert hij het naar dezelfde gegevens als het oorspronkelijke TTF.
Het prestatie-effect is echt. Lettertypen zijn render-blokkerende bronnen — de browser tekent tekst pas als lettertypen zijn geladen. Een 120KB TTF die wordt omgezet naar 84KB WOFF2 betekent dat tekst sneller verschijnt, vooral op mobiele verbindingen. Google's Core Web Vitals meten dit rechtstreeks: kleinere lettertypen verbeteren Largest Contentful Paint (LCP) en verminderen Cumulative Layout Shift (CLS) door lettertypewissels.
Browserondersteuning is universeel. Chrome, Firefox, Safari en Edge ondersteunen allemaal WOFF2. De enige browsers die dit niet doen zijn Internet Explorer en zeer oude Android-browsers — beide onder de 1% van de wereldwijde verkeer.
Hoe omzetten
WOFF2 gebruiken in CSS
Once you have your WOFF2 file, reference it in your stylesheet. List WOFF2 first with a TTF fallback for maximum compatibility:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}De font-display: swap-richtlijn vertelt de browser om onmiddellijk fallback-tekst weer te geven en de aangepaste lettertype te vervangen zodra het geladen is, waardoor onzichtbare tekst tijdens het laden van het lettertype wordt voorkomen.
Fontlicentiecompliance
Veel commerciële lettertype-licenties bevatten clausules die het uploaden van lettertypebestanden naar derde-partij webdiensten beperken. Dit creëert een probleem: u moet converteren naar WOFF2 voor prestaties, maar de meeste conversie tools vereisen het uploaden van het lettertype naar een server.
Of course, always check the specific terms of your font license. But the local-only nature of Morph's conversion eliminates the most common compliance concern.
Andere lettertypeconversies
Morph ondersteunt ook OTF naar WOFF2, WOFF naar WOFF2, TTF naar OTF en elke andere combinatie van TTF, OTF, WOFF en WOFF2. Heeft u gratis lettertypen nodig om te beginnen? Blader door 1.500+ gratis lettertypen in de Morph-lettertypebibliotheek.