Eigene Schrift über CSS einbinden: Unterschied zwischen den Versionen

Version vom 30. August 2013, 12:14 Uhr

Um eine eigene Schrift auf die Internetseite einzubinden, muss diese in CSS definiert werden.

Hier ein Beispiel für die Einbindung der Schriftart jenna_sueregular:

@font-face {
    font-family: 'jenna_sueregular';
    src: url('fonts/jennasue-webfont.eot');
    src: url('fonts/jennasue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/jennasue-webfont.woff') format('woff'),
         url('fonts/jennasue-webfont.ttf') format('truetype'),
         url('fonts/jennasue-webfont.svg#jenna_sueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Die Schrift kann dann wie jede andere Schriftart in CSS verwendet werden:

h1 {
	font-family: jenna_sueregular;
	font-size: 40pt;
}

Font Formate

Für die unterschiedlichen Browser müssen verschiedene Formate vorliegen.

Über einen WebFont Generator können diese Formate einfach erstellt werden und das CSS inkl. einer Demo wird auch gleich mit generiert: FontSquirrel WebFont Generator

Unterstützte Formate der Browser