Schriftarten vom eigenen Server laden

Schriftarten sollten nicht aus externen Quellen geladen werden.

Darüber haben wir im Beitrag „Wie binde ich Schriftarten am besten ein?“ bereits geschrieben.

Auch haben wir eine Ressource verlinkt, unter der man sehr viele freie Schriftarten herunterladen kann, um diese im eigenen Projekt verwenden zu können. Doch was mache ich, wenn die gewünschte Schriftart nicht dabei ist? Was kann ich machen, wenn ich nur ein altes Format der Schriftart habe?

Während uns Google lange Zeit die Arbeit abgenommen hat und unseren Besuchern, je nach verwendetem Browser, das passende Schriftartenformat ausgeliefert hat, müssen wir uns wieder selber darum kümmern. Hierfür ist es wichtig zu wissen, welche Formate aktuell in welchen Browsern unterstützt werden, aber auch, wie ich zu einem gewünschten Format komme.

Konvertierung der Schriftart

Besonders im Bereich Print-Design werden meist noch ältere Formate von Schriftarten verwendet.

Wir bekommen immer wieder Schriftarten als OTF oder TTF, die wir in aktuellen Webprojekten nicht mehr verwenden wollen. Immerhin verbrauchen diese Formate meist doppelt so viel Speicherplatz als die aktuelleren Formate WOFF bzw. WOFF2. Unter Linux können wir aus einer dieser älteren Formate ziemlich schnell allerhand andere Formate erstellen.

Hierfür stehen uns z.B. folgende Programme zur Verfügung.

  • eot-utils (nur Relevant, wenn wir alte Internet Explorer unterstützen wollen)
  • eot2ttf
  • woff-tools (das Minimum an Optimierung für alle gängigen Browser)
  • woff2

Installierung und Verwendung

In Debian-basierten Distributionen geben wir einfach den Befehl sudo apt install eot-utils eot2ttf woff-tools woff2 ein und schon können wir loslegen.

eot-utils

Diese Tool verwenden wir, wenn wir eine EOT-Datei aus einer OTF-Datei erstellen wollen.

Dieses Format ist aktuell nur noch für Internet Explorer der Versionen 6 bis 8 relevant!

Der Befehl, für die Konvertierung lautet mkeot roboto.otf > roboto.eot

eot2ttf

Hiermit erstellen wir eine TTF-Datei, die nur noch für ältere Safari Browser, Android und iOS verwendet wird.

Unterstützt wird sie allerdings in allen gängigen Browsern. Wer z.B. Android unterhalb der Version 4.4. unterstützen muss, sollte auf dieses Format setzen. Der Befehl, für die Konvertierung lautet eot2ttf roboto.eot roboto.ttf

woff-tools

Mit WOFF macht man aktuell nichts falsch und die Schriftarten sollten zumindest in diesem Format vorliegen.

Mit dem hier genannten Tool können wir entweder eine OTF– oder eine TTF-Datei konvertieren. Wir müssen im Terminal nur sfnt2woff roboto.otf aufrufen. Wohlgemerkt können wir hier nicht extra angeben, wie das Ergebnis heißen soll, oder wo es gespeichert wird. Die neue Datei wird direkt im selben Ordner erstellt, wo die Ausgangsdatei liegt und erhält auch denselben Namen. Natürlich mit der neuen Endung .woff.

woff2

Wie der Name schon sagt, benötigen wir dieses Tool, um eine WOFF-Datei der zweiten Generation herzustellen.

Woff2 ist das aktuellste Format für Schriftarten im Web und damit auch das schlankeste. Im Durchschnitt liegt die Größenersparnis gegenüber dem Vorgänger bei 20%. Die aktuelle Unterstützung von Seiten der Browser ist auch erfreulich groß. So können alle aktuellen Browser für Smartphones als auch für den Desktop damit umgehen.

Auch hierfür benötigen wir als Ausgangsdatei eine OTF- oder eine TTF-Datei. Zum Konvertieren rufen wir im Terminal woff2_compress roboto.otf > roboto.woff2 auf.

Conclusio

Auch Schriftarten wollen optimiert werden.

Wir haben gesehen, dass wir mit ein paar Tools ziemlich schnell auf andere Formate konvertieren können. Wir brauchen lediglich eine OTF oder eine TTF-Datei. Schon können wir daraus unsere optimierten WOFF(2) Formate erstellen. Und aktuell sollte jede Website ihre Schriftarten zumindest im WOFF-Format ausliefern.