Google maakt het met Web Fonts mogelijk om gebruik te maken van meer dan 600 verschillende lettertypes. "Vroeger" (een paar jaar geleden) hadden website bouwers maar liefst de keuze uit pakweg 8 standaard lettertypes die geschikt waren voor het gebruik op websites. De komst van Google Web Fonts geeft dus een enorme vrijheid voor webdesigners en bedrijven om te juiste sfeer meer te zetten. In deze blog leg ik je uit hoe eenvoudig het is om de lettertypes toe te passen.

Niet alles was "vroeger" beter

Vóór 2011 was het nauwelijks mogelijk om andere fonts te gebruiken dan:

  • Verdana
  • Arial (Helvetica)
  • Comic Sans
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS

Om een lettertype op een website te kunnen gebruiken was het noodzakelijk dat het lettertype op de computer van de website bezoeker stond. Als dat niet het geval was, werd een alternatief lettertype getoond. Vaak was dat Times New Roman. Om dat te voorkomen, werden titel en koppen boven een webpagina in "exotische lettertypes" als afbeelding opgeslagen. Nadeel hiervan was dat afbeeldingen niet door Google geïndexeerd werden en dat heeft een negatieve werking op de SEO.

Even heeft Microsoft het met WEFT3 geprobeerd, maar de implementatie daarvan was omslachtig en niet vrij van kinderziektes.
 

Lettertypes zorgen voor sfeer

Sfeer is meer dan "gezeliig". Andere sferen zijn bijvoorbeeld droevig, uitbundig, zakelijk, modern, luchtig en vrolijk zijn. Doordat lettertypes een bepaalde sfeer creëren, kunnen ze een website ondersteunen bij de uitstraling. Een dun en hoog lettertype zal beter passen met een lingerie zaak en een stevig breed lettertype meer bij een BBQ restaurant. Wanneer lettertypes worden gecombineerd met kleuren, kunnen sterke combinaties worden gevormd met elk een eigen sfeer. Hier enkele voorbeelden.

blog-google-web-fonts-verschillende-lettertypes
 

Hoe kun je andere lettertypes op je website gebruiken?

Stel dat je een website hebt met recepten en je wilt een handgeschreven lettertype gebruiken voor de opsomming van de ingrediënten. Je kunt dan deze stappen doorlopen:

  1. Ga naar https://www.google.com/fonts
  2. Blader door de fonts en maak eventueel de lijst korter door aan de linkerkant het Filter te gebruiken.
  3. Klik vervolgens op de knop "Add to collection" achter het lettertype dat je hebt gevonden. In mijn geval neem ik "Satisfy".
  4. Klik rechtsonder op het knopje "Use".
  5. Schuif de pagina naar benedentot je bij punt 3 uitkomt (Add this code to your website). Hier staan drie mogelijkheden om het lettertype "aan te roepen" in je website:
     
    Standard: voor in eenvoudige HTML pagina's. Als je hiervoor kiest dan zet je 
    <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> tussen de <HEAD> tags in je HTML-pagina.
     
    @import: voor CSS (Cascading Style Sheets). Als je deze kiest, zet je @import url(http://fonts.googleapis.com/css?family=Satisfy); op de eerste regel in je CSS-bestand.
     
    Javascript. Dit sla ik in deze blog over.
     
  6. ls laatste kun je het lettertype gebruiken in de webpagina door een Kop of Paginatitel het in dit lettertype te zetten. In CSS kun je bijvoorbeeld deze code opnemen: H2 {font-family: 'Satisfy', cursive; font-size: 18px; color: #FF5A00;} en in de website een H2 toekennen aan een Kop.

Dat is alles. Veel plezier ermee!