Um spezielle Schriftarten in Webseiten zuverwenden gibt es mehrere Möglichkeiten:

  1. Man erzeugt aus dem Text Bilder und bindet statt dem Text diese Bilder ein. – Diese Methode hat den Nachteil, dass man nur sehr schwer Texte austauschen kann und dass generell das Erzeugen dieser Bilder relativ aufwendig ist.
  2. Man bedient sich diverser Image Replacement Bibliotheken, die basierend auf diversen Frameworks beim Aufruf einer Seite aus dem Text Bilder generieren. – Diese Methode ist zwar besser für dynamische Inhalte, ist jedoch relativ aufwendig, da die Bilder bei jedem Seiteaufruf neu berechnet.
  3. Man nutzt die Möglichkeiten von CSS3 und bindet die Schriftart mittes @Font-Face in die Seite ein. – Dadurch wird die Schriftart als Ressource beim Seitenaufruf mitgeschickt (wie JavaScripts und Bilder), was sehr einfach in der Umsetzung und beim Darstellen der Seite ist.

Und so einfach funktioniert Font-Embedding:

Man definiert die eigene Schriftart im Stylesheet mittels des Selektors @font-face:

@font-face {  
  font-family: myFontName ;  
  src: url( /pfad/zur/schrift.ttf ) format("truetype");  
}  



Danach kann man die eigene Schriftart wie jede andere auch den Elementen über CSS-Klassen zuweisen:

.myFontName { font-family: myFontName , verdana, helvetica, sans-serif;  
}  

Diese Vorgehensweise funktioniert bei allen modernen Browsern, außer dem Internet Explorer. Dieser unterstützt nämlich das Einbinden von Schriftarten als TTF nicht. Umgehen kann man das Problem in dem man für den Internet Explorer die Schriftare in das Format EOT umwandelt und dieses dann einbindet. Im Netz gibt es diverse online converter, die eine TTF-Datei nach OTF konvertieren können (z.B.: http://www.kirsle.net/wizards/ttf2eot.cgi). Eine Definition der Styles, die für alle Browser funktioniert sieht dann wie folgt aus:

@font-face {  
  font-family: " myFontName ";  
  src: url( /pfad/zur/schrift.eot ); /* IE */  
  src: local(" FontName "), url( /pfad/zur/schrift.ttf ) format("truetype"); /* non-IE */  
}  

Ist doch cool, oder?