kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Webfonts mit einem Webfont-Generator erstellen

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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.

Webfonts selbst erstellen mit Webfont Generator
Webfonts selbst erstellen mit einem Webfont Generator

 

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) hata sich bei modernen Browsern als Standard durchgesetzt und Embedded Open Type (EOT) wird noch für den Internet Explorer gebraucht.

Im Webfont Generator werden die Webfont-Formate ausgewählt
Die wichtigsten Webfont-Formate sind ausgewählt

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.

Einstellungen zum Hinting und Rendern der Schrift
Das Hinting und Rendern der Schrift kann bis zu einem gewissen Grad beeinflusst werden

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.

x-Höhe wie bei Systemschriften anpassen
x-Höhe: Die Mittellänge kann an die Größe der Systemschriften angepasst werden

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.

Open Type Features in den Webfont einbinden
Enthält die Desktop-Schrift Kapitälchen oder Mediävalziffern, können diese mit eingebunden 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.

Lizenz wichtig beim Erstellen von Webfonts
Wichtig ist, dass ihr die Lizenz zum Konvertieren einer Desktop-Schrift in einen Webfont besitzt

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.

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.