Bitte warten...

Serverseitige Schriftarten verwenden

In den ersten Jahren des Internets waren Webdesigner bei der Gestaltung eines Layouts auf eine Handvoll Schriftarten beschränkt, die einigermaßen zuverlässig auf allen Plattformen funktionierten, da eine Schriftart, die über die Eigenschaft font-family definiert wird, immer auf dem Rechner des Besuchers installiert sein muss, da sonst irgend ein anderer Fallback-Font des Browsers bzw. des Systems verwendet wird.

Mit der CSS-Eigenschaft @font-face ist es nun aber mittlerweile bei allen gängigen Browsern möglich, serverseitig verfügbare Fonts zu verwenden, ohne dass diese erst heruntergeladen und installiert werden müssen. Wenn der folgende Blindtext mit dem Bild darunter übereinstimmt, unterstützt der von Ihnen verwendete Browser die Eigenschaft @font-face. (Damit der Test ein zuverlässiges Ergebnis liefert, solltest du den Font ›OCR-A‹ nicht auf Ihrem Rechner installiert haben.)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Referenzgrafik:

Der folgende CSS-Code stellt ein Beispiel zum Einbinden von TrueType-Fonts dar. Es ist zu beachten, dass für jede Art der Auszeichnung (normal, kursiv, fett, fettkursiv) sowie einzelne Schriftschnitte (condensed, normal, expanded, etc.) eine individuelle Datei referenziert werden muss.

Es ist möglich, der Schrift einen eigenen Namen zuzuweisen, der dann beim Einbinden verwendet werden kann. Dies hat den Vorteil, dass man in dem Fall, dass man die Schriftart ändern möchte, lediglich die Dateireferenz in der @font-face-Regel ändern muss, aber nicht zusätzlich noch sämtliche Vorkommen eines Schriftnamens in den Style-Definitionen.

Code kopieren
@font-face {
  font-family: 'Meine tolle Schrift';
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src: url('/fonts/DejaVuSerif.ttf');
}
@font-face {
  font-family: 'Meine tolle Schrift';
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  src: url('/fonts/DejaVuSerif-Bold.ttf');
}
@font-face {
  font-family: 'Meine tolle Schrift';
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  src: url('/fonts/DejaVuSerif-Italic.ttf');
}
@font-face {
  font-family: 'Meine tolle Schrift';
  font-weight: bold;
  font-style: italic;
  font-stretch: normal;
  src: url('/fonts/DejaVuSerif-BoldItalic.ttf');
}
@font-face {
  font-family: 'Meine tolle Schrift';
  font-weight: normal;
  font-style: normal;
  font-stretch: condensed;
  src: url('/fonts/DejaVuSerifCondensed.ttf');
}

/* eingebunden wird die Schrift dann z.B. so: */

p { font-family:'Meine tolle Schrift',Georgia,serif; }

Man muss darauf achten, dass die Lizenzbedingungen der Schriftart das Einbinden in eine Website erlauben!

Firefox erlaubt nur Fonts, die sich auf dem gleichen Server befinden, es sei denn Cross-site HTTP requests sind aktiviert (s. auch @font-face).