Eigene Schrift über CSS einbinden

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

Browser	EOT	TTF	OTF	SVG	WOFF
Internet Explorer	●
Mozilla (und ähnliche)		●	●
Chrome		●		●
Opera und Safari		●	●	●
Firefox 3.6 und höher		●	●		●

Bewertung

War für dich diese Seite hilfreich?

Bitte stimme unten ab.

Ja

0

Nein

0

Es wurden seit Erstellung der Umfrage am 06:01, 12. Jul. 2017 0 Stimmen abgegeben.

poll-id 3B83A18769A0F70399057311EB96FC97