Freie Schriftwahl für die Website?

Exzellenter Artikel
2 | 10 Kommentare | 27128 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Freie Schriftwahl für die Website?" mit Ihrem Wissen!

Anzeige Hier werben

Da war der Internet Explorer mal den anderen voraus. Schon seit der Version 4 kennt er die CSS-Eigenschaft @font-face, mit der man seither Schriften in Webseiten einbetten kann. Microsofts CSS-Erweiterung wurde in den CSS2-Standard aufgenommen, allerdings mit Änderungen. Safari unterstützt diese Technik seit einiger Zeit, nun kommt Firefox mit der Version 3.1 (noch Beta) dazu. Im Grunde steht nun dem massenweisen Nutzen von Schriften jenseits von Arial, Verdana und Georgia nicht mehr im Wege. Oder doch?

Schriften im Netz: Langeweile bis Einheitsbrei

Wenn der Kunde eine Website möchte, die in allen gängigen Browsern zumindest grundsätzlich gleich aussieht, dann bleiben ihm beinahe ausschließlich drei Schriften zur Auswahl: Verdana, Arial, Georgia. Mit Abweichung von dieser Norm steigt die Chance, höchst unterschiedliche Darstellungen bspw. unter verschiedenen Betriebssystemen zu erreichen. Das kann gewollt sein, das kann man in Kauf nehmen, oft will man das allerdings nicht, weswegen das Netz nach wie vor eine typographische Textwüste ist. Die Krux ist: Schriften die der Browser anzeigen soll müssen auf dem Hostsystem installiert sein. Und da gibt es schon bei den gängigen Systemen wenig Übereinstimmung.

Dabei ist es eigentlich relativ einfach, der eigenen Website per CSS auch eigene Schriften hinzuzufügen. Mit der CSS-Eigenschaft @font-face kann man, völlig (CSS2-)standardkonform, Fonts zum Download bereitsstellen und diese in der Website nutzen.

Schriften einbetten mit @font-face

Firefox2Nein3Nein3.5Unbekannt
IE6Fast7Fast8Unterstützt
Opera9.5Nein10Unbekannt
Safari3Nein4Unterstützt
@font-face Unterstützung

Will man nun eigene Schriften für die Nutzung in Webseiten bereitstellen, braucht man zunächst natürlich einen Font, den man an einer sinnvolle Stelle seines Webservers kopiert. Ich hab mal einfach getan, was Millionen Hobbywebdesigner in naher Zukunft tun werden: ich bin zu einer Freefont-Seite gesurft, hab mir die erstbesten Schrift heruntergeladen und auf den Webserver geschoben. Und schon geht's los, folgende Synthax reicht eigentlich schon:

 
css
1
2
3
4
@font-face {
    font-family: Yummie;
    src: url('fonts/Ayuma2yk.ttf');
}

Damit ist der Schriftname »Yummie« nun definiert – den kann man sich tatsächlich ausdenken, die Schrift wird auf den Nutzerrechner geladen und wir können sie im weiteren CSS nutzen, bspw. so:

 
css
1
2
3
4
5
p {
    font-family: Yummie, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

So ausgestattet sieht mein vormals langweiliger Text in Safari und Firefox 3.1(beta) so aus:

Browserscreenshot

Wunderschön, oder nicht? Na gut, zu Demonstrationszwecken sollte es reichen. Eine Demoseite (die natürlich nur mit Safari oder Firefox 3.1 funktioniert) findet sich hier.

Und was ist mit dem IE?

Springen wir gerade mal ein paar Zeilen zurück, stellen wir fest: das funktioniert so nur in Safari und im kommenden Firefox. Obwohl wir weiter oben festgestellt haben, dass IE schon seit Version 4 Fonts einbetten kann, bezieht sich dies jedoch auf sog. Embedded Open Type (EOT) Fonts, worin wiederum DRM steckt. Aus diesem Grunde nutzen Firefox und Safari True- bzw. OpenType Fonts. Tatsächlich ist gerade wieder über diese Tatsache ein mittelschwerer Streit beim W3C ausgebrochen, der mglw. durch Gründung einer Arbeitsgruppe aus der Welt geschafft werden soll, bis es soweit ist, hilft dies dem Webentwickler an sich jedoch wenig. Tatsächlich gibt es ein Programm von Microsoft, um TTF in EOT umzuwandeln, es bleibt jedoch mehr als unkomfortabel. Danach muss man entweder zu Microsofts properitären Techniken greifen und per Conditional Comments oder eben mit CSS-Hacks dafür sorgen, dass nur Internet Explorer die EOTs lädt.

Geht es nicht ein wenig schöner?

Nun, die schönste Schrift habe ich für mein Beispiel ja nicht ausgewählt, obwohl man sich über Geschmack natürlich streiten kann. Eine Sache ist aber auf alle Fälle nicht in Ordnung, wie dieses Beispiel zeigt:

Bild zu Freie Schriftwahl für die Website?

Es ist nämlich gar nicht so leicht, Schriften zu finden, die a) qualitativ hochwertig genug sind, b) über ausreichend Zeichen verfügen und c) noch in ausreichend Schnitten vorliegen. Abgesehen davon, dass er für Fließtext einfach ungeeignet wäre – im fix herutergeladenen Freefont sind zwar Umlaute enthalten, aber beim »ß« muss die Schrift einfach passen. Sowas sollte einem auf einer professionellen Seite vielleicht besser nicht passieren, z.B. bei der Präsentation von Fu ballergebnissen. Um weitere Auffälligkeiten zu enttarnen ziehen wir nocheinmal ein wenig Sourcecode von oben zu Rate:

 
css
1
2
3
4
5
p {
    font-family: Yummie, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 22px;
}

Zunächst fällt auf, dass im Bild von bold keine Rede sein kann, ein fetter Schriftschnitt existiert einfach nicht. Desweiteren sehen wir hier eine sehr große Schriftgröße, 22px, die sich gar nicht in der Größe der Schrift widerzuspiegeln scheint: die Schrift ist also tatsächlich sehr klein.

Spätestens hier wird klar, dass man einfach hochqualitative Fonts braucht, um sie auf der Website zu nutzen. Damit laufen wir jedoch in das nächste Problem: die Schriften werden heruntergeladen, was den meisten Schriftenanbietern gar nicht passt. Das kann schnell Ärger geben, denn hat man eine Schrift für Druck und Bilderstellung gekauft, darf man sie noch lange nicht zum Download anbieten, was man mit der CSS2-Lösung praktisch tut. Zu unserer Freude gibt es einige freie Schriften, die man nutzen kann. Die qualitativ hochwertigsten jedoch hat Peter Kröner zusammengetragen. Bei letzteren ist garantiert, dass sie alle Zeichen beinhalten und auch genügend Schnitte haben. Ich nutze für das nächste Beispiel mal Delicious. Die unterschiedlichen Schnitte muss man ebenfalls definieren.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@font-face {
    font-family: Delicious;
    src: url('fonts/Delicious-Roman.otf');
}
@font-face {
    font-family: Delicious;
    font-weight: bold;
    src: url('fonts/Delicious-Heavy.otf');
}
@font-face {
    font-family: Delicious;
    font-style: italic;
    src: url('fonts/Delicious-Italic.otf');
}

Die Regeln für Absätze müssen wir dann auch noch anpassen:

 
css
1
2
3
4
p {
    font-family: Delicious, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

Dann sieht es gleich viel besser so aus:

Bild zu Freie Schriftwahl für die Website?

Wie man sieht, sind nun ganz korrekt schon die Schnitte für regular, bold und italic definiert. Das kann und sollte man natürlich noch weiter treiben, bspw. mit bold italic und so fort. Eine Demoseite (die natürlich nur mit Safari oder Firefox 3.1 funktioniert) findet sich hier.

Firefox2Nein3Nein3.5Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Nein10Unbekannt
Safari3Nein4Unbekannt
font-size-adjust Unterstützung

Um uns dem Problem mit der Schriftgröße anzunehmen müssen wir nocheinmal zu unserem Freefont »Yummie« zurückkehren. 22px sind einfach verdammt groß, was natürlich zu Problemen führt bei Browsern, die @font-face noch nicht unterstützen. Die alternativ ausgewählte Helvetica käme ziemlich gross daher.

Spätestens jetzt stellt sich die Frage, wie man unterschiedliche Schriftgrößen innerhalb einer font-family aufeinander abstimmen kann. Und siehe da, es gibt etwas dafür, auch schon aus CSS2, nämlich font-size-adjust. Damit lässt sich die x-Höhe oder Aspektwert des Fonts anpassen, und so aufeinander abstimmen. Wir ändern unser Beispiel ab:

 
css
1
2
3
4
5
6
p {
    font-family: Yummie, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size-adjust: 0.66;
    line-height: 140%;
}

So erhalten wir einigermaßen das gewünschte Bild, auch mit einer Schriftgrößenangabe von 12px, womit der Block auch noch sinnvoll aussieht, wenn keine Schriften nachgeladen werden können. Diese Methode hat jedoch einen entscheidenden Nachteil: bisher kann das nur Firefox 3.1. Safari zieht sicherlich bald nach, in der aktuellen Version 3.2.1 ist font-size-adjust jedoch nicht enthalten.

Und weiter?

Hat man nun all die Fallstricke umgangen und mit viel Fingerspitzengefühl alles eingestellt, gilt es schlussendlich noch darauf zu achten, dass man nicht zu viele Schriften zum Download anbietet und einsetzt; eine gut ausgestattete Schrift kann schließlich schonmal mit 1 MB zu Buche schlagen.

Beim herumprobieren im Firefox 3.1 (beta) stellten sich außerdem noch ein paar Probleme heraus: bei großen Mengen Fließtext zeigte sich beim Freefont beim Laden ohne Cache zunächst der erste auf der Platte liegende Font (im Beispiel Helvetica), bevor mit einem kurzen Flackern auf den TrueType-Font umgeschaltet wurde. Beim hochwertigen Font trat der Effekt jedoch nicht auf.

Was haben wir also? Eine Möglichkeit, in einigen Browsern zusätzliche Fonts zu nutzen. In der momentanen Implementierungsstufe und die derzeitige Uneinigkeit des W3C im Hinterkopf behaltend, kann man einen Einsatz in produktiven Umgebungen beinahe nicht empfehlen. Dazu ist viel Frickelei von Nöten, von den Schwierigkeiten bei der Schriftenfindung ganz abgesehen. Das Ergebnis hingegen ist natürlich beeindruckend. Vielleicht ist die Schrifteneinbettung mit @font-face noch nicht bereit für Fließtext, aber für Überschriften oder Dekorationsobjekte dürfte das vielleicht schon passen


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Freie Schriftwahl für die Website?" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Freie Schriftwahl für die Website?" hier bearbeiten.

Mitarbeiter

Kommentare: Freie Schriftwahl für die Website?

Neuen Kommentar schreiben
Hilfe
Beantworten

Hab den Artikel mehrfach gelesen, mehrfach probiert und mehrfach fest stellen müssen, das es bei mir nicht funktioniert. Habe nach wie vor nur die Standartschriften zur Verfügung.

Woran könnte es liegen?

Danke schon mal im voraus

ChristianP. am 30.12.2012 um 08:38
Unterstützung des IE8
Beantworten

Was unterstützt der IE8 denn, was der 7er und der 6er nicht können? (Wegen der Kompatibilitätstabelle...)

Thomas H am 14.12.2008 um 10:43
Arial
Beantworten

Die Schriftart Arial ist nicht zwingend auf jedem Betriebsystem vorhanden. Einige Linux-Distributionen enthalten diese Schriftart nicht von Haus aus. Sie kann zwar nachinstalliert werden aber ob das alle machen ist eine andere Frage! Zudem sieht Arial auf Linux und Windows unterschiedlich aus.

Daher würde ich Arial nicht als Standardschriftart bezeichnen.

Thomas Rix am 02.12.2008 um 10:21
Re: Arial
Beantworten

Wodurch wird die Arial dann auf diesen Systemen ersetzt?

Fabian Ziegler am 11.12.2008 um 12:19
Re: Arial
Beantworten

Das kann unterschiedlich sein. Beispielsweise die Nimbus Sans L

mymykry am 31.07.2009 um 18:31
Verschiedene Schnitte
Beantworten

Muss man die verschiedenen Schnitte immer einzeln definieren? Ich dachte es gibt auch odt/ttf-Dateien die mehrere Schnitte vereinen (- ich kann da auch falsch liegen). Wie muss man das da machen?

Thomas H am 28.11.2008 um 14:08
Re: Verschiedene Schnitte
Beantworten

Ich nehme an, du meinst OTF (Open Type Font) und nicht ODT (Open Document Text). Normalerweise wird bei Open Type wie bei True Type eine Font-Datei pro Schnitt verwendet. Das ist immerhin weniger als bei Typ-1-Schriftarten, wo mehrere Dateien pro Schnitt üblich sind.

mymykry am 31.07.2009 um 18:38
Ohje
Beantworten

Also so viel aufwand für ein Font? Na da bleib ich doch dan lieber bei den Standart Schrift arten!

Gruß eXis

Markus B. am 26.11.2008 um 18:03
Re: Ohje
Beantworten

Viel Aufwand? Hast Du Dir den Artikel überhaupt durchgelesen?

Fabian Ziegler am 28.11.2008 um 12:33
Re: Ohje
Beantworten

Ja habe ich, und so wie ich es verstanden habe, das es auch auf jeden Browser funktioniet, bedeutet dies viel aufwand...

Markus B. am 29.11.2008 um 09:38