Online-Webfont-Generatoren: Welche gibt es und was können sie?

Webschriften optimieren

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Webfonts sind mittlerweile ein fester Bestandteil im Webdesign. Neben zahlreichen kommerziellen Schriften gibt es dank Google Fonts auch viele Schriften, die du kostenlos in deine Webprojekte einbinden kannst. Wer grundsätzlich lieber selber hostet, findet im Internet einige Online-Webfont-Generatoren, die Desktopschriften in Webfonts umwandeln.

Webschriften optimieren

Umfangreicher Webfont-Generator von FontSquirrel

FontSquirrel gehört sicher zu den bekanntesten Anbietern kostenloser Schriften. Eine Vielzahl der bei Google Fonts angebotenen Webfonts findest du dort als Desktopschrift. Mit dem eigenen Webfont-Generator von FontSquirrel erstellst du im Handumdrehen Webfonts in allen gängigen Formaten. Auch das noch recht neue WOFF2-Format ist mit dabei.

fontsquirrel_webfont-generator
Webfont-Generator mit vielen Einstellungsmöglichkeiten

Dazu lädst du einfach TrueType- oder OpenType-Schriften hoch – auch direkt mehrere, zum Beispiel eine komplette Schriftfamilie. Beim Generieren der Webfonts entscheidest du zwischen „Basic“, „Optimal“ und „Expert“.

Während bei „Basic“ alles bleibt, wie es ist – zum Beispiel das Hinting und Kerning –, werden bei „Optimal“ von FontSquirrel einige Anpassungen vorgenommen, die für eine möglichst optimale schnelle Darstellung sorgen. Mit der „Expert“-Einstellung entscheidest du ganz individuell, wie der Webfont generiert werden soll.

So gibt es ein spezielles für das Web optimierte FontSquirrel-Hinting, welches anstelle des existierenden Hintings oder einen automatischen Hintings verwendet werden kann. Auch das Rendering der Schriften beeinflusst du, indem du beispielsweise Kerninginformationen entfernst oder die GASP-Tabelle bearbeiten lässt. Über die GASP-Tabelle wird entschieden, wie Schriften auf monochromen Bildschirmen dargestellt wird.

fontsquirrel_webfont-generator_subsetting
Individuelles Subsetting

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht

Wer sich mit Hinting und Kerning nicht auskennt, sollte die Standardeinstellungen von FontSquirrel verwenden. Interessant für alle ist jedoch die Möglichkeit, das Subsetting der Schrift anzupassen. Darüber entscheidest du, welche Zeichensätze in den Webfont aufgenommen werden sollen. So bindest du beliebige sprachspezifische Zeichen ein. Ist deine Website beispielsweise zweisprachig – deutsch und französisch – bindest du zusätzlich die im Deutschen und Französischen verwendeten Sonderzeichen wie Umlaute, Eszett und Vokale mit Zirkumflex, Grave und Akut ein.

Verwendest du lediglich Groß- oder Kleinbuchstaben, kannst du über das Subsetting auch ausschließlich die gebrauchten Buchstabenarten einbetten. Wer es ganz individuell braucht, berücksichtigt einzelne Zeichen oder Unicode-Bereiche. Auf diese Weise baust du dir einen Webfont zusammen, der nur die tatsächlich gebrauchten Zeichen beinhaltet und somit sehr platzsparend ist.

Wenn du soweit alles eingestellt hast, wird ein Webfont-Kit erstellt und heruntergeladen. Bei Bedarf werden deine Einstellungen in einer Textdatei gespeichert, so dass du weitere Schriften mit genau diesen Einstellungen erstellst.

Fontie mit einfacher Oberfläche und Unicode-Subsetting

Der Webfont-Generator Fontie funktioniert ganz ähnlich wie der von FontSquirrel. Du lädst eine Desktop-Schrift hoch und wählst Subsetting, Hinting und Ausgabeformate aus. Beim Subsetting wählst du zwischen einfachen und erweiterten Optionen. Bei den einfachen Optionen fügst du lateinische, griechische, kyrillische und arabische Buchstaben sowie OpenType-Features hinzu, während du bei den erweiterten Optionen die jeweiligen Unicode-Unterbereiche auswählst.

fontie_webfont-generator
Übersichtlicher Webfont-Generator

Beim Hinting stehen dir verschiedene Methoden zur Auswahl. Neben Windows GDI, DirectWrite und Grayscale hast du die Möglichkeit, das bestehende Hinting der Schrift beizubehalten oder das Hinting gänzlich zu entfernen.

Beim Ausgabeformat stehen dir die gängigen Formate zur Auswahl mit Ausnahme des noch recht neuen WOFF2.

Schnelles Generieren mit Transfonter

Ebenfalls einfach zu bedienen ist Transfonter. Du lädst eine oder mehrere Schriften hoch und wählst auf Wunsch Autohinting sowie ein Subsetting aus. Beim Subsetting steht dir allerdings nur jeweils ein Alphabet zur Verfügung – unter anderem Lateinisch, Griechisch und Kyrillisch. Eine Kombination mehrerer Alphabete ist nicht möglich. Dafür ergänzt du aber einzelne Zeichen zu deinem Webfont.

transfonter_webfont-generator
Einfach zu bedienender Webfont-Generator

Interessant ist die Vorschau auf deinen Webfont, den Transfonter dir erstellt. So prüfst du noch vor dem Download, wie die generierte Schrift im Browser aussieht. Unterstützt werden im Übrigen alle gängigen Formate einschließlich WOFF2.

Auch bei diesem Generator kannst du die Einstellungen speichern. Anders als bei FontSquirrel werden die Einstellungen jedoch im Browser gespeichert.

Fazit

Jeder der drei Generatoren hat seine Vor- und Nachteile. Wer sich auskennt und möglichst individuell anpassen möchte, ist bei FontSquirrel gut aufgehoben. Für alle anderen sind Fontie und Transfonter gute Alternativen.

In jedem Fall gilt, dass natürlich nur jene Schriften in Webfonts konvertiert werden dürfen, bei denen die jeweilige Lizenz das erlaubt. Kommerzielle Anbieter wie MyFonts und FontFont verfügen in der Regel über eigene Generatoren, die auch nur für dort erworbene Schriften zur Verfügung stehen.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Franz Meyer
Gast

Prima Artikel. Danke für die Infos.

Welche Schriftart würde dir eigentlich für eine Webseite mit nicht gerade wenig Text empfehlen?

wpDiscuz