Webfont

Wat is een webfont?

Een webfont is een lettertype dat speciaal is voorbereid voor gebruik op het web. In tegenstelling tot systeemlettertypen, die alleen beschikbaar zijn als ze op het apparaat van de gebruiker zijn geinstalleerd, wordt een webfont rechtstreeks geladen via een externe server of een contentlevering-netwerk. Hierdoor ziet iedere bezoeker de website precies zoals de ontwerper dat heeft bedoeld, ongeacht het apparaat, het besturingssysteem of de browser.

Webfonts zijn beschikbaar in verschillende bestandsformaten, zoals WOFF2, WOFF en TTF. Het moderne WOFF2-formaat biedt de beste compressie en wordt door vrijwel alle actuele browsers ondersteund. De keuze van het juiste formaat bepaalt mede hoe snel een lettertype laadt en hoe goed het rendeert op schermen van verschillende kwaliteit.

Hoe werkt een webfont?

Een webfont wordt via CSS in een website geintegreerd met behulp van de @font-face regel. Daarin wordt aangegeven waar het lettertypebestand te vinden is en onder welke naam het in de stijlregels gebruikt mag worden. De browser laadt het bestand bij het openen van de pagina en past het vervolgens toe op alle tekstelementen die in de CSS aan dit lettertype zijn gekoppeld.

Er zijn twee veelgebruikte methoden om webfonts te laden. De eerste is zelf-hosten: de lettertypebestanden staan op de eigen server of hosting-omgeving. De tweede is laden via een externe dienst, waarbij de bestanden van een externe server komen. Zelf-hosten geeft meer controle over laadsnelheid, privacyregels en beschikbaarheid.

Voordelen van webfonts

• Merkconsistentie: Iedereen ziet hetzelfde lettertype, wat de huisstijl versterkt en professioneel overkomt.
• Betere leesbaarheid: Een zorgvuldig gekozen webfont verbetert de leeservaring en houdt bezoekers langer op de pagina.
• Ontwerpvrijheid: Je bent niet beperkt tot de standaard systeemlettertypen en kunt een uniek karakter aan je merk geven.
• Schaalbaarheid: Webfonts renderen scherp op alle schermresoluties, inclusief retina-schermen.

Aandachtspunten bij webfonts

Webfonts kunnen de laadsnelheid van een pagina beinvloeden. Elk lettertypebestand dat geladen moet worden, voegt een verzoek toe aan de server en kan de weergave vertragen. Dit effect heet FOUT (Flash of Unstyled Text) of FOIT (Flash of Invisible Text): de tekst verschijnt even in een ander lettertype of is tijdelijk onzichtbaar terwijl het webfont laadt.

Om dit te voorkomen zijn er verschillende technieken beschikbaar, zoals het instellen van font-display: swap in CSS, het preloaden van lettertypebestanden en het beperken van het aantal lettertypegewichten en stijlen. Het is ook verstandig om niet meer dan twee of drie verschillende lettertypefamilies per website te gebruiken, want elk extra lettertype betekent extra laadtijd.

Verder is het belangrijk om rekening te houden met licenties. Niet alle lettertypen mogen zomaar op het web worden gebruikt. Controleer altijd of de licentie webgebruik toestaat voordat je een font implementeert.

Webfonts en SEO

Zoekmachines letten steeds meer op paginasnelheid en gebruikerservaring. Slecht geoptimaliseerde webfonts kunnen de laadtijd negatief beinvloeden en daarmee indirect scoren in zoekresultaten schaden. Door webfonts slim in te laden, de juiste bestandsformaten te kiezen en onnodige gewichten weg te laten, draag je bij aan een betere technische SEO-basis.

Hulp bij webfonts?

Wil je de typografie van je website professioneel inrichten met de juiste webfonts, passend bij je huisstijl en geoptimaliseerd voor snelheid? Wiex helpt je met het ontwerpen en technisch implementeren van een consistente visuele identiteit. Bekijk onze diensten voor huisstijlen of neem direct contact op via onze contactpagina.