Fonts einbinden

Will man Fonts, die nicht auf dem Rechner des Besuchers einer Website vorhanden sind, auf der Website verwenden, greift man in letzter Zeit (wieder) auf die CSS Angabe @font-face zurück. Um diese Technik verwenden zu können, muss die Schriftart zunächst in ein geeignetes Format konvertiert und auf dem Server abgelegt werden. Firefox und Chrome können mit dem zukunftsweisenden Format „WOFF“ umgehen. Um den Internet Explorer (< Version 9) zu bedienen hält man zusätzlich eine Fontdatei im Format „eot“ vor, für den Opera und Safari das Format „svg“.

Das Umwandeln der Schriftart übernimmt der @font-face Kit Generator: http://www.fontsquirrel.com/fontface/generator

Wichtig ist darauf zu achten, dass die Schrift frei ist, bzw. dass die Lizenzvereinbarungen eine derartige Nutzung zulassen. Bei den meisten kommerziellen Schriften dürfte ein Einsatz im Web mit dieser Technik nicht erlaubt sein. Man ist auf der sicheren Seite, wenn man sich eine lizenzfreie Schrift aussucht, z.B. hier: http://www.fontsquirrel.com/ oder hier: http://www.dafont.com/

Eingebunden wird das Ganze dann in der CSS Datei mit folgenden Angaben:

@font-face {
    font-family: 'PTSansNarrowRegular';
    src: url('ptn57f-webfont.eot');
    src: url('ptn57f-webfont.eot?#iefix') format('embedded-opentype'),
         url('ptn57f-webfont.woff') format('woff'),
         url('ptn57f-webfont.ttf') format('truetype'),
         url('ptn57f-webfont.svg#PTSansNarrowRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
h1{
   font-family: 'PTSansNarrowRegular';
}

Beispiel

Gegebenenfalls muss man den absoluten Pfad zu den Fontdateien eintragen.

Als Alternative sei noch auf die google Font Api verwiesen http://code.google.com/intl/de-DE/apis/webfonts/. Hier kann man lizenzfreie Schriften entweder sofort einbetten oder auch herunterladen.

Links:

Ausführlich bei drweb: http://www.drweb.de/magazin/web-typografie-font-face-einbindung-selbst-gemacht/.
Schöner Artikel von Paul Irish: http://www.html5rocks.com/tutorials/webfonts/quick/
Im Smashing Magazine: http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

Aktueller Beitrag, bzw. eine Übersicht, hier: www.thedesignwork.com/5-simple-ways-to-embed-fonts-in-web-pages