De Help Desk punt NL
Kennisbank
De Helpdesk > De Helpdesk > Kennisbank

Wat te doen als je bijzondere website-lettertypes gebruiken wil in je pagina?

Oplossing

Drie manieren waarop je ervoor zorgt dat al je teksten leesbaar blijven – óók als je een niet-gangbaar lettertype gebruikt.

Behalve de layout van je website en de kleuren en afbeeldingen die je gebruikt, is ook het website-lettertype dat je hebt gekozen, van invloed op de uitstraling van je site. Door een bijzonder lettertype toe te passen, kun je je site direct een heel ander karakter geven.

Maar … je kunt niet zomaar de code h1 {font-family: "Century Gothic";} aan je style­sheet toevoegen als je wilt dat je paragraafkoppen van het eerste niveau in dit lettertype worden weergegeven. Want als dit lettertype (of in jargon: font) niet geïnstalleerd is op de computer van degene die je website bekijkt, krijgt hij je tekst nooit in Century Gothic te zien – en kan het effect waarop je hoopte, helemaal verloren gaan!

Er zijn natuurlijk wel een aantal dingen die je kunt doen om het risico op niet-beschikbare lettertypes te beperken. Hieronder staan drie mogelijkheden.

Oplossing 1: alternatieven aangeven

  • je geeft eerst je voorkeurslettertype op (in het voorbeeld: Century Gothic)

  • voor het geval een computer om de een of andere reden niet over dit voorkeurslettertype beschikt, geef je een alternatief op. Veilige alternatieven (lettertypes die op praktisch alle computers zijn geïnstalleerd) zijn: arial, helvetica, times new roman, times, courier new of courier

  • en voor het geval een computer ook niet over dit alternatief beschikt, geef je een lettersoort aan (serif, sans-serif of monospace), zodat het lettertype dat wordt gebruikt, toch in de buurt komt van je oorspronkelijke keuze

Even wat jargon:

  • een serif lettertype is een lettertype waarbij de letters kleine streepjes hebben aan de uiteinden (zogenaamde ‘schreven’) – voorbeelden zijn times new roman en georgia

  • een sans-serif lettertype is een lettertype waarbij de letters die streepjes niet hebben – voorbeelden zijn arial, helvetica en verdana

  • een monospace lettertype is een lettertype waarvan de letters allemaal dezelfde breedte hebben, net zoals bij de typemachines van vroeger. Een voorbeeld van zo’n lettertype is courier

Oplossing 2: fonts uploaden naar je server

Een andere mogelijkheid is het lettertype dat je wilt gebruiken te uploaden naar de server van je webhost en ernaar verwijzen in je stylesheet. Bekijkt iemand dan jouw website zonder dat dit lettertype op zijn computer staat, dan wordt het ter plekke van de server gedownload. (Het blijft trouwens een goed idee om ook alternatieven aan te geven in je stylesheet, voor het geval er iets misgaat tijdens het downloaden van het font.)

Wil je het op deze manier doen, dan moet je het font wel in verschillende formaten opslaan, want de browsers kunnen nog niet allemaal met hetzelfde formaat overweg. De formaten die je nodig hebt, zijn: woff (web open font format), ttf (true type fonts) of otf (opentype fonts), eot (embedded opentype fonts) en svg (vector graphics). Hier vind je een uitleg over het uploaden van fonts.

Oplossing 3: gebruikmaken van Google Fonts

Kies je voor deze oplossing, dan maak je gebruik van de fonts die Google (gratis) ter beschikking heeft gesteld. Je hoeft niets te uploaden naar de server van je webhost, maar alleen een link aan te brengen in je stylesheet naar de plaats waar je de Google-lettertypes vindt. Natuurlijk ben je dan wel beperkt tot de lettertypes die Google aanbiedt op zijn site. (Je kúnt de Google Fonts trouwens wel downloaden, converteren naar de andere lettertype-formaten (zoals bij oplossing 2) en vervolgens uploaden naar je eigen server als je dat liever doet.)

En ook als je de Google Fonts methode toepast, blijft het verstandig om alternatieven te noemen in je stylesheet.

 
Was dit artikel bruikbaar? ja / nee
Gerelateerde artikelen Bijzondere lettertypes in html: hoe doe je dat?
Hoe maak ik zoiets? (Ofwel: de broncode van iets achterhalen)
Vrolijk je webpagina’s op met interessante initialen
Leuke lijsten maken met html en css
Over letters, tekst en html-codes
Opvallende aanhalingstekens in html
Een 3D-tekst maken voor je site doe je zo!
Hoe je CSS gebruikt voor je website-layout
Formmail
Website maken sitemap
Artikel details
Artikel ID: 688
Categorie: Een eigen website maken - Content (letters en tekst)
Zoekwoorden fonts, google, text, tekst, teksten, web, site, html, code, css, font, fonts, uploaden, server, stylesheet, website, pagina, gratis, free
Datum toegevoegd: 5-Dec-2017 12:06:39
Aantal bekeken: 3292
Beoordeling (Stemmen): Artikel beoordeeld 5.0/5.0 (1006)

 
« Ga terug