Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der Webprogrammierung: Basiswissen

Web-Fonts: Schriften für Webseiten

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Einsatz von Schriften im Web war lange Zeit eine sehr frustrierende Angelegenheit. Doch dank Web-Fonts ist damit jetzt Schluss.

Transkript

Lange Zeit waren Webseiten für Freunde guter Typografie ein Graus. Mehr als schlecht aufgelöster, ziemlich pixliger Text war da nicht möglich. Auch die Auswahl an möglichen Schriften war außerordentlich begrenzt. Doch die Zeiten haben sich glücklicherweise geändert. Dank hochauflösender Bildschirme und dem Einsatz von Web-Fonts, stellt auch eine etwas anspruchsvollere Schriftgestaltung auf Webseiten kein Problem mehr dar. Schauen wir uns mal im Detail an, wie das eigentlich funktioniert. Um das Problem mit Schriften in Webseiten zu verstehen, müssen wir uns kurz klar machen, wie ein Browser überhaupt Schriften darstellt. Nun, ganz einfach. Er greift auf die Schriften zurück, die auf dem aktuellen Client installiert sind. Das bedeutet aber zwangsläufig auch, dass ein Webdesigner nur mit den Schriften arbeiten kann, die mit hoher Wahrscheinlichkeit auf allen Geräten installiert und verfügbar sind. Das sind etwa die Arial, der Klassiker die Times, ein anderer Klassiker die Courier, eine Verdana, oder auch eine Georgia. Im Prinzip war's das bereits. Mehr als diese fünf Schriften stehen nicht zur Verfügung. Das ist natürlich eine lächerlich kleine Auswahl, und typografische Möglichkeiten bieten sie kaum. Diese winzige Auswahl an Schriften wird mit Web-Fonts um praktisch beliebig viele Schriften erweitert. Mit Web-Fonts meint man eine Art Technologie, mit der Schriften zusammen mit dem HTML-Dokument an den Browser geschickt werden. Der kann diese Font-Dateien nun vorübergehend installieren, laden und natürlich auch anzeigen. Häufig wird dazu die CSS-Anweisung @font-face benutzt. Weshalb Sie diese Technik mit dem Stichwort @face-font-Technik finden werden. Schauen wir uns einmal an, wie diese Technik prinzipiell funktioniert. Die Webseite enthält eine CSS-Anweisung mit @font-face, woraufhin der Browser den gewünschten Font vom Server nachlädt. Nun ist es möglich diese neue, nur vorübergehend verfügbare Schrift, über CSS als Schrift in einem HTML-Dokument einzusetzen. Das klingt eigentlich ganz simpel. Das ist es auch. Es hat einige Zeit gedauert, bis dieses System wirklich funktioniert hat. Woran lag das? Wo lagen früher die Probleme mit dem Einsatz von Web-Fonts? Dazu gehörten vor allen Dingen erst einmal Lizenz-Probleme. Ein Font ist durch Lizenzen geschützt und ihre Einbindung über @font-face ein Verstoß gegen diese Lizenzen. Mit anderen Worten, es war technisch zwar machbar, aber es war rechtlich verboten. Font-Anbieter und Schriftengestalter sahen es überhaupt nicht gern, dass ihre Arbeiten einfach mal so kopiert und benutzt wurden. Obendrein waren Schriftdateien sehr groß, was zu höheren Ladezeiten und damit auch zu einem schleppenden Aufbau von Webseiten führte. Das heißt, selbst wenn Sie Schriften einbinden durften, waren diese Font-Dateien so groß, dass Ihre Webseiten einfach nicht mehr richtig aufgebaut wurden, und von dem Benutzer nicht gelesen werden konnten. Also, mit anderen Worten, es war einfach sinnlos, es hat nicht funktioniert. Und hinzu kommt noch, dass die meisten Fonts für den Einsatz im Zeitschrift- und Buchdruck entwickelt worden waren, und auf Bildschirmen nur sehr, sehr unzureichend dargestellt werden konnten. Die Probleme machen deutlich, warum man für Schriften im Web einen neuen Ansatz entwickeln musste. Der erste Schritt bestand darin, ein neues Datei-Format für Schriften zu entwickeln, die speziell für die Einbettung in Web-Dokumenten gedacht sind. Die beiden wichtigsten Formate sind hier EOT - Embedded OpenType und WOFF, das Web Open Font Format. Beide Formate arbeiten mit speziellen Komprimierungen, um die Font-Dateien möglichst klein, und die Dauer des Nachladens möglichst gering zu halten. Nachdem diese beiden Formate nun einmal definiert waren und verfügbar waren, ging auch die Entwicklung von Web-Fonts relativ zügig voran. In dem ständig steigenden Bedarf nach neuen Schriften für Webseiten, konnten sich auch die Schriftengestalter und die Font-Anbieter nicht entziehen. Gemeinsam mit den Browserherstellern und dem W3C, suchte man nach einer für alle Beteiligten akzeptablen Lösung. Eine der wichtigsten Schritte bestand darin, die Druckschriften zu überarbeiten und eine spezielle, für die Darstellung am Bildschirm entworfene Version, zu entwickeln. Außerdem wurden die Lizenzen angepasst, die man vielfach an den Einsatz auf Webseiten erlaubte. Wie binden wir Fonts auf Webseiten ein, also wie setzen wir Web-Fonts eigentlich ein? Generell gibt es dabei zwei Möglichkeiten, wie Sie Web-Fonts für Ihre Webseiten nutzen können. Zum einen gibt es Anbieter wie Typekit oder Google, die eine sehr große Auswahl an Web-Fonts bereitstellen. In diesem Fall werden beim Aufruf Ihrer Webseite die gewünschten Schriftdateien von den Servern der Anbieter, also von Typekit or Google, nachgeladen. Das funktioniert reibungslos, zuverlässig und schnell, hat aber einen kleinen Haken. Denken Sie daran, beim Nachladen eines Fonts hinterlässt der Browser Ihres Besuchers eine Datenspur beim Anbieter des Fonts. Setzen Sie etwa Google-Fonts ein, dann nimmt jeder Besucher Ihrer Webseite automatisch Kontakt zu Google auf, auch wenn er das gar nicht möchte. Besser ist es da, die Schriftdateien auf dem eigenen Server vorrätig zu halten. Das geht natürlich nur, wenn die Lizenz der Schrift es erlaubt. In diesem Fall ruft der Browser Ihrer Besucher, die Datei von Ihrem Server ab und hinterlässt dort seine Datenspur. Aber da er ohnehin Ihre Webseite bereits geladen hat, spielt das keine große Rolle mehr.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!