In den letzten Wochen habe ich viel experimentiert und nach der besten Lösung gesucht, Non-Websafe Fonts im Webdesign zu verwenden. @font-face ist dabei die einfachste Möglichkeit, da hier nur CSS benötigt wird und nicht Flash oder Javascript, wie z.B. bei Cufón oder sIFR.

Alle modernen Browser unterstützen das Einbetten von Schriften mit @font-face bereits, und für ältere Browser kann man immer auf eine Websafe-Font wie Arial, Verdana oder Georgia zurück greifen. Eigentlich in Ordnung, wenn man sich erst einmal an den Gedanken gewöhnt hat, dass eine Webseite nicht in jedem Browser gleich angezeigt wird.

@font-face Free-Font Kits

Bevor du eine Schrift einbettest, musst du dich informieren, ob das Einbetten mit @font-face für deine Wunsch-Schrift erlaubt ist. Infos dazu findest du in der Schrift-Lizenz. Am einfachsten ist es, du wählst eine Free-Font. Auf Font-Seiten wie Fontsquirrel findest du jede Menge kostenlose Schriften, die bereits mit einem @font-face Kit fürs Einbetten vorbereitet sind.

@font-face Schriften einbetten

Das Kit enthält die generierten Schriften TrueType .ttf, und OpenType .otf für Firefox, Safari, Chrome, und Opera und .eot für den Internet Explorer. Außerdem bekommst du eine Beispiel HTML-Datei und den CSS-Code gleich mit dazu.

Fontsquirrel @font-face Generator

Ist deine Wunsch-Schrift noch nicht als fertiges Kit zu haben, kannst du den @font-face Generator von Fontsquirrel verwenden.

@font-face Schriften einbetten

Hier lädst du einfach deine Schrift von deinem Computer hoch (vorher solltest du unbedingt die Lizenz durchlesen), und markierst die Formate, in die du deine Schrift konvertieren möchtest. Zusätzlich zu TrueType, OpenType und EOT gibt es noch SVG für iPhones und WOFF für Firefox ab Version 3.6.

Mit einem Häkchen bei »Subsettings« kannst du noch bestimmen, welche Sonderzeichen du benötigst.

Die generierten Schriften musst du jetzt lediglich auf deinen Server hochladen (ich sortiere sie immer in einen eigenen »fonts«-Ordner).
Jetzt fügst du den Beispiel CSS-Code aus dem Kit am Anfang deiner CSS-Datei ein (vergiss dabei nicht den Pfad anzupassen, falls du die Font-Formate in einen extra Ordner einsortiert hast).

Beispiel-Code für die Free-Font CalligraphyFLFRegular:

[php]
@font-face {
font-family: ‘CalligraphyFLFRegular’;
src: url(‘CalligraphyFLF.eot’);
src: local(‘CalligraphyFLF Regular’), local(‘CalligraphyFLF’), url(‘CalligraphyFLF.ttf’) format(‘truetype’);
}
[/php]

Anschließend kannst du die Schrift ganz normal mit font-family einfügen. Du solltest aber immer eine websafe-font als Alternative auswählen.

[php]
h1.fontface {font-family: ‘CalligraphyFLFRegular’, Arial, sans-serif;}
[/php]

Das war’s schon! So einfach kannst du deine Lieblingsschrift in dein neues Webdesign einbauen :-)

@font-face Schriften einbetten

Die CalligraphyFLFRegular wird in GoogleChrome angezeigt.

Hast du eine Frage zum Schriften-Einbetten mit @font-face, oder kennst du besonders schöne Free-Fonts, die man mit @font-face einbetten kann? Dann schreibe mir doch, ich freue mich auf deine Tipps!