CSS: Eigene Schriften einbinden

Die Überschriften auf dieser Site bestehen aus einem Font, den ich per CSS eingebunden und entsprechend den Joomla-Klassen zugewiesen habe.

Leider benutzen der Internet Explorer von Microsoft und die meisten anderen Browser unterschiedliche Fonttypen.
Für die meisten Browser reicht ein True-Type-Font (TTF) aus. Der IE benötigt aber einen Open-Type-Font (EOT).

Die allermeisten Schriften, die sich im Internet finden, sind TTF-Schriften. Es gibt aber einige Konverter, die einem eine TTF-Datei in eine EOF-Datei wandelt. Einen solchen Konverter findet man beispielsweise hier:

http://www.kirsle.net/wizards/ttf2eot.cgi

Hat man seine Schriften zusammen, lädt man diese am besten direkt in das CSS-Verzeichnis des Templates und schreibt dann am Anfang der CSS-Datei dieses hier:

/* Für den IE */
@font-face {
 font-family:meine_schrift;
 src:url(fruitopia.eot);
}

/* Für alle anderen Browser */
@font-face {
 font-family:meine_schrift;
 src:url(fruitopia.ttf);
}

Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift:

h3 {
font-family: meine_schrift;
}

"meine_schrift" ist ein beliebiges Wort, welches den verwendeten Font kennzeichnet. Man kann also sowohl den Fontnamen (ohne ttf oder eot) benutzen oder einfach "apfelkuchen" schreiben. Wichtig ist nur, dass das Wort am Anfang beim "font-face" identisch mit dem Benutzten bei der Zuweisung ist.

Man sollte aber vorsichtig sein, mit den eigenen Schriftarten. Zum einen ist es gar nicht so einfach, eine passende zu finden, welche in den Webauftritt passt und zum anderen brauchen Schriften auch einiges an Performance. Also nicht unterschätzen und sparsam damit umgehen.

In meinen Nützlichen Links finden sich einige Webseiten mit freien Fonts.