Tutorial

Eigene oder andere Fonts auf der Website benutzen

Arial, Verdana, Times New Roman sind die Standardschriftarten im Web.
Was aber, wenn man einen anderen Font benutzen möchte?
Hat der Besucher den Font nicht installiert, werden entsprechende Texte in einer Standartschrift dargestellt. Um jeden Besucher aber das Gleiche zu präsentieren, kann man eine eigene Schriftart im CSS definieren. Damit die Website mit dem Font* sowohl von CSS3-Browsern (u.a. Firefox, Safari, Chrome) als auch vom Internet Explorer richtig gerendert werden kann, muss der Font sowohl als TTF als auch als EOT vorliegen und entsprechende Definition im Stylesheet gemacht werden:

/* Eigene Schriftart */
@font-face {
font-family: eigeneSchriftart;
src: url("pfad/meinFont.ttf")
}
@font-face {
font-family: eigeneSchriftart;
src: url("pfad/meinFont.eot")
}

Anschließend können wir im Stylesheet definieren, für welche Elemente die hinterlegte Schriftart genutzt werden soll - in meinem Beispiel wird die hinterlegte Schriftart auf alle h1-Überschriften im div mit der Klasse post benutzt:

div.post h1 {
font-family: eigeneSchriftart, Verdana, Arial, sans-serif;
font-size: 14px;
}

Weiterführende Links:
dafont.com - Schriften herunterladen
kirsle.net - Online-Konverter TTF -> EOT

* Beim Benutzen eines Fonts bitte unbedingt darauf achten, dass man keine Copyrights verletzt!

Dieses Tutorial bewerten

zurück

Navigation einschalten