Altes leidiges Problem: Ihr wollt eine spezielle Schriftart im Web benutzen, aber seit Jahren wird gepredigt, man solle nur Standardschriftarten verwenden. Gut man könnte sich nun damit abfinden – aber ehrlich – wir leben im Jahr 2011 und so langsam sollte es doch möglich und legitim sein, das Schriftbild jenseits von Arial, Times, Helvetica und Co benutzen zu können. Die gute Nachricht: Ihr könnt und das nicht erst seit gestern. Das Benutzen eigener Schriftarten erfährt in den letzten Jahren einen neuen Aufschwung und lässt sich mittlerweile auch recht zuverlässig in allen möglichen Browsern (Firefox, Chrome, Opera, Safari sowie auch Internet Explorer) nutzen.Zunächst solltet ihr erst einmal die Schriftart haben, welche Ihr benutzen wollt. Das bedeutet entweder ihr habt eine für das Web freie oder mit entsprechenden Rechten erworbene Schriftart. Im allgemeinen solltet Ihr prüfen, inwieweit ihr die aufgeführte Methode rechtlich verwenden dürft. Ich übernehme dafür keinerlei Haftung.
Habt Ihr also eure Schriftdatei geht einfach auch folgende Seite:
http://www.fontsquirrel.com/fontface/generator
Ladet dort eure Datei hoch. Ist dies erledigt geht auf die Experteinstellungen und setzt die Häkchen nach euren Vorstellungen. Sinnvoll ist es auf jeden Fall bei den „Font Formats“ alle Häkchen zu lassen um wirklich jeden möglichen Browser zu unterstützen.
Desweiteren würde ich euch empfehlen den Haken bei WebOnly zu setzen. Damit wird verhindert, dass man die Schrift vom Server runterlädt und einfach bei sich auf dem Rechner installiert.
Unter „CSS Options“ könnt ihr die Pfade noch Base64 encodieren, was aber wenig sinn macht, wenn es nicht anderweitig zu Problemen kommen sollte.
Habt ihr alles euren Vorstellungen entsprechend eingestellt müsst ihr noch bestätigen, das ihr die Berechtigung habt um die Schriften zu konvertieren und könnt dann auf „Download Your Kit“ klicken.
Nun kommt der „kreative“ Teil. Um die Schriftarten nutzen zu können, müsst ihr eine neue font-family definieren. Dies passiert über folgenden Code:
@font-face {
font-family: 'myFont';
src: url('myFont-webfont.eot');
src: url('myFont-webfont.eot?#iefix') format('eot'),
url('myFont-webfont.woff') format('woff'),
url('myFont-webfont.ttf') format('truetype'),
url('myFont-webfont.svgz#webfont4KnpXQe7') format('svg'),
url('myFont-webfont.svg#webfont4KnpXQe7') format('svg');
font-weight: normal;
font-style: normal;
}
Zum Glück wird das Stylesheet gleich in der Zip-Datei mitgeliefert (stylesheet.css), so dass ihr ggf. nur noch ein paar Pfade anpassen müsst und den Code so wie er ist in euer Stylesheet kopiert.
Kopiert nun noch die konvertierten Schriftarten in das Verzeichnis welches ihr bei den ganzen url() angegeben habt, im obigen Beispiel also in das Rootverzeichnis eures Webauftritts.
Um die neuen Schriften zu nutzen, ruft ihr sie einfach im entsprechenden Element als font-family auf, zum Beispiel:
p {
font-family: 'myFont';
}
Das war dann auch schon alles. Weitere Erklärungen über die ganzen Optionen beim Erstellen der Schriftdateien findet ihr unter dem Generator auf oben verlinkter Seite oder auf:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
welche ebenfalls bei fontsquirrel verlinkt ist.