Eigene Fonts in Webseiten einbinden

Mit HTML5 und der CSS3-Regel @font-face ist das Einbinden von eigenen Schritarten (engl. fonts) zum Kinderspiel geworden. Das Einzige was man beachten muss, ist das Format der Schriftart. Internet Explorer 9 und aufwärts unterstützten nur das von Microsoft und Adobe entwickelte OpenType-Format. Alle anderen HTML5-Browser kommen mit TrueType Fonts (TTF) zurecht. Zum Glück gibt es einen TTF to EOT Font Converter, der einem aus einer TTF-Datei eine EOT-Datei erzeugen kann. Hat man beide Formate vorliegen, kann man die Schriftarten deklarieren und verwenden.

Beispiel:

1
2
3
4
5
6
7
8
9
10
11

/* Use Embedded OpenType (EOT) for Internet Explorer 9+
 * Use TrueType Font (TTF) for all other CSS3 browsers
 **/
@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url('./fonts/my_font.ttf'), url('./fonts/my_font.ttf');
}
 
body {
  font-family: 'MyFont';
}