dierck & meyer mediengestaltung

Schwarz auf Weiß. Drucksachen und mehr. Online seit 1999.

By

Kleine WordPress-Bonbons, Teil 4: Webfonts benutzen

Im Frühjahr hatten wir uns ja schon einmal an dieser Stelle mit Webfonts beschäftigt. Nur kurz zur Wiederholung: Warum soll man sie benutzen? Hauptsächlich deshalb, damit Text Text bleibt, mit allen Vorteilen – wie an erster Stelle dem, daß man danach suchen kann. Es war ja – und ist es sehr oft immer noch – üblich, etwas ausgefallene Typographie in einem Bildbearbeitungsprogramm unseres Vertrauens zurechtzubasteln und sie dann als Bild, teilweise im Frameset (nach HTML 5 technisch veraltet), teilweise in einer Tabelle in die Seite so einzubauen, daß sie rutschfest und standsicher von jedem Browser verdaut wird.

Wie das geht, hatten wir schon damals in groben Zügen erklärt: Eine CSS-Datei muß auf dem Server liegen und die Schriften bestimmten Stilen zuweisen. Das sieht dann beispielsweise so aus, wenn man eine Schrift namens »Abilene« einbinden will:

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

Och nö, wieso ist das denn wieder so kompliziert, rufen jetzt alle, und sie haben recht, meinen wir, aber darauf kommen wir gleich noch.

Die erwähnte CSS-Datei muß mit den Fontdateien auf dem Webserver liegen, am besten im gleichen Ordner. Das ist analog zum heimischen Rechner, wo ja auch Fontdateien an definierter Stelle liegen, damit das Schreibprogramm sie sehen kann. Damit der Browser erkennt, wo die CSS-Datei mit den Stildefinitionen und Zeichensatzzuweisungen liegt, braucht es in jeder HTML-Datei einen Verweis auf die CSS-Datei. Der steht irgendwo bei den anderen CSS-Anweisungen und sieht zum Beispiel so aus:

<link rel="stylesheet" href="ordner/cssdatei.css" type="text/css" charset="utf-8" />

In dieser HTML-Seite ist eine Reihe von Schriften beispielhaft aufgeführt. Das Laden kann etwas länger dauern, denn zur Darstellung muß der Browser nicht nur zuerst die HTML-Datei herunterladen und interpretieren, sondern sich danach auch noch alle benötigten Zeichensätze herunterladen, auslesen und auf die HTML-Datei anwenden. Diese Verzögerung ist aus unserer Sicht auch der Hauptnachteil der Webfont-Verwendung.

Warum nun sehen die Angaben in der CSS-Stildefinition so kompliziert aus?

Das liegt vor allem daran, daß die Browser nach verschiedenen Methoden vorgehen, um Webfonts darzustellen. Außerdem gibt es drei verschiedene Fontformate (.eot, .woff und .ttf), von denen keines von allen Browsern interpretiert werden kann. Man muß also für jede Schrift die drei verschiedenen Dateiformate vorhalten, wenn man will, daß alle gebräuchlichen Browser ein hinreichend ähnliches Ergebnis hervorbringen. TTF-Dateien, so viel sei noch angemerkt, sind zwar Truetype-Fonts, aber nicht mit den aus der Windowswelt bekannten Schriften zu verwechseln. Die hier in Rede stehenden lassen sich nicht auf dem Arbeitsplatzrechner einsetzen.

Das beste daran ist: Alles funktioniert auch in WordPress! Im Eingabefeld dieses Textes haben wir ganz am Anfang den entsprechenden Link zur CSS-Datei eingefügt. Wenn wir nun hier einen der Stile aufrufen, dann ergibt sich zum Beispiel so etwas hier:

Noch ein Wort zu den Nutzungsrechten:

Der Browser muß, damit er Schriften darstellen kann, diese auf dem heimischen Rechner, wie gesagt, auch finden. Meistens handelt es sich ja um Allerweltsschriften wie Arial, Helvetica, Garamond usw., die auf nahezu jedem Rechner des Universums installiert sind. Ausgefallene Schriften muß er sich erst einmal besorgen. Würde man nun die normalen Rechnerschriften ins Netz stellen, käme dies einer krassen Verletzung der Nutzungsrechte gleich, die genau das in aller Regel verbieten. Die Schriften- und Browserhersteller haben deshalb eigens für den Gebrauch im Netz die Webfonts entwickelt, deren Einsatz direkt auf dem Rechner nicht möglich ist. [Wir warten allerdings auf den ersten Hacker, der genau das möglich machen wird, wetten?]

Und warum (quengel!, pienz!) dann drei verschiedene?

Na, wie üblich: Weil man sich wieder einmal nicht auf einen gemeinsamen Standard einigen konnte.

Nachtrag:

Wer keine eigenen Webfonts hat, kann sich – sofern er mit WordPress arbeitet – auch des Plugins „Font“ bedienen, das viele kostenlose Schriften zugänglich macht. Die sind allerdings auf dem Server des Plugin-Autors, was bedeutet, daß es keinen direkten Zugriff gibt und keine Garantie, daß das Angebot unverändert bestehen bleibt.

Sapere aude!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


*

Unsere Seiten sind gehostet bei manitu. Wir empfehlen Safari oder Firefox oder einen anderen Browser Ihres Vertrauens.