Die meisten Websurfer sind sich dessen wohl kaum bewusst, doch jeder Webdesigner wird früher oder später (und womöglich eher früher) mit einer Hürde konfrontiert, die fast so alt zu sein scheint wie das Web selber. Die Rede ist von dem Einsatz von Schriften im Internet.

So kann man standardmäßig nur die Schriften nutzen, die bei den „Usern“ tatsächlich lokal installiert sind. Aber Lösungen gibt es mittlerweile reichlich, nur sollte man sich der Konsequenzen klar bewusst sein.

Bevor wir ein paar interessante Lösungsansätze unter die Lupe nehmen, wie man tatsächlich schmucke und seltenere Schriftarten in seine Webprojekte einarbeiten kann: Aufgepasst vor unkontrolliertem Einsatz von Schriften! Es gilt die Faustregel des klassischen Grafikdesigns, dass man mit einem Minimum an Schriftfamilien auskommen sollte. Idealerweise nutzt man sogar nur eine Schriftfamilie und setzt vielmehr auf diverse Schnitte (Condensed, Light, Book, Bold,…).

Übrigens: Ohne „Tricks“ sind nur eine Handvoll Schriften nutzbar, die tatsächlich quasi auf jedem Rechner installiert sind. Hierzu gehören: Arial, Verdana, Times New Roman, Courier,u.a. Eine genaue prozentuale Aufstellung befindet sich hier.

Lösungsweg 1: Der Einsatz von Grafiken

Packt man in seinem Bildbearbeitungsprogramm seine Texte in Grafiken, umgeht man selbstverständlich jede Hürde in Zusammenhang mit Webschriften. Die Konsequenzen sind jedoch gravierend, wodurch dieser Lösungsansatz nahezu als unbrauchbar eingestuft werden kann: Die Grafiken verlangsamen die Seite, Google „versteht nur Bahnhof“ und unterscheidet nicht zwischen einem Urlaubsfoto und einem in eine Grafik eingebetteten Lauftext und eine Textänderung mutiert schnell zur Sisyphusarbeit.

Von einer möglichen Textvergrößerung und Barrierefreiheit braucht man in diesem Falle nun gar nicht zu reden. Diese Lösung eignet sich nur für einzelne Menüpunkte einer Navigation, vorausgesetzt man stattet die Grafiken mit „Alternativtext“ aus. Unser Tipp lautet jedoch: Klares nein, die Technik ist heutzutage weit genug das Problem wesentlich eleganter zu lösen.

Lösungsweg 2: Einsatz von CUFON

CUFON ist eine kostenlose Möglichkeit, im Grunde jedwelche Schriftart für seine Website zu nutzen. Gute „Freefonts“ gibt es im Internet zu Hauf und dank CUFON ist die Integration recht einfach. Das Prinzip ist schnell erläutert. Mittels des CUFON-Generators lädt man eine TTF-Schrift hoch. Diese wird anschließend in eine Javascript-Datei eingebettet (keine Sorge, automatisch). Diese Javascript Datei enthält alle Schriftinformationen. Lädt man nun sowohl das CUFON Basis-Script (1 Datei) hoch plus die Schrift-Datei, die man soeben generiert hat, braucht man lediglich beide Dateien in die Website einzubinden und dann kann man auch schon loslegen.

Die Darstellung der Schriften ist sauber und das Gesamtbild ist top. Allerdings hat auch diese Prozedur einen Haken: Via Javascript wird der Text zu einem dynamischen PNG umgewandelt…also doch „irgendwo“ wieder Grafiken. Selektierbar ist der Text ebenfalls nicht, daher nicht für alle Sorten von Sites geeignet. Und durch den Einsatz von Grafiken sind auch viele CSS3-Eigenschaften (Text-Shadow z.B.) nicht möglich.

Lösungsweg 3: Typekit und Google Fonts

Inzwischen gibt es mehr und mehr Möglichkeiten externe Dienste mit einzubeziehen. Der Internetgigant Google verfolgt hierbei seinen eigenen Ansatz und bietet ein paar Schriftfamilien kostenlos an. Die Einbindung ist extrem einfach (es gilt ebenfalls ein externes auf den Google-Servern gehostetes Javascript zu integrieren), doch ist die Auswahl an Schriften immer noch recht mager. Doch hier verspricht Google zukünftig nachzurüsten.

Zwar basieren Typekit und Google Fonts ebenfalls auf einer Javascript-Anbindung, doch sprechen wir in diesem Falle von einer sauberen Integration als Webfont. Der Vorteil? Es ist keine Fake-Schrift, sondern wird 100% eingebunden. So kommen keine PNG-Grafiken wie im Falle der CUFON zum Einsatz und die zukunftsträchtigen CSS3-Eigenschaften bleiben ebenfalls erhalten.

Typekit bietet auch einige kostenpflichtige (preislich überschaubare) Pakete an. Typekit kommt bei uns ebenfalls zum Einsatz und wir können es zu 100% empfehlen. Die Auswahl an sauberen Webschriften ist zudem riesig und die Onlineoberfläche sehr professionell und übersichtlich.

Typekit und Google-Fonts sind übrigens im Vergleich zum CUFON-Ansatz suchmaschinenfreundlicher, da sie nicht den Quelltext als solchen verändern wie CUFON. Korrekterweise sollte man jedoch sagen, dass CUFON einfach nur suchmaschinenuntauglicher ist und natürlich auch Lösung 3 das Suchmaschinenranking nicht verbessert.

Wichtig: Selbstverständlich gibt es auch noch andere Lösungsansätze, doch haben wir nur die oben genannten ausführlich testen und implementieren können, so dass wir nur auf diese eingegangen sind.

FAZIT:

Die Entwicklung geht rasant vorwärts und mittlerweile kann man über „Javascript-Brücken“ gute Resultate erzielen. Auf folgende Kriterien sollte man unbedingt achten wenn man Web-Fonts klug einsetzen möchte:

• Hab ich das Recht die Schrift auch wirklich im Web einzusetzen?
• Ist das Resultat suchmaschinenfreundlich?
• Kommen wirklich alle Browser mit der „neuen Schrift“ zurecht?
• Welche Standardschriften kann ich im CSS vorsehen als „Fallback“ falls die Javascript-Lösung nicht greift (z.B. bei deaktiviertem Javascript)
• Und zu guter Letzt: Ist die neue Schrift tatsächlich ein Plus für meine Website oder hätte es eine Standardschrift nicht auch getan?

Einige interessante Artikel zum Thema / Weiterführende Links:

• Die Google Web-Fonts: Beliebte Schriften und praktische Tipps
• Die kostenlosen Web-Fonts der Google Font API nutzen
• CUFON
• Typekit
• Google Web Fonts
• Die Verwendung von Web-Fonts über die Schriften-Bibliothek Typekit kurz erklärt (ElmaStudio)