Schriften einbetten mit Font-Face

Ich möchte euch in diesem Artikel zeigen, wie ihr ganz einfach beliebige Schriftarten im Web einsetzen könnt. Dafür wird kein Javascript benötigt. Alle modernen Browser unterstützen mittlerweile die Einbettung mit @font-face. Für ältere Browser kann man alternativ andere Schriftarten angeben, die verwendet werden, wenn die erste nicht erkannt wird.

Die Vorbereitung

Zuerst sorgen wir dafür, dass wir ein Kit von verschiedenen Schriftformaten haben. Auf Fontsquirrel findet man einen sehr guten Generator, bei dem man seine Schriftart importieren kann. Daraufhin wird die Schrift in die verschiedenen, webbasierten Formate konvertiert. Dabei sollte man unbedingt achten, ob beim Verwenden der Schrift Urheberrechte verletzt werden!

Die Anwendung

So, was jetzt? Wir haben verschiedene Dateiformate unserer Schriftart. Nun können wir diese in unserem Root ablegen. (Vorzugsweise einen neuen Ordner dafür erstellen, den wir beispielsweise “fonts” nennen.)

Nun müssen wir in unsere CSS-Datei. Hier muss folgender Code rein:

@font-face {
   font-family: Schriftbeispiel;
   src: local("Schriftbeispiel"), url("fonts/schriftbeispiel.eot") format("eot");
   src: local("Schriftbeispiel"), url("fonts/schriftbeispiel.otf") format("opentype");
   src: local("Schriftbeispiel"), url("fonts/schriftbeispiel.woff") format("woff");
}

Font-family beschreibt die Bezeichnung der Schriftart. Mit der Erweiterung local kann man außerdem dafür sorgen, dass zuerst auf dem eigenen, jeweiligen Rechner nach der Schriftart gesucht wird. Url beschreibt den Pfad unserer Schriftdatei und Format das Dateiformat. Im Anschluss kann man die eingebettete Schrift wie gewohnt mit font-family einfügen. Dabei sollte darauf geachtet werden, dass immer eine Websafe-Font als Alternative angegeben wird. Das kann beispielsweise so aussehen:

p {
    font-family:"Schriftbeispiel", Arial, Verdana;
}

Nun sollte die Schriftart ohne Probleme dargestellt werden.