23april

Font embedding via CSS met @font-face

Binnenkort geef ik op een docentendag voor gebruikers van de lesmethode Fundament Informatica een presentatie over CSS en de mogelijkheden ervan bij het ontwerpen van websites. In dit blogbericht schreef ik hierover. Bij het voorbereiden van deze presentatie stuitte ik op een techniek die voor mij min of meer nieuw was, hoewel blijkt hij al sinds 1998 tot de CSS 2-standaard behoort! Er was tot voor kort echter geen enkele browser die deze techniek ondersteunde, daarom was ik hem in de praktijk nog nooit tegengekomen. Ook vond ik er op het Nederlandstalige web nog weinig informatie over, reden waarom ik deze blogpost er over schrijf.

Font embedding

Het gaat om font embedding, oftewel het invoegen van specifieke lettertypen in een webpagina, waarbij de CSS-declaratie @font-face gebruikt wordt. Onlangs is Safari 3.1 voor Windows en Macintosh uitgekomen en het lijkt er op dat dit de eerste browser eerste is die font embedding volledig ondersteunt. Vooral designers zullen juichend uit hun bureaustoel springen bij deze mogelijkheden, want nu zijn ze eindelijk niet meer beperkt tot de ongeveer tien lettertypefamilies die iedereen kent. Deze overbekende lettertypen zijn erfenis van het Microsoft Core fonts for the web initiatief dat liep van 1997 tot 2002. Op alfabetische volgorde zijn dit:

  • Andale Mono,
  • Arial,
  • Courier New,
  • Georgia, Impact,
  • Times New Roman,
  • Trebuchet MS,
  • Verdana en
  • Webdings
  • (en dan vergeet ik met opzet: Comic Sans MS. Iemand?)

Om je er van te verzekeren dat je website er goed uitziet op alle platformen en in alle browsers, moet je je noodgedwongen beperken tot deze lettertypen. Of anders je toevlucht nemen tot jpg- of gif-afbeeldingen van teksten – met alle nadelige gevolgen voor de omvang, usability en de zoekmachine-zichtbaarheid voor je pagina van dien. Een uitgebreidere lijst met 'web-safe fonts' is te lezen bij ampsoft.net.

Kenmerken van font embedding

Ik zal hier geen volledige cursus font embedding beschrijven met alle mogelijkheden en details, maar de belangrijkste kenmerken beschrijven zodat je zelf verder aan de slag kunt.

  • Bij font embedding wordt een lettertype niet letterlijk in de webpagina opgenomen, maar staat in de header van de pagina een <link> naar het lettertypebestand op de server, of wordt in de CSS-code met @font-face aangegeven welk font wordt gebruikt en waar het is geplaatst.
  • Font embedding wordt ondersteund voor 'sfnt fonts', oftewel TrueType, OpenType PS en OpenType TT-lettertypen.
  • Het is in de licentievoorwaarden meestal niet toegestaan een commercieel lettertype te uploaden naar een webserver om het ook in de webpagina te gebruiken. Maar gelukkig zijn er (tien)duizenden freeware lettertypen beschikbaar.
  • Internet Explorer 4 ondersteunde al font embedding, en doet dat nu nog! Helaas werkt dit alleen met de Microsoft-specifieke lettertypen in het Embedded Open Type, of EOT-formaat, een formaat dat nooit erg populair is geworden.
  • Zie voor aanvullende links over dit onderwerp de lijst onder aan dit bericht.

Techniek van font embedding

Om een lettertype in te sluiten in een webpagina gebruik je bijvoorbeeld de volgende CSS-code

<style type="text/css">
<!--

@font-face {
font-family: GraublauWeb;
src: url(GraublauWeb.otf) format(truetype);
}

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url(GraublauWebBold.otf) format(truetype);
}

-->
</style>

Hierbij geldt:

  • GrauBlauWeb is in dit geval de naam van het lettertype dat ingesloten wordt in de webpagina.
  • Src: url(…) verwijst naar de locatie van het lettertype op de server of op het lokale bestandssysteem
  • Format (…) geeft aan welk formaat wordt gebruikt, truetype of opentype.

En verderop in het stijlenbestand gebruik je dan bijvoorbeeld de volgende declaraties:

h1 {
font-family:GraublauWeb, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color:#CC0000;
}

p {
font-family:GraublauWeb,Verdana, Arial, Helvetica, sans-serif;
}

Let er op dat je als alternatief lettertype een van de bekende lettertypen opgeeft (in dit voorbeeld: Verdana, Arial, Helvetica, sans-serif) om ook niet-ondersteunende browsers ter wille te zijn. Natuurlijk moet het lettertypepakket wel eerst worden gedownload vanaf de server naar de browser, maar het gaat dan meestal om maximaal 100 tot 140 KB, oftewel het formaat van een kleine foto. Dat is overkomelijk, zeker als het alternatief is dat een ontwerper (achtergrond) afbeeldingen wil gebruiken om het lettertype maar te handhaven. Een ander voorbeeld van font embedding is

<style type="text/css">

@font-face {
    font-family: "Primer Apples", "Trebuchet MS", Arial;
    src: url('http://www.mijnserver.nl/fonts/');
}
</style>

waarbij in dit voorbeeld het complete serverpad is aangegeven waarop het lettertype gevonden kan worden.

Beperkingen

Het embedden van lettertypen is een mooie techniek, maar de beperking ervan is uiteraard dat hij nog door zo weinig browsers wordt ondersteund. Apple Safari voor Windows en Macintosh doet het inmiddels, maar de meest gebruikte browsers zoals Internet Explorer 7 en Mozilla Firefox 2 kennen @font-face niet. Hopelijk komt hierin met de nieuwe golf browserversies die ons binnenkort te wachten staat (Internet Explorer 8, Firefox 3 en 4) verandering. Dan zal de variatie van lettertypen op websites ongetwijfeld snel toenemen.

Figuur 1: De pagina met embedded fonts wordt in Internet Explorer weergegeven als plain-old Verdana tekst

Figuur 2: Pas in Safari toont font embedding haar schoonheid. Bekijk de broncode van deze demopagina voor de HTML- en CSS-code (klik op de afbeelding om de site te openen)

Meer informatie

In de afbeeldingen heb ik het open source lettertype GrauBlauWeb gebruikt. Dit is een lettertype dat door fonts.info gratis ter beschikking wordt gesteld.

Ik hoop dat je er wat aan hebt, veel succes er mee!

Peter Kassenaar
-- 23 april 2008

 

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

 

Reacties

16-02-2009 02:40 #

Ondertussen bijna een jaar verder en nog steeds kunnen we niets aan met font-face, en daar gaat niet bijster veel verandering in komen als ik de mensen van Mozilla en Microsoft moet geloven.

www.webdirections.org/.../

The following is not correct, in the sense that it does not work for Opera 9.5 and Firefox 3.1 - only Safari 3.1 allows @font-face linking to TrueType files, and IE @font-face linking to EOT files. So the technique outlined should work, but only for those browsers.

Ik haal ook nog even sIFR aan. Ik weet niet of het zo bekend is, maar voor titels is het alleszins een mooi alternatief.

http://www.mikeindustries.com/blog/sifr/

Salvi Belgium

01-09-2009 01:14 #

Je kunt al 10 jaar fonts embedden met IE via embedded open fonts.

Rob

26-11-2009 06:24 #

I found your blog from aol and it is awesome. Thanks for providing such an informative post!!

free game online

Reacties zijn gesloten