Lettertypes en fonts toevoegen aan WordPress website

Typografie en lettertypes zijn heel belangrijk voor de vormgeving en 'look en feel' van je website. Een overzicht om fonts op je WordPress website te plaatsen.

Logo cursus traing wordpress

Lettertypes en fonts toevoegen aan WordPress website

en lettertypes zijn uiteraard heel belangrijk voor de vormgeving en ‘look en feel' van je website. Hieronder een overzicht van de opties om lettertypes op je WordPress website te implementeren.

Google web fonts: gratis fonts toevoegen voor WordPress website

Google Web Fonts heeft een bijzonder enorme groei gemaakt. Dat het gebruik van Google Web Fonts gratis is en overal op elk platform, desktop, tablet, smartphone, etc, heeft daarbij zeker een belangrijke rol gespeeld. Maar daarnaast biedt Google ook een aanzienlijke collectie. Rond de 1000 font-families. Op Google Fonts zie je alle fonts, gesorteerd op populariteit. Behalve de sortering, kun je met behulp van de filters in de zijbalk ook de selectie aanpassen. Beginners voor WordPress raad ik dit altijd aan. Ik heb ook een mooi overzicht gemaakt van de beste Google web fonts zodat je niet eindeloos hoeft te zoeken.
Beste 50 Google web fonts en lettertypes voor WordPress webdesign


Voorbeelden Google web fonts

Blij met deze design tip?
Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews:


Typografie, lettertypes en fonts voor WordPress voor gevorderden

Google Web Fonts is het makkelijkst. Voor gevorderden zijn er deze opties zodat je vrijwel elk kwalitatief goed font op je site kunt gebruiken.

Typekit Fonts: Adobe fonts op website

Hele mooie font collectie van . Betaald, rond de 50 euro per jaar. Ook voor de gevorderde WordPresser. Je moet een account hebben bij Typekit en dan per website een zogenaamde Kit aanmaken met hierin de fonts. Het is handig om deze plugin te gebruiken om de fonts op je site zichtbaar te krijgen:
Typekit Fonts for WordPress van OM4

Fonts / letertypes toevoegen of uploaden met WordPress plugin: Use Any Font

Voor gevorderden: met de plugin “Use Any Font” kun je vrijwel alle fonts op eenvoudige wijze gebruiken in WordPress. De plugin zorgt ervoor dat jouw toegevoegde voor elke browser zichtbaar is. Je kan zelf fonts uploaden naar je webserver die dan zichtbaar worden. Enige ervaring is belangrijk, maar het werkt perfect.
Handleiding fonts en lettertypes toevoegen met Use Any Font Plugin

WordPress plugin: Easy Google Fonts plug-in

Met de plugin Easy Google Fonts-plug-in kun je vrijwel alle fonts op eenvoudige wijze gebruiken in WordPress. De plugin zorgt ervoor dat jouw toegevoegde Google Fonts voor in je website zichtbaar zijn. Enige ervaring met CSS is vereist.
Bekijk handleiding Easy Google Fonts WordPress plug-in

Fonts zelf op je server zetten

Ook voor gevorderden. Het vergt even werk en je moet goed voor gaan zitten, maar het werkt heel mooi. Je kan zelf fonts uploaden en. Je moet ook het zogenaamde CSS file aanpassen. Tijdens een gevorderden cursus of de design cursus leg ik uit hoe dit werkt. Een goede up to date handleiding vind je hieronder
Bekijk handleiding op wpmudev.org

Fonts en lettertypes toevoegen met CSS en Fontface

Fonts en lettertypes kun je toevoegen met CSS en Fontface. In dit voorbeeld laat ik je het Roboto font zien. Enige kennis van CSS en de customizer is wel een pre. Lees eventueel de volgende handleidingen:

Om het font te kunnen gebruiken op je webpagina's, neem je de volgende stappen:

1 | Plaats dit in het CSS van je thema


