Geschrieben von Christian Schnettelker

Schlagwörter: , ,

Ein Lob auf die Webfonts

Früher war nicht immer alles besser. Aus technischen Gründen konnte man bis vor ein paar Jahren nur wenige, beim Besucher mit relativer Sicherheit installierte Schriftarten („Fonts“) für das Webdesign verwenden, z.B. Verdana, Arial und Sans-Serif. Diese Schriftarten wurden als „websicher“ bezeichnet, deshalb trifft man sie noch heute fast überall an, was dann aber auch schnell langweilig wird.

Gottseidank sind diese Zeiten heute wohl endgültig vorbei, bei allen neuen Projekten verwende ich inzwischen nahezu immer die sogenannten „Webfonts“. Das sind Schriftarten die, idealerweise vor der Anzeige des Textes, vom Browser aus dem Internet geladen werden, also nicht unbedingt auf dem Rechner des Betrachters installiert sein müssen.

Alle heute gängigen Browser unterstützen dies inzwischen, auch wenn fast jeder Browser ein eigenes Dateiformat benötigt.

Screenshot manoftaste.de

How To

Das Einbinden der Webfonts kann über verschiedene Wege geschehen:

  • Über einen Link-Eintrag im Head-Bereich der Seite, z.B.
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

    Dabei werden die notwendigen Dateien von einem Google-Server geladen. Es gibt natürlich auch noch andere Dienste, der von Google dürfte aber der am meisten genutzte sein.Vorteil: einfach zu realisieren (Copy & Paste).
    Nachteil: Ggf. längere Ladezeiten, beim Ausfall des Google-Dienstes würde eine Ersatzschrift verwendet. Bei bestimmten Browsern kann es vorkommen, dass diese für eine kurze Sekunde eine Ersatzschrift anzeigen, bis die Font-Datei komplett geladen ist. Auch muss der Eintrag in jede HTML-Datei gesetzt und beim Wechsel der Schriftart jede HTML-Datei verändert werden.

  • In der CSS-Datei über @import, z.B.
    @import url(http://fonts.googleapis.com/css?family=Lato:400,700);

    Vorteil: einfach zu realisieren (Copy & Paste). Beim Wechsel der Schriftart ist nur die CSS-Datei zu ändern.
    Nachteil: Wie vorher, uU längere Ladezeiten, Gefahr des Ausfalls des Google-Dienstes.

  • In der CSS-Datei über @font-face
    Hierbei liegen die Font-Dateien auf dem eigenen Server.Vorteil: kurze Ladezeiten, keine Abhängigkeit externer Dienste. Beim Wechsel der Schriftart ist wieder nur die CSS-Datei zu ändern.
    Nachteil: etwas aufwändiger zu installieren, u.a. auch wegen der verschiedenen Dateiformate.

Der Vollständigkeit halber möchte ich noch erwähnen, dass es auch andere Lösungen zum Einbinden von Schriftarten gibt, z.B. die sogenannten „Cufón-Fonts“. Hiermit habe ich mich bisher aber noch nicht näher beschäftigt, da die oben genannten Lösungen immer mehr als ausreichend waren, das Angebot an sehr schönen Webfont-Schriftarten wächst ständig.

Durch einen seriösen Webfont gewinnt eine Präsenz deutlich und hebt sich positiv von den weit verbreiteten „08/15 Verdana- und Arial-Seiten“ ab. Bei einer Aktualisierung bestehender Auftritte, z.B. wenn der Inhaber Inhalte modifizieren möchte, tausche ich oft auch hier den Standardfont gegen eine passende Webfont-Variante aus was, dank ausgelagerter CSS-Datei, auch meist schnell durchzuführen ist.

Epilog

Natürlich ist mir auch bewusst, dass auf einer Seite maximal zwei ähnliche Fonts eingesetzt werden sollten, um die Gestaltung nicht „unruhig“ werden zu lassen.

Für Namensschilder im Seitenkopf verwende ich dagegen oft zusätzlich die Lösung, diese als Grafik einzubinden, da ich damit noch freier in der Textgestaltung bin.

In jedem Falle achte ich beim Einsatz von Grafiken darauf, dass der Textinhalt der Grafik dann nochmals, z.B. im Seitenfuß, als HTML-Text und im alt-Tag für die Suchmaschinen wiederholt wird, da diese den Text sonst nicht indizieren können.

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.