Verkleinern von webfonts in FF Subsetter

Beginnen Sie mit der Optimierung, indem Sie zunächst einen Blick auf Ihre Schriftpalette werfen und sehen, was Sie laden, aber nicht verwenden. Die Fett-Kursiv-Schrift Ihrer Schrift ist ein guter Anfang. Prüfen Sie auch, welche Stile nur in bestimmten Abschnitten Ihrer Website verwendet werden. Diese müssen anfangs nicht geladen werden, es sei denn, Nutzer landet in einem Bereich, der sie erfordert.

Zweitens würde ich mich mit dem Subsetting befassen. Es geht um Folgendes: Angenommen, Sie verwenden eine schöne große Display-Schrift, um Zahlen in einer Infografik zu setzen, aber das ist alles, wofür Sie sie verwenden. Sie laden die gesamte Font, aber Sie verwenden nur die Zahlen. Durch die Untergliederung können Sie alle überflüssigen Zeichen entfernen, so dass Sie statt der gesamten Datei, die 90 Kilobyte groß ist, eine Datei mit nur 5 Kilobyte laden.

Alle großen Webfont-Vertreiber bieten Optionen für die Unterteilung an, aber hier werde ich die von uns entwickelte FF Subsetter besprechen, die ausschließlich für die Unterteilung von webfonts von unserer Hausmarke FontFont entwickelt wurde. Sie können es ausprobieren, ohne etwas zu kaufen. Folgen Sie einfach dem Link, wo in der oberen rechten Ecke eine Demokopie von FF Bauer Grotesk Medium Web Pro auf Sie wartet.

Öffnen Sie die Zip-Datei, um diese fantastische Demoseite zu finden, die Sie durch die Funktionen des Webfont führt (siehe oben). Wenn Sie mit den Stylistic Sets und anderen Schaltern herumspielen, bekommen Sie ein besseres Gefühl dafür, wie Sie mit FF Subsetter das Erscheinungsbild einer Schrift auf der Grundlage ihrer OpenType-Funktionen feinabstimmen können. Auch wenn die grundlegendsten OpenType-Funktionen von allen aktuellen Browsern unterstützt werden, kann der Subsetter verwendet werden, um nur die gewünschten Funktionen einzubauen, mit dem hinzugefügt am Bonus einer reduzierten Dateigröße.

Okay. Laden Sie den Webfont (mit der Endung .woff) in FF Subsetter hoch, um die nicht benötigten Bits zu entfernen. Standardmäßig beginnen Sie mit Basic Subsetting. Obwohl die Optionen mit Häkchen gruppiert sind, die die gesamte Gruppe aktivieren oder deaktivieren, können Sie auch noch feinere Anpassungen vornehmen und einzelne Zeichen deaktivieren oder aktivieren, indem Sie sie einzeln auswählen. Damit der ganze Prozess nicht zu kostspielig wird, empfehle ich Ihnen, ein paar willkürliche Änderungen vorzunehmen, die resultierende Datei herunterzuladen und ihr eine Nummer hinzuzufügen, z. B. 001, damit Sie ein Gefühl dafür bekommen, wie das Werkzeug funktioniert, und damit Sie sich angewöhnen können, alle nachfolgenden Ausgaben von Untergruppen eindeutig zu kennzeichnen.

Für erweiterte Optionen gehen Sie zu Expert Subsetting am oberen Rand. Hier können Sie filtern, welche Zeichen auf der Grundlage der Sprache oder der OpenType-Merkmale untergeordnet werden, wie ich weiter oben bereits erwähnt habe. Sie können entweder alle Zeichen beibehalten, die für ein bestimmtes Merkmal erforderlich sind, oder Sie können das Merkmal einfrieren, d. h. die Zeichen, die angezeigt werden, wenn das Merkmal aktiviert ist, werden zur neuen Standardeinstellung. Wenn Sie z. B. möchten, dass FF Bauer Grotesk immer mit einem doppelstöckigen Kleinbuchstaben a angezeigt wird, dann frieren Sie Stilistik-Set 2 ein, und Ihr bevorzugtes a wird standardmäßig angezeigt.

Ein Hinweis zum Subsetting nach Sprachen: Achten Sie darauf, dass Sie das Subsetting nicht zu aggressiv vornehmen, wie Typekit-Entwickler Bram Stein es nennt. Nur weil ich dies auf Englisch schreibe, kann ich nicht wissen, in welche anderen Sprachen die Browser der Leute diese Geschichte übersetzen werden. Und selbst im Englischen kann ich nicht ausschließen, dass ich einen Schriftgestalter wie František Štorm oder Peter Biľak erwähne, dessen Name ein von mir verworfenes Zeichen enthalten könnte. Sie Mai natürlich entscheiden, dass Sie die Unterstützung für Griechisch oder Kyrillisch aufgeben oder eine zweite Untermenge Font mit nur diesen Zeichen erstellen und sie gleich dahinter in Ihren Font Stapel einfügen.

Wie in der Warnung erwähnt, sind nicht alle erweiterten Funktionen sinnvoll, wenn sie alle auf einmal verwendet werden. Unterschneidungsdaten sollten zum Beispiel nur dann gelöscht werden, wenn Sie sie wirklich nicht brauchen. Wann könnten Sie sie nicht brauchen? Nun, wenn Sie eine Schriftart nur zum Setzen von Zahlen mit Hilfe von Tabellen verwenden, sind Kerning-Daten irrelevant und Mai kann eliminiert werden, da Zeichen, die alle auf eine gemeinsame Breite passen, kein Kerning benötigen. Was Über hinting? Ich kann mir nur wenige Fälle vorstellen, in denen es eine gute Idee ist, die Hinting-Daten loszuwerden. Einer davon wäre, wenn Sie wissen, dass Sie die Schrift nur in einer ziemlich großen Größe verwenden werden.

Das war's. Mit diesen Schritten sind Sie auf dem Weg zu einem leichteren Seitenaufbau.

Ein paar Anmerkungen zum Schluss: Das asynchrone Laden von Font Mai kann mit diesem Open-Source-Webfont-Loader, der in Zusammenarbeit von Typekit und Google entwickelt wurde, ein wenig vereinfacht werden. Und obwohl das neueste Format, woff2, in unserem webfonts verfügbar ist, unterstützt FF Subsetter es derzeit nicht. Bleiben Sie dran für Updates an dieser Front.

Haben Sie Fragen zu diesen Themen? Lassen Sie es mich wissen!