/* zet dit in je CSS om het font te laden - cursuswp.com */
@font-face {
font-family: 'Roboto';
src: url('roboto.eot'); /* IE9 Compat Modes */
src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto.woff') format('woff'), /* Modern Browsers */
url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 | Plaats dit in bij je stijl (Span of class) in het CSS


/* zet dit welke CSS class je het font wilt gebruiken  - cursuswp.com  */
body {
font-family: 'Roboto', sans-serif;
font-size: 36px;
}

Coole webfonts

lineto.com
abcdinamo.com/typefaces
freefontsfamily.com/ | Heel veel keuze

Webfonts die niet geladen worden

Soms worden webfonts niet goed geladen. Ze zijn dan niet geactiveerd in je thema. Probeer dan het volgende.
Plaats dit in je CSS. Je moet dan wel weten wat de selector (eerste deel) van de onderstaande code is. Voor bold is dit bijvoorbeeld “strong”.


b, strong, address:first-line, dt {
font-weight: 700;
}

Extra webfonts laden in WordPress thema

Extra gewichten laden moet je vaak extra doen in je . Dit hangt van het thema af, maar meestal doe je dit in de customizer.
WP > Weergave > Customizer > Typografie
Zie hieronder een voorbeeld in het


Fonts installeren op je mac

Hoe kan ik lettertypes op de Mac handmatig installeren? Je hoeft niet per se Font Book te gebruiken om nieuwe lettertypes op de Mac te installeren. U kunt dit ook handmatig doen door lettertypebestanden te kopiëren naar Library/Fonts. Helaas zijn vanaf OS X 10.7 de Bibliotheek-map en alle submappen ervan verborgen voor het zicht van de gebruiker. U zult wat extra moeite moeten doen om deze map te vinden en te openen:

  • Open Finder en klik op de “Go” sectie in het bovenste menu.
  • Zoek “Ga naar de map” in het uitklapmenu en klik erop.
  • Typ “~/Library/Fonts” in het pop-up venster en druk op “Go”.
  • Lukt dit niet: ga dan naar jouw mac > Bibliotheek > Fonts
  • De map met de lettertypen zal verschijnen.
  • Sleep een uitgepakt lettertypebestand naar de map Fonts.

Nu weet je ook hoe je Mac-lettertypes handmatig kunt toevoegen.

Hoe u lettertypes op de Mac kunt bekijken

Met zoveel coole Mac-lettertypen is het niet altijd gemakkelijk om de juiste keuze te maken voor uw zakelijke project of persoonlijke behoeften. Dat is waar de lettertype voorvertoning een rol speelt. De beste manier om nieuwe lettertypen voor de Mac te bekijken is door het programma Font Book te gebruiken:

  • Ga naar Finder → Programma's → Font Book of gebruik Spotlight om Font Book te vinden en uit te voeren.
  • Klik op het lettertype dat je wilt bekijken (de lettertypen staan in de middelste van het venster).
  • Preview zal verschijnen in het rechterdeel van het venster.

Om te wisselen tussen verschillende voorbeeldmodi, klik op lijnen, of letterlijke knoppen in de linkerbovenhoek van het venster.


Nieuw lettertype toevoegen op Windows

Opmerking Om de standaard Windows-lettertypen opnieuw te installeren, gaat u naar het gedeelte “De standaard lettertypen die bij Windows zijn meegeleverd opnieuw installeren”. Belangrijk Om lettertypes te installeren, moet u ze op CD of uw harde schijf hebben. Volg deze stappen om een lettertype te installeren:

  • Klik op Start en vervolgens op Uitvoeren.
  • Typ het volgende commando in en klik dan op OK:
    %windir% lettertypes
  • Klik in het menu Bestand op Nieuw lettertype installeren.
  • Klik in het vak Drives op het station dat het lettertype bevat dat u wilt toevoegen.

Opmerking Het diskettestation is meestal station A of station B. Het cd-station is meestal station D.

  • Klik in het vak Mappen op de map met het lettertype dat u wilt toevoegen en klik vervolgens op OK.
  • Klik in het vak Lijst met lettertypen op het lettertype dat u wilt toevoegen. Om meer dan één lettertype tegelijk te selecteren, houdt u de CTRL-toets ingedrukt terwijl u elk lettertype selecteert.
  • Klik op om het selectievakje Kopieer lettertypen naar lettertypen te selecteren. Het nieuwe lettertype wordt opgeslagen in de Windows-map Lettertypen.
  • Klik op OK.

Succes met je fonts en lettertypes!

Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress site beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Lettertypes en fonts toevoegen aan WordPress website

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Lettertypes en fonts toevoegen aan WordPress website en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven