Schriften mit CSS einbinden
Mit CSS3 können Schriften die nicht auf dem System installiert sind eingebunden werden.
Alle modernen Browser unterstützen das True Type Format (.ttf), welches die Integration einer Schrift in die eigene Website ermöglicht. Die Schriftart muss die Lizenzbedingung für eine Benutzung als Webfont gestatten.
font-face Beispiel
@font-face ist die CSS Regel welche erlaubt eine bestimmte Schrift von einen Server herunterzuladen, um diese Schrift für eine Website zu renden, wenn der Benutzer diese nicht installiert hat.
@font-face {
font-family: "LINTSEC";
src: url("/files/fonts/lintsec.ttf");
}
Wenn die Schrift geladen ist, kann sie jedem Element zugeteilt werden. Im Beispiel wird der h2 mit der class="lins" den Fontstyle LINTSEC haben. Der font-family Name kann frei gewählt werden.
h2.lins {
font-family: LINTSEC, Helvetica, Arial, sans-serif;
}
Die Schrift kann auch direkt ins css importiert werden.
Mit Google Webfonts, sind die Schriften auf dem Google-Server und werden vom der CSS-Datei importiert. Die Schrift kann jedem Element oder mit einer CSS-Klasse einem Element zugeteilt werden.
@import url(http://fonts.googleapis.com/css?family=Righteous);
h1{font-family: 'Righteous', cursive;}
Internet Explorer
Internet Explorer stellt Schriften nur im .eot Format dar. Internet Explorer 7 oder IE8 unterstützen .ttf Fonts noch immer nicht. Eine spezielle Konvertierung des Fonts in ein .eot Format wird nötig.
Am einfachsten mit TTF to EOT Font Converter.
@font-face {
font-family: "LINTSEC";
src: url("/files/fonts/lintsec.ttf");
}
@font-face {
font-family: "LINTSEC-IE";
src: url("/files/fonts/lintsec.eot");
}
h2.lins {
font-family: LINTSEC-IE, LINTSEC, Helvetica, Arial, sans-serif;
}
Cross Browser
Beide Fonts in einer @font-face Angabe laden.
Hier muss die Syntax sehr genau sein, keine Hochkommas in bei font-family und url.
@font-face {
font-family:lintsec;
src: url(/files/fonts/lintsec.eot); /* EOT for IE */
src: local("real FontName"),
url(/files/fonts/lintsec.ttf) format("truetype"); /* non-IE */
}
h2.lins {
font-family: lintsec, Arial, sans-serif;
font-size:50px;
}