Wie wil er niet eens wat anders dan die eeuwige standaard lettertypes —Verdana, Arial of Georgia — op zijn website gebruiken? Nou, ik wel.

Plaatjes of sIFR
Als je zo roekeloos bent om een exotisch font in te zetten op je website dan heb je een paar mogelijkheden tot je beschikking.

Die heb ik in het verleden allemaal al eens gebruikt:

• Kopteksten als grafisch bestand / plaatje op een webpagina. Jakkes. Da’s eigenlijk onverantwoord vanuit het oogpunt van bruikbaarheid. Het doet daarnaast afbreuk aan het principe van semantische markup. Bovendien laat je kansen op indexering door spiders liggen door je koptekst in html te vervangen door een plaatje.
• Een combinatie van afbeeldingen en css. Gebruik een achtergrondplaatje om je koptekst in een exotisch font weer te geven. Dit plaatje gebruik je in een stijlbladdeclaratie als background image voor je kop. In een met css onzichtbaar gemaakte span tag komt de koptekst als html-tekst te staan. Iets minder jakkes, maar nog steeds niet elegant:
  

  <h2><span>dit is mijn koptekst</span></h2>

  h2 { display: block; width: 200px; height: 30px; background: transparent url(/pad/naar/beeldmateriaal) 0 0 no-repeat;  }

  h2 span { display: none; }

• Koppen vormgeven met sIFR (scalable Inline Flash Replacement) . sIFR tekst is indexeerbaar en houdt de markup intact, maar is afhankelijk van meer dan één optionele technologie: Flash en javascript. Bovendien kan sIFR zich nogal eens bokkig gedragen.

@font-face
Enter font embedding door middel van de stijlblad regel @font-face.

@font-face duikt voor het eerst op in de voorstellen voor de CSS2 specs — Internet Explorer ondersteunt @font-face al sinds versie 5 — en is onderdeel van de CSS3 font specificatie.

Nu alle grote browsers min of meer weten om te gaan met @font-face — jammer genoeg niet op een uniforme manier — lijkt het gebruik van webfonts een vlucht te gaan nemen.

Hoe werkt het?
Door middel van @font-face specificeer je één of meerdere lettertypen in je stijlblad:

@font-face {
font-family: ‘nullbeta’;
src: url(‘pad/naar/font/fontnaam.eot’);
src: local(‘alternatieve fontnaam’), local(‘alternatieve fontnaam’), url(‘pad/naar/font/fontnaam.woff’) format(‘woff’), url(‘pad/naar/font/fontnaam.ttf’) format(‘truetype’), url(‘pad/naar/font/fontnaam.svg#fontnaam’) format(‘svg’);
}

Vervolgens koppel je de @font-face rule aan een selector, eventueel met aanvullende stijldeclaraties:

.selector-class, #selector-id { font-family: “nullbeta”; color: #d00; }

EOT? OTF? WOFF?
In de bovenstaande declaratie zie je verschillende versies van het lettertypebestand terug. Da’s omdat webbrowsers — hoe kan het ook anders — op hun geheel eigen wijze met embedded fonts omgaan. Om te voorkomen dat je groepen gebruikers uitsluit is het zaak om je fontbestand in diverse smaken aan te bieden:

• EOT — Embedded Open Type (Internet Explorer)
• TTF — True Type Font
• OTF — Open Type Font
• WOFF — Web Open Font Format (Firefox 3.6 en hoger)
• SVG — Scalable Vector Graphics (iPhone)

Gelukkig hoef je je geen zorgen te maken over het omzetten van het ene font formaat naar het andere. Web Squirrel heeft een handige online generator waarmee dit in een handomdraai is gepiept.

Licentie
Waar je bij het gebruik van embedded fonts wel op moet letten is de vraag of de gebruiksvoorwaarden van het font wel voorzien in gebruik op een website.

Alles goud?
Is het dan allemaal goud wat er blinkt? Nou nee. Jammer genoeg niet.

Onder bepaalde browsercondities zie je een flikkering bij het inladen van de pagina. Eventjes wordt de pagina in een basislettertype getoond voordat @font-face het embedded font rendert. Daarnaast blijkt het gebruik van @font-face de performance van een website negatief te beïnvloeden.

Zie Steve Souders’ relaas voor uitgebreide info over de haken en ogen aan het gebruik van @font-face.

Resources
Meer lezen over @font-face? Via onderstaande urls kom je er alles over te weten.

• How to use CSS font face?
• Font squirrel. Voor het genereren van de EOT, OTF, TTF, SVG en WOFF bestanden van je font
• Webfonts wiki. Een overzicht van fonts die je (licentietechnisch) kunt gebruiken voor embedding
• Web font specimen. Een font toolkit
• Steve Souders: @font-face and performance

 eot · fonts · otf · sifr · ttf · typografie · webfonts

Nullbeta aka HansR babbelt deze website louter op persoonlijke titel vol. Mogelijkerwijs worden Nullbeta's standpunten niet gedeeld door de organisatie die z'n boterham belegt. Maar kan dat iemand boeien?