Webfonts

Webfonts toevoegen aan je website doe je zo

Sinds de introductie van @font-face is het mogelijk om allerlei soorten fonts te gebruiken op je website. In plaats van de standaard op het besturingssysteem geïnstalleerde fonts zoals Arial en Georgia kan je nu ook kiezen uit bijvoorbeeld Open Sans of Volkorn.

Het toevoegen van webfonts aan je website kan op meerdere manieren en dit kan zowel gratis als betaald zijn. Of je voor een webfont moet betalen en hoeveel is afhankelijk van het gekozen font en/of de provider van het webfont.

Google Webfonts

Google Webfonts

Een van de bekendste en makkelijkste manieren om een webfont aan je website toe te voegen is via Google Webfonts. Google biedt inmiddels meer dan 600 soorten webfonts aan die je allemaal gratis kan gebruiken.

Door te bladeren in de collectie van Google Webfonts kan je het webfont of webfonts die je wil gaan gebruiken toevoegen aan je collectie. Klik hierna op de Use button waarna je alle instructies vind om het webfont te gaan gebruiken.

In het kort komt het er op neer dat je een regel code toevoegt aan de <head> van je website waarin de link staat naar het webfont. Na het plaatsen van de link kan je via de CSS het webfont gaan gebruiken.

Heb je een WordPress website? Dan is de kans groot dat Google Webfonts al zijn geïntegreerd met je thema en je heel eenvoudig een webfont kan kiezen vanuit je thema instellingen.

Tip: Google Webfonts werkt samen met Typecast; een online tool om webfonts te testen die ontzettend handig is. Om je webfont te testen klik je op de Review tab van je collectie. Bovenaan de pagina in de menubalk zie je een linkje om het webfont te testen in Typecast.

Font Squirrel

Embedden via @font-face

Een andere manier om webfonts te gebruiken is om zelf het webfont te downloaden en daarna te embedden. Je host de webfonts dan zelf op je server in plaats van bijvoorbeeld Google bij het gebruik van Google Webfonts. Een bekende website waarop je webfonts kan vinden en downloaden is Font Squirrel. Net als Google Webfonts is Font Squirrel gratis.

Via Font Squirrel kan je webfonts kits downloaden die de webfonts bevatten in .woff, .ttf en .eot formaat en de stylesheet. Plaats de bestanden (in een aparte map) op de server, pas de stylesheet aan zodat de link naar de bestanden goed staan en klaar ben je om het webfont te gebruiken.

Typekit

Webfont provider als Typekit gebruiken

Naast de gratis webfonts zijn er ook betaalde webfont aanbieders. De meest bekende hiervan is Typekit. Typekit heeft een beperktere collectie ten opzichte van Google Webfonts maar bevat wel veel meer kwalitatief goede webfonts. Veel commerciele fonts worden op Typekit aangeboden en kan je sinds kort ook offline gebruiken als je in het bezit bent van een Adobe Creative Cloud licentie.

Typekit werkt iets anders dan de eerder besproken opties. Als eerste zal je een account moeten aanmaken waarna je hierna webfonts kan toevoegen aan een ‘kit’. Per ‘kit’ kan je instellen welke fonts je wil gaan gebruiken met welke stylen en op welk domein of domeinen.

In de kit vind je ook een stukje JavaScript die je moet plaatsen op je website om het webfont te kunnen gaan gebruiken. Daarnaast staat hier ook in het kort uitgelegd hoe je het webfont kan gaan gebruiken in combinatie met CSS.

Enkele tips voor het gebruik van webfonts

Door webfonts te gaan gebruiken heb je een enorme keuze aan fonts waaruit je kan gaan kiezen. Wees alleen wel terughoudend met het gebruik van webfonts op een website. Tussen alle gratis webfonts zitten maar weinig echt goede websfonts.

Wees ook voorzichtig met het gebruiken van meerdere (web)fonts op een website. Het combineren van fonts is erg lastig en vereist veel kennis van fonts. Gebruik het liefst één of twee verschillende fonts op een website en niet meer.

Test altijd je webfont in meerdere browsers en besturingssystemen. Lang niet alle webfonts worden altijd goed en scherp weergegeven in de browser. Vooral Windows heeft hier last van.

Wil je meer weten of het gebruik van (web)fonts? Neem dan eens een kijkje op de Typekit Practice website. Hierop vind je heel veel bruikbare informatie en tips. Vooral de library bevat een zeer goede selectie aan boeken over typografie.

Hoe waardeer je dit bericht?
Niels Pilon

Over Niels Pilon

Niels is WordPress webdesigner pur sang. Naast zijn voorliefde voor WordPress om de meest waanzinnige website op te ontwikkelen, heeft Niels erg veel op met typografie. Hij bezoekt daarnaast veel conferenties over Responsive Webdesign om altijd volledig op de hoogte te blijven van wat er speelt in het vakgebied!

Ook interessant


Wij werken onder andere voor

Helix Advies

Niets meer missen?

 

 

Vul je gegevens in, dan houden wij je

op de hoogte van het laatste nieuws. 

Relax, we houden zelf ook niet van spam. We zullen je e-mail adres niet verkopen en sturen je niet vaker dan 1x per maand een bericht.