Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers

Bijzondere lettertypes in html: hoe doe je dat?

Met een afwijkend lettertype voor je (sub)koppen maak je je html-pagina's wat sprekender. Een uitleg in 3 stappen.

Een gewoon lettertype is zo ... gewoontjes. Voor het grootste deel van de tekst op je webpagina’s is dat geen bezwaar, maar voor je koppen en subkoppen zou je best een wat bijzonderder lettertype mogen gebruiken. Zo geef je je pagina’s wat meer karakter.

Maar helaas... een bijzonder lettertype op je html-pagina’s laten weergeven gaat niet zomaar. De reden daarvoor is dat je pagina’s worden opgebouwd met behulp van de lettertypes die beschikbaar zijn op de computer van degene die je webpagina’s heeft opgeroepen in zijn browser. Als je dus een heel bijzonder lettertype hebt opgenomen in de html-code van je pagina’s, en degene die je pagina’s bekijkt heeft dit lettertype niet op zijn computer staan, dan worden die pagina's vertoond met een van de standaard-lettertypes. En dat ziet er ineens heel anders uit!

hoe gebruik je een bijzonder lettertype op je site?

Nu is dit gelukkig wel op te lossen. In de kop van mijn (voormalige) website Sollicitatiebrieven.net, wilde ik bijvoorbeeld een zwierig lettertype gebruiken (ExmouthRegular). Nu is die site inmiddels niet meer van mij en kan de nieuwe eigenaar ondertussen iets aan de layout hebben gedaan, dus hiernaast heb ik even een afbeelding van die kop neergezet.

Wil je ook zo’n niet-gangbaar lettertype gebruiken op je site, volg dan de instructies zoals ik ze hieronder heb opgeschreven. Daarbij wel even een waarschuwing: wees héél precies in het opvolgen van de instructies!

  1. Eerst zoek je een lettertype op dat je graag wilt gaan gebruiken. Dat kan een lettertype zijn dat op je eigen computer staat, maar je kunt ook eens kijken in fontbibliotheken, zoals die van 1001 Free Fonts.

  2. Heb je een lettertype (of font) gevonden, dan moet dit worden geconverteerd naar andere formaten. Daarvoor kun je terecht bij de font-face generator van Font Squirrel.

    Daar moet je je font uploaden (als je een font van je eigen computer gebruikt, moet je het eerst uit de map Lettertypes of Fonts naar je bureaublad kopiëren), een vinkje zetten achter de Agreement (je mag niet alle lettertypes vrij gebruiken; sommige zul je eerst moeten kopen) en dan kun je op een knop klikken om een zip-bestand te downloaden dat de geconverteerde lettertypes bevat.

    Pak je dat zip-bestand uit, dan zie je daarin vier lettertype-bestanden (ttf, woff, eot en svg), een stylesheet (een bestand met de extensie css), en een demo-bestand (html). Verder staat er ook een submap in, maar daar hoef je niets mee te doen. Als je het html-bestand opent met je browser, dan vind je daarin op het tabblad 'Installing Web­fonts' de installatie-instructies.

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

    • Upload de vier verschillende webfonts naar je server, in dezelfde map als die waarin ook je stylesheet staat.

    • Zet de zgn. CSS @font-face declaration bovenaan in je stylesheet (dus in je css-bestand, niet in je html-pagina’s). Je vindt deze CSS @font-face declaration in het bestand stylesheet.css dat deel uitmaakt van de zip-file. Het bestaat uit ongeveer 10 regels en eindigt met het teken }.

      (Let op: ik heb het hier dus over twee verschillende stylesheets: je eigen stylesheet en het stylesheet uit de zip-file. Je kopieert de CSS @font-face declaration uit het tweede stylesheet en plakt het in je eigen stylesheet.)

    • Zoek in je eigen stylesheet het element op waarvoor je dat nieuwe lettertype wilt gebruiken en vervang de naam van het standaard font door die van het nieuwe webfont.

      Stel bijvoorbeeld dat een van je elementen de volgende stijlregel heeft:

      font-family: Verdana, Arial, Helvetica, sans-serif;

      dan verander je dat bijvoorbeeld in:

      font-family: ComicSansMSBold, sans-serif;

      (Je vervangt dus de oude lettertypes door die van het nieuwe lettertype, precies zoals dat vermeld staat in de CSS @font-face declaration. En vanaf dat moment worden alle letters van het betreffende element in dat nieuwe lettertype vertoond.

Een andere methode om een niet-gangbaar lettertype op je site te laten zien, is door gebruik te maken van een van de lettertypes van Google Fonts (zie daarvoor onder punt 3 op deze aanvullende pagina over het gebruik van bijzondere lettertypes).