Sinds een paar jaar zijn we voor de typografie van websites niet meer afhankelijk van die saaie ouwe Verdana, Arial en Helvetica. Webfonts to the rescue!
Er zijn zelfs gratis webfonts ter beschikking, met Google Webfonts als meest bekende. Die kan je intussen veilig gebruiken. Dachten we. Want wat blijkt: de webfonts van Google worden erg lelijk weergegeven in Google Chrome onder Windows! En bij nadere inspectie blijkt dat wel meer webfonts het niet goed doen in Chrome onder Windows. Het probleem is al zolang als de Google webfonts bestaan bekend, maar om onduidelijke redenen wil Google het niet oplossen. Daarmee loopt Chrome zelfs achter bij IE.
Gelukkig is er (soms) een oplossing:
- Allereerst moet je het Google font downloaden naar je eigen computer. (Daarvoor moet je ze eerst in je Collection zetten, klik vervolgens op de knop ‘Use’ en vervolgens krijg je rechtsboven een linkje met ‘Download your Collection’). Google zal beweren dat het niet nodig is, maar doe het toch maar wel.
- Unzip het googlefont en ga vervolgens naar FontSquirrel. Daar kun je een webfont genereren door het googlefont te uploaden.
- Download de gegenereerde webfonts en zet ze in een mapje in je website.
- Fontsquirrel geeft behalve de webfonts ook een stylesheet. Kopieer de code uit dit stylesheet naar je eigen stylesheet. Dat ziet er bijvoorbeeld zo uit:
@font-face {
font-family: 'quicksandregular';
src: url('quicksand-regular-webfont.eot');
src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand-regular-webfont.woff') format('woff'),
url('quicksand-regular-webfont.ttf') format('truetype'),
url('quicksand-regular-webfont.svg#quicksandregular') format('svg');
font-weight: normal;
font-style: normal;
}
Zorg dat je fonts in hetzelfde mapje staan als het stylesheet. (of pas de url in het stylesheet aan.) - Het ‘svg’-webfont is bestemd voor Chrome. Alleen houdt Chrome er niet van dat het pas als laatste aan de beurt is, zet dus de ‘svg’ regel hoger in het lijstje, boven de ‘woff’. Let er op dat je de komma achter ’truetype’ verandert in een punt-komma. Het ziet er dan zo uit:
@font-face {
font-family: 'quicksandregular';
src: url('quicksand-regular-webfont.eot');
src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('quicksand-regular-webfont.svg#quicksandregular') format('svg'),
url('quicksand-regular-webfont.woff') format('woff'),
url('quicksand-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Jammer genoeg is er geen garantie dat dit bij jouw webfont gaat werken. De (gratis) webfonts van Google zijn van lagere kwaliteit dan (betaalde) fonts van gespecialiseerde fontshops.
Wat je nog kunt proberen is om een kleine shadow mee te geven in dezelfde kleur als het font:
text-shadow: 0px 0px 1px #fff;
Bij smallere fonts kan dit helpen om het font wat meer body te geven.