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.
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.
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:
@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF Regular'), local('CalligraphyFLF'), url('CalligraphyFLF.ttf') format('truetype');
}
Anschließend kannst du die Schrift ganz normal mit font-family einfügen. Du solltest aber immer eine websafe-font als Alternative auswählen.
h1.fontface {font-family: 'CalligraphyFLFRegular', Arial, sans-serif;}
Das war’s schon! So einfach kannst du deine Lieblingsschrift in dein neues Webdesign einbauen :-)
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!
Hi,
sehr übersichtlich geschrieben, damit dürfte das wirklich jeder hinkriegen. Danke für diesen Artikel! :-)
@Wolfgang: Vielen Dank für deinen Kommentar. Freut mich sehr, dass du meine Beschreibung hilfreich findest :-) Ja, @font-face ist wirklich gar nicht so schwierig :-)
Hallo,
zwar für einige nichts neues aber habt ihr aber wieder gut beschrieben.
Die Schriftensteuerung über font-face ist mir weitaus sympatischer als per Flash bzw. sIFR. - zumindest dürfte sie sich gegen deaktivierten Flash und Java-Script durchsetzen.
Ist denn zufällig auch bekannt ob es dafür auch ein WordPress-Plugin gibt?
Für weitere Schriften kann man sich vielleicht auch »dafont.com« ansehen.
Macht weiter so,
viel Spaß und Muse für weitere Beiträge!
Micha
Hallo Ellen,
Ich find’s so klasse, dass sich die Möglichkeiten in typografischer Hinsicht dadurch so erweitern. Ein bisschen Abwechslung mit neuer Websafe Typo ist echt gut :)
Vielen Dank für diesen interessanten Artikel. Ich finde @font-face auch super. Sicherlich einfacher als die Alternativen, wie Micha schon erwähnt hat. Auf meiner Website habe ich die Schriftart Bienetresocial auf diese Weise eingebunden. Funktioniert super :)
Vielen Dank für eure tollen Kommentare, es freut mich, dass der Artikel so gut ankommnt :-)
@Micha: Ja, ich denke auch @font-face wird sich gegen die anderen Methoden durchsetzen. Mhh, ich weiss nicht, ob es ein Plugin gibt, werde aber mal recherchieren.
@Manu: Yep, lets start designing! Jede Menge Spaß mit neuen Typos, das gefällt mir auch :-)
@Barbara: Bienetresocial gefällt mir echt super auf deiner Webseite :-) und ein bisschen Abwechslung bei den Schriften tun soooooooo gut!
Sehr guter Artikel. Merci!
Danke auch für den Artikel - klappt auch super, habe allerdings das Problem, dass mir der Firefox (3.6) die hinterlegte Schrift für ein Projekt nicht anzeigt..kann da jemand helfen?!
Hallo Carina,
vielen Dank für deinen Kommentar. Mhhh, für die Firefox-Anzeige benötigst du die Font-Dateien im Truetype-Format (mit der Endung .ttf) Hast du diese mit übernommen und auch im CSS darauf mit dem richtigen Pfad verwiesen? Wenn du einen Link zu der Seite schickst, kann ich gerne noch einmal reinschauen :-)
Viele Grüße,
Ellen
Hi Ellen,
das Projekt ist leider noch geheim;o).
Für Firefox ist ja vor allem .WOFF wichtig. Habe aber alle gängigen Formate (ttf, otf, svg, woff) auf dem Server zu liegen. Die CSS verweist auch mit richtigen Pfaden darauf. In anderen Browsern klappt es auch, nur im Firefox wird mir leider nicht mein Font angezeigt..
So ich nochmal:o)..hab den Fehler gefunden, mußte in der CSS bei font-family sowohl meinen Font als auch eine Alternativschrift plus die Angabe »sans-serif« hinzufügen. Für die anderen Browser hat die Angabe meines Fonts/Alternativfonts gereicht.
Danke trotzdem!
Wenn Firefox Probleme bereitet, kann es daran liegen, dass die Deklaration für den Internet Explorer nicht an erster Stelle notiert ist, alle übrigen Browser versuchen dann, die eot-Datei zu laden und das funktioniert nicht.
Hallo,
besteht auch die Möglichkeit diese neue Schriftart im Editor von Joomla zu nutzen?
Also quasi den gewünschten Text im Beitrag markieren -> neue Schriftart auswählen -> fertig :) ?
Dankeschön für jeden Hinweis und Grüsse, Stephanie