Vielleicht möchten Sie sich nicht darauf verlassen, dass eine bestimmte Schriftart auf dem Betriebssystem des Webseitenbesuchers vorhanden ist oder Sie möchten zwecks Abwechslung eine besondere Schrift auf Ihrer Seite haben und nicht immer auf die altbekannten Standardschriften zurückgreifen!? Dafür kann man jetzt externe Schriften (Webfonts) einbinden. Dazu gibt es zwei verschiedene Möglichkeiten:

  1. Sie haben eine bestimmte Schrift in einer der (unten angegebenen) Formate vorliegen. In diesem Fall binden Sie die Schrift mit @font-face in die CSS-Datei ein. Hierbei ist es wichtig darauf zu achten, dass dies in der Lizenz der entsprechenden Schrift ausdrücklich erlaubt ist!
  2. Sie möchten eine der freien Schriften nutzen. In diesem Fall kann die Schrift über eine Referenzierung zu einem der Anbieter (siehe unten) in den HEAD-Bereich der HTML-Datei eingebunden werden.

Schriften einbinden mit @font-face

WOFF ist das am meisten zu empfehlende Schriftformat, da dieses Format für das Web komprimiert ist und mit nahezu allen aktuellen Browsern kompatibel ist (allerdings nicht kompatibel mit alten Internet Explorern). Weitere Formate sind: EOT (funktionieren NUR in den alten Internet Explorern), TTF & OTF (sind eigentlich keine Webschriften sondern ganz normale Schriftdateien) und SVG-Fonts. Möchten Sie ganz sicher sein, dass die Schriftart in allen Browsern funktioniert, ist es am besten, mehrere Dateien zur Verfügung zu stellen und wie folgt nacheinander anzugeben:

Anschließend kann die Schriftart schon mit der Eigenschaft font-family verwendet werden.

Achtung! Schriften sind lizenzrechtlich geschützt. Prüfen Sie unbedingt vor dem Einbinden der Schrift in die Website, ob das web embedding erlaubt ist! Da die Browser des Webseitenbesucher die eingebundene Schrift automatisch bei jedem Besuch herunterladen, würden Sie bei nicht erlaubtem web embedding, unrechtmäßig ständig Raubkopien anfertigen.

Schriften über einen Link einbinden

Möchten Sie eine der freien Schriften nutzen, können Sie sich beispielsweise bei folgenden Anbietern von Webfonts nach einer geeigneten Schrift umsehen:

  • google.com/fonts
  • edgewebfonts.adobe.com
  • fontsquirrel.com  Hier gibt es übrigens auch einen Webfontgenerator mit dem aus Schriften – sofern lizenzrechtlich erlaubt – Webschriften erzeugt werden können. Ist auch praktisch, um sich den oben abgebildeten Code generieren zu lassen.

Vorgehensweise anhand dem Beispiel der google-Webfonts:

  • Haben Sie eine geeignete Schrift auf der Website des Anbieters gefunden, dann klicken Sie direkt darunter auf den Quick-use-Button.
Google Fonts - www_google_com_fonts

Google Fonts: Quick-use

  • Nun setzen Sie ein Häkchen bei den Schriftschnitten, die Sie einbinden möchten. Achtung! Je größer Ihre Auswahl hier ist, desto stärker wirkt sich das auf die Ladezeit Ihrer Website im Browser aus. Wählen Sie also am besten nur die Schnitte aus, die Sie auch wirklich benötigen. Wenn Sie aber beispielsweise kursiven oder fetten Text in dieser Schriftart einsetzen möchten, dann sollten Sie diese Schriftschnitte auch tatsächlich mitladen. Denn wenn Sie später um etwas z. Bsp. fett zu machen nur font-weight:bold; angeben, dann kümmert sich der Browser selbst um die Fettung, was nicht unbedingt so hübsch aussieht, wie man sich das vorstellt.
Google Fonts Schriftschnitt wählen

Google Fonts Schriftschnitt

  • Jetzt kopieren Sie den angegebenen Link und fügen ihn im HEAD-Bereich Ihrer HTML-Datei ein.
Google Fonts Schriftgewicht wählen

Google Fonts Link

  • Nun kann die Schriftart schon verwendet werden. Dies geschieht wie gehabt mit der Eigenschaft font-family. Sie können den CSS-Befehl von diesem Beispiel unten kopieren und entsprechend in die CSS-Datei einfügen.
Google Fonts Quick-use

Google Fonts CSS-Befehl

Übrigens! Empfehlenswert ist es den font-stack (Schriftstapel) noch mit sich ähnelnden Schriften zu erhöhen, also noch mehr Fallback-Schriften anzugeben, die angezeigt werden, falls die gewünschte Schrift nicht geladen werden kann (oder es dauert bis die gewünschte Schriftart geladen ist ->flash of unstyled Text). Je nachdem, ob Sie eine Serifenschrift gewählt haben oder nicht, ist es sinnvoll, dass die Fallback-Schriften auch im gleichen Stil sind und als letztes entsprechend serif oder sans-serif angegeben wird.

Wenn Sie sich nun den Quelltext der HTML-Datei anzeigen lassen und den Link von google anklicken…

Schriften einbinden: Quelltext

Quelltext HTML-Datei

… sehen Sie, dass das eigentlich nichts anderes ist, als bei der zuvor beschriebenen Einbindung der Schrift über @font-face (nur das hier die Schriftdateien direkt aus dem Netz geladen werden):

SchriftenGoogle_link

CSS über google

Sie könnten diesen gesamten Code auch kopieren und in die CSS-Datei einfügen. Anschließend kann der Link aus der HTML-Datei entfernt werden. Der komplette Code lautet: