Fonts gebruiken op je website

Als je ontwerper bent van websites, kan ik me voorstellen dat je de beperking van de beschikbare fonts (Arial, Verdana, Tahoma en Times New Roman) te beperkt vindt. Natuurlijk zijn deze fonts goed te lezen op een gemiddeld scherm, maar af en toe wil je natuurlijk "uit de ban springen". Lastig als je van je klant deze beperking krijgt opgelegd. Als designer wil je het liefst zo vaak mogelijk met nieuwe fonts werken.

sIFR

Natuurlijk konden we al lang gebruik maken van sIFR. Deze technologie vervangt door middel van Javascript, bepaalde headers in flash-bestanden, waarin dezelfde tekst met een ander font word getoond. Een kind kan de was doen. Toch is dit een nogal omslachtige methode. Daarnaast dien je Javascript aan te hebben staan en Flash te hebben geïnstalleerd. Uit oogpunt van ontwikkel-esthetiek ben ik hierop tegen. Er moeten toch betere oplossingen zijn...

Ook Cufon is een waardig alternatief van sIFR. Hier wordt een font via Javascript gerendered (ik hoop dat ik het zo goed zeg). Sneller dan sIFR en je hebt geen Flash nodig. Toch vind ik deze oplossing ook niet optimaal. Logischer zou het zijn om deze zaken in het CSS-bestand op te lossen. Met de komst CSS3 is dit ook gemakkelijker op te lossen. Deze fonts kun je op je eigen server plaatsen en hiernaar verwijzen in het CSS-bestand. In principe zou je dan allerlei fonts kunnen gebruiken.

Google Fonts

Google gaat nog een stap verder en biedt standaard fonts aan die je kunt gebruiken op je website. Voorbeeld zoals je dit kunt toepassen op je site door middel van CSS:
Embed the font into your page
To embed Reenie Beanie into your web page copy the following code as the first element in the of your html document:
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css">
(The above gets Reenie Beanie regular only.)
The API will generate the necessary CSS specific to the user's browser so you can use the font on your page. Simply use the font Reenie Beanie in your CSS font stack like any other font, for example:

h1 { font-family: 'Reenie Beanie', arial, serif; }
Het web wordt alleen maar mooier!


gerelateerde blogs met thumbnail

Als je „ontwikkel-esthetiek” zo belangrijk vindt, waarom staat er dan zoveel CSS-code in je HTML? Bovendien is het nadeel van het afhankelijk zijn van andere domeinen (CDN's en zo) voor correcte weergave van je pagina's dat als er aan de andere kant iets mis gaat er essentiële zaken ontbreken (en ja, ik heb al diverse keren meegemaakt dat Googles CDN dat jQuery hostte eruit lag).

Een ander nadeel is dat i.i.g. in WebKit-browsers tekst gezet uit fonts die zijn gedefinieerd via @font-face (wat hier feitelijk het geval is) pas verschijnt als het font gedownload is. Dit kan de bezoeker het idee geven dat er iets mis is met de pagina met als gevolg dat hij vertrekt voor er iets te zien is. Dit was i.i.g. mijn reactie toen ik Henri Sivonens website met Chrome bezocht.

Overigens is document.write niet toegestaan in XHTML en als je het dan tóch gebruikt, gebruik dan onderkastletters voor tags. Verder dient de inhoud van script-element als CDATA te worden gemarkeerd. Nu heb je nogal niet-validerende XHTML. ;-)

gravatar

Een terechte opmerking!

Met Blogger heb je helaas niet de mogelijkheid om bestanden op een server te plaatsen. Ik heb nu wel een domein-naam gekoppeld aan mijn oude Blogspot-naam (http://erwin-sigterman.blogspot.com), maar meer heb ik -er niet- aan gedaan...

Zoiets vermoedde ik al. Met alle respect, maar dat klinkt mij een beetje teveel in de oren als „dat ligt aan de software”. Je bent natuurlijk altijd zelf verantwoordelijk voor het gebruikte spul dat de HTML etc. genereert.

Je wil ook niet weten hoe vaak ik in dit verband al zinnen heb gehoord als: „dat doet Word/Excel/[vul maar in]”, „dat doet het apparaat nou eenmaal, dat kan niet anders” en „dat gaat automatisch, ja” (dat laatste was het antwoord van de trambestuurder toen er een vrouw tussen de automatisch sluitende deuren kwam te zitten).

gravatar

Een schoenmaker loopt ook vaak op oude versleten schoenen...