Es ist keine Seltenheit, dass ein Layout für eine Website besondere Schriften enthält die zwar gut aussehen, aber leider keine Standard Schriften sind, so dass diese auf den meisten Geräten nicht da gestellt werden können.
Man kann allerdings die Schriften auf dem Server abspeichern und in die Website einbinden, so dass diese von Geräten die nicht über die Schriften verfügen nachgeladen werden können. Dafür müssen die TTF-Dateien der Schriften auf den Server geladen und die Schriften in die CSS-Datei implementiert werden.

Beispiel an Hand einer einzelnen Schrift:

@font-face {
font-family: Frutiger Roman;
src: url(http://www.beispielseite.de/template/font/frutiger_roman.ttf);
}

Mit „font-family“ definieren wir die Bezeichnung unserer Schrift, die wir später einfach wie gehabt in unserer CSS-Datei mit „font-family“ verwenden, der Name ist dabei beliebig. Das „src“ gibt den Pfad zu der neuen Schrift an.

Tipp: Man sollte keine Leerzeichen im Datei-Namen haben da es sonst unter umständen nicht funktioniert.  Beispiel: Frutiger Roman.ttf umbenennen in frutiger_roman.ttf.

Jetzt könnt ihr in euer CSS-Datei mit dem von euch gewählten Schrift-Namen arbeiten.

h1 {
font-family: Frutiger Roman, Arial, Helvetica, sans-serif;
}

Es schadet natürlich weiterhin nicht, wenn ihr für den Fall der Fälle Standard Ausweichschriften wie z.B. Arial oder Helvetica definiert.

Wenn Ihr mehrere Schriften hinterlegen wollt, dann muss für jede Schriftart eine neue „font-face“ definition mit Name und Pfad angelegt werden.

Vorsichtig: Ladet aus Urheberrechtlichen gründen, keine Schriften hoch, für die Ihr nicht die entsprechende Lizenz zum nutzen habt oder der Urheber nicht darauf hingewiesen hat, das diese Schrift frei verwendbar ist.