Typografie

Met dit hoofdstuk kan je de typografie van je webwinkel aanpassen. Je kan uit verschillende gratis lettertypes kiezen met Google Fonts.

Je kan ook de dikte van het lettertype voor elk onderdeel kiezen. Denk erom dat de gewenste dikte van sommige lettertypes misschien niet beschikbaar is.. Als je wil weten of een bepaalde dikte beschikbaar is, ga je naar Google Fonts. Anders wordt het vervangen door de volgende beschikbare dikte.

Als je inspiratie zoekt voor je lettertypes, neem dan een kijkje op https://fontpair.co/ ofhttps://www.reliablepsd.com/ultimate-google-font-pairings/ voor nog meer inspiratie.

Standaard lettertypes

Als je liever een van je eigen standaard lettertypes gebruikt, is het ook mogelijk om ze met een paar lijntjes standaard code te importeren. Deze werkwijze zou voor de meeste lettertypes moeten werken, maar sommige leveranciers van lettertypes gebruiken andere methoden. Denk er om dat de lettertypes die op websites gebruikt worden niet dezelfde zijn als de lettertypes voor een desktop. Als je lettertype licenties koopt, moet je ervoor zorgen dat je een Webfont licentie koopt, niet slechts een desktop licentie.

Bijvoorbeeld, hier volgt hoe je het GT America lettertype van www.grillitype.com zou installeren.

1. Upload je Webfont kit op je website.
   Ga daarvoor naar Tools > Bestanden > Uploaden en upload alle bestanden die je ontvangen hebt. Typische Webfont bestanden zijn bijvoorbeeld .eot, .ttf, .woff en .woff2 en je zou een set bestanden per letterdikte moeten hebben (bijv: vet, medium of licht) en fnt-style (bijv: gewoon of cursief).
   
2. Voeg standaard CSS toe aan je site
   Ga naar Ontwerp > Geavanceerd > Custom CSS en voeg de juiste CSS toe om je Webfonts te importeren. De leverancier van je lettertypes zou je de juiste CSS moeten bezorgen, maar je moet je lettertype pad moeten updaten volgens de bestanden die je in stap 1 hebt geüpload.
   
   Als ik bijvoorbeeld GT America Regular, cursief en vet wil gebruiken op je website, zou je de volgende code gebruiken (met je eigen URL’s):
   

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Regular.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-style: italic;
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-weight: bold;
  src: url('../../fonts/GT-America-Standard-Bold.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

:root {
  --font-heading: 'GT America', Helvetica, Arial, Sans-serif;
  --font-primary: 'GT America', Helvetica, Arial, Sans-serif;
}