Webfonts mit einem Webfont-Generator erstellen
In diesem Beitrag erfahrt ihr, wie ihr mithilfe eines Webfont-Generators euren Webfont selbst erstellt.
Wer keine Systemschriften verwenden oder auf Webfont-Anbieter zurückgreifen möchte, kann selbst aus einer vorliegenden Desktop-Schrift einen Webfont erzeugen. In diesem Fall kann die Schrift sehr individuell für die Website ausgewählt werden. Allerdings solltet ihr in Bezug auf das Lizenzmodell der Ausgangsschrift einiges beachteten. Wie ihr mithilfe eines Webfont-Generators eine Schrift in das passende Dateiformat umwandelt, beschreiben wir in diesem Artikel.
Von der Desktop-Schrift zum Webfont
Am Beispiel des Webfont-Generators von Font Squirrel zeigen wir euch, wie einfach es ist, aus einer Desktop-Schrift einen Webfont zu generieren. Einzige Voraussetzung dafür ist, dass der Font im TrueType- oder OpenType-Format vorliegt (*.ttf
, *.otf
). Alle Webfonts basieren auf Vektoren und bei den oben genannten Schriftformaten handelt es sich um Outline-Schriften mit Vektorkonturen.
Sofern ihr euch sicher seid, dass ihr von der ausgewählten Schrift einen Webfont erstellen dürft, könnt ihr sie im Generator hochladen. Wenn euch die Einstellungen »Basic« oder »Optimal« ausreichen, ist die Konvertierung für euch bereits abgeschlossen.
Wenn Ihr detaillierte Einstellungen zur Konvertierung vornehmen wollt, wählt den Modus »Expert«. Hier stehen u.a. folgende Einstellungen zur Verfügung.
Webformate TTF, WOFF und EOT
In diesem Abschnitt wählt ihr die gewünschten Dateiformate für den Webfont aus. Das TrueType-Format wird noch von älteren Browsern benötigt, WOFF (Web Open Format) bzw. WOFF2 hat sich bei modernen Browsern als Standard durchgesetzt und Embedded Open Type (EOT) wird noch für den Internet Explorer gebraucht.
TrueType Hinting
Insbesondere die Darstellung kleiner Schriftgrade am Bildschirm ist wegen des Pixelrasters problematisch. Dem wird mittels Hinting entgegengewirkt. Dem Webfont werden Hinweise (Hints) mitgeliefert, wie die Schrift angepasst werden soll. Diese Hints können Schriftgestalter manuell dem Font mitgeben oder die Bildschirmoptimierung wird während des Rasterns automatisch durchgeführt (TTFAutohint). In unserem Fall überlassen wir das Hinting Font Squirrel.
Rendering – die Vektorschrift wird gerastert
Bei »Rendering« kann der Abstand über und unter der Schrift (Fix Vertical Metrics) reguliert werden, damit die Ober- und Unterlängen in der Ansicht verschiedener Browser nicht verloren gehen. Mit »Fix GASP Table« wird die Schrift für Graustufen-Displays optimiert. Mit »Fix Missing Glyphs« werden Leerzeichen (Spaces) und Bindestriche (Hyphens) hinzugefügt.
Beim Webfont die x-Höhe anpassen
Die x-Höhe (Mittellänge= Höhe des Kleinbuchstabens ohne Ober- und Unterlänge) kann auf die Größe einer der aufgelisteten Schriften skaliert werden. Das hat optische Vorteile, wenn die Schrift nicht oder nicht direkt geladen wird.
Teilfont (Subset) erstellen
Beim »Subsetting« können nicht gewünschte Glyphen ausgeschlossen werden, um die Dateigröße zu minimieren. Das »Basic Subsetting« schließt alle Buchstaben bzw. Zeichen aus, die nicht in Westeuropa gebraucht werden. Das »Custom Subsetting« bietet die Möglichket, bestimmte Sprachen oder einzelne Zeichen in den Teilfont aufzunehmen.
Open Type Features in den Webfont übernehmen
Mit Open Type Features sind alternative Formen für ein Zeichen gemeint (z. B. Kapitälchen, Mediävalziffern und auch Ligaturen), die hinterlegt und noch weitere in sogenannten Style Sets zusammengefasst sind. Sofern eure Desktop-Schrift solche Open Type Features enthält, können sie hier mit aufgenommen werden.
Stylesheet
Am Ende könnt ihr entscheiden, ob der Webfont mit allen Zeichen durch Base64 codiert und direkt in das Stylesheet eingebettet werden soll. Alternativ wählt die klassische Variante mit externen Schrift-Dateien. Bei »Advanced Options« könnt ihr neben einem Suffix auch die Laufweite des Webfonts erhöhen oder verringern (Adjust Glyph Spacing).
Lizenzierung der Schrift beachten!
Das Wichtigste beim Konvertieren von Fonts in Webfonts ist die Frage, ob ihr es überhaupt dürft. Eine Desktop-Schrift kann nicht ohne Weiteres in einen Webfont konvertiert werden, wenn ihr keine Erlaubnis dafür habt. Das kann rechtlich sehr unangenehme und teure Folgen haben. Im Lizenzmodell der Ausgangsschrift muss dazu das sog. »Web Embedding« gestattet sein. Andernfalls erzeugt und vertreibt ihr Raubkopien der Schriftart.
Schriftgestaltung für Web anders als für Print
Wenn ihr die Erlaubnis zum Konvertieren besitzt, ist die Nutzung eines Webfont-Generators eine schnelle und unkomplizierte Sache. Aus gestalterischer Sicht sei allerdings noch ein Punkt erwähnt. Automatisch erstellte Webfonts, die auf Grundlage eines Print-Fonts erzeugt wurden, unterscheiden sich gestalterisch von echten Webfonts, die Schriftgestalter extra für die optimale Lesbarkeit am Bildschirm entworfen haben. Profis sehen den Unterschied.