cool IT Team-Blog

Font-Embedding via CSS

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?
Verfasst: 19.01.2011 18:08:38 von Robert Stefan
Tags: CSS, Font Embedding

1


Kommentare
Sabine Stiller
Wichtig beim Einbinden von Schriftarten ist auch, die rechtliche Seite nicht zu vergessen.

Bindet man eine Schriftart in die Website ein, wird sie mitgeschickt. Das darf man natürlich nicht mit allen Schriftarten, die auf dem eigenen Rechner installiert sind, so ohne weiteres machen.

Dazu muss die Schriftart entweder lizenzfrei sein oder die Lizenz, die man hat, berechtigt zur Verteilung über das Internet (with Distribution).

Nähere Infos gibt's in der Regel auf den Downloadseiten der Schriften im Internet. Dort wird die Lizenz in der Regel ausgewiesen, damit man nachher weiß, was man mit der Schrift alles machen darf.
25.01.2011 22:11:38

Einen Kommentar schreiben



 Security code