Schriftenbeschaffung

Schrift drückt Persönlichkeit aus. Dank moderner Browser lässt sich das auf Webseiten nutzen.

Das Verwenden von Schriften im Rahmen von Webseiten gehört mittlerweile fast zum guten Ton. Ich selbst bin (bisher3) Purist auf meinen eigenen Seiten. Ich schlage Schriften vor, wer sie auf dem anzeigenden Gerät hat – schön. Wenn nicht, wird halt das genommen, was das Gerät als Ersatzschrift vorschlägt. Weil ich zu der abnehmenden Zahl derer gehöre, die einen vergleichweise hohen Augenmerk auf „content“ im Sinne von „lesbarem Text“ legen, halte ich es für eher nachrangig, dass dafür auf anderen Anzeigen eine alternative Systemschrift statt meinem Schriftfavorit verwendet wird.

Je mehr Fonts, desto mehr Bandbreite ist nötig, damit die Seite so aussieht, wie sie aussehen soll.

Denn „schöne Schriften“ haben einen Preis: sie müssen vom Anwender geladen werden. Je nach gewähltem Schriftsatz kommen da schnell mehrere 100 kB zusammen. So lange die Seite via Flatrate und schnellem Netzanschluss geladen wird, ist das relativ egal. Für die Anzeige auf dem Mobiltelefon bei wackliger Netzabdeckung kann es darüber entscheiden, ob der (potenzielle) Besucher genervt aufgibt.

Wie sooft gilt hier „weniger ist mehr“. Bloß weil man´s kann, muss die Webseite kein „Fontbook“ werden. Manchmal ist eine Schriftvorgabe jedoch durchaus sinnvoll – bei allem Purismus. Hierbei greifen dann viele auf die von Google angebotenen Fonts zurück. Unter der Adresse fonts.google.com werden eine große Zahl Schriften für die Nutzung auf Webseiten angeboten. Die werden per Verknüpfung ins die eigene Stilvorlage gelegt, und alles wird schick:

<link href="https://fonts.googleapis.com/css?family=Name der Schrift" rel="stylesheet">
…
h1,… {font-family: 'Name der Schrift', serif;}

Aussuchen, auswählen, ins Style-Sheet einfügen. Fertig. Allerdings greift dann die Webseite jedesmal auf das Fontrepository von Google zu. Bei beliebten Schriften ist das egal, denn die werden von den Servern „dazwischen“ gepuffert. Bei etwas weniger gängigen kostet das jedoch zusätzliche Zugriffszeiten, weil auf andere Server zugreifen Zusatzaufwände bedeutet. Außerdem weiß Google dann über jeden Zugriff auf meiner Seite bescheid. Das muss – meiner Meinung nach – nicht unbedingt sein.

Wer es etwas unabhängiger mag und gleichzeitig für verschiedene Systeme die dafür optimierte Schrifttechnik anbieten will, muss etwas mehr Aufwand treiben.

Etwas mehr Aufwand, der sich lohnt und unabhängig(er) macht.

Es beginnt wieder mit der Auswahl der Schrift. Bis hier ist es wie schon beschrieben. Danach wird die gewählte Schrift jedoch für die Webseite herunter geladen. Der von Google angebotene Download ist es nicht – hier wird lediglich die Schrift für die lokale Anzeige angeboten. Für die Verwendung in Webseiten wäre das Eulen nach Athen tragen: da hat der Besucher keinen Zugriff2. Deshalb müssen die Schriften auf die Webseite geladen und dort verknüpft werden. Allerdings müssen sie dort in anderen (genauer: weiteren) Formaten für die Verarbeitung auf Webseiten vorliegen.

Ein praktischer Helfer dafür ist der Google-Webfonts-Helper. Dort wird links die gewünschte Schrift angegeben. Anschließend kann rechts der Charset (typisch bei uns ist „latin“) und die Stilliste („weniger ist mehr“…) gesetzt werden. Das Helferlein generiert den erforderlichen Eintrag für die CSS-Datei, der alle gängigen Systeme abdeckt.

So sieht der Eintrag für „Roboto Slab“ aus:

/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
       url('../fonts/roboto-slab-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-slab-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-slab-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-slab-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-slab-v6-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

Das ist eine vollständige Definition, für die entsprechend die Fonts auf die Webseite geladen werden müssen. Wer sich nicht um ältere Browser schert (so wie ich z.B., weil das nutzen veralteter Browser fahrlässig ist und deshalb nicht von mir unterstützt wird), der kann sich auf die woff und woff2-Dateien beschränken.

Damit der Eintrag zur eigenen Webseitenorganisation passt, kann unter dem Feld ein Pfadpräfix angegeben werden. Dort sollten die Schrift-Dateien auf dem Webserver abgelegt werden. Falls sie im gleichen Ordner wie die CSS-Datei liegen, muss das Feld lee sein. Abschließend lädt man noch die eingepackten Schriften herunter und entpackt die ZIP-Datei an der passenden Stelle.

Jetzt werden die Schriften vom eigenen Webserver verwendet. Es werden dafür keine weiteren Verbindungen geöffnet, die den Zugriff auf die eigene Seite ausbremsen können. Und mit dem (oben) gezeigten Eintrag können alle die Seite dann im vom Entwickler gedachten Design – inklusive Schriften – bewundern.

Alternativ gibt es noch den Dienst localfont.com1. Der funktioniert ähnlich, ist aber etwas schlichter gehalten und bietet als CSS die URLs für die Verknüpfung im Netz an oder im ZIP das CSS, aber mit fest eingestelltem „FONTS“-Pfad. Letztendlich ist es Geschmacksaache, welcher Service besser passt. Es gibt noch ein paar Kleinigkeiten, die beachtenswert sind.

Mit ein paar kleinen Nachbesserungen lässt sich die Geschwindigkeit erhöhen.

@font-face {
  font-family: 'Bitter';
  font-style: italic;
…
}
@font-face {
  font-family: 'Bitter';
  font-style: bold;
  font-weight: 700;
…
}
em {font-style:italic;}
strong { font-weight:bold; }