Hochladen benutzerdefinierter Schriftarten mit dem Hash Custom Font Uploader Plugin

Sind Sie es leid, auf Ihrer Website immer die gleichen alten Schriftarten zu verwenden, und möchten sie anders aussehen lassen? Wenn Sie kein Programmierexperte sind, machen Sie sich keine Sorgen! Wir haben eine einfache Anleitung, die Ihnen eine einfache Möglichkeit zeigt, Ihre Lieblingsschriftarten zu Ihren WordPress-Themes hinzuzufügen. Diese Dokumentation führt Sie Schritt für Schritt durch den Prozess des Hochladens benutzerdefinierter Schriftarten, sodass Sie Ihrer Website ganz einfach einen einzigartigen Stil verleihen können.

PLUGIN-INSTALLATION

Um mit dem Anpassen und Hochladen Ihrer Schriftart zu beginnen, müssen Sie ein Plug-in namens Hash Custom Font Uploader installieren.

*Hinweis: Dieses Plugin ist nur mit Themes von HashThemes kompatibel*

Installation des Hash Custom Font Uploaders

Um den Hash-Font-Uploader zu installieren, folgen Sie den Anweisungen:

• Gehen Sie zu Plugins > Neue Plugins hinzufügen > Plugins hochladen .
• Klicken Sie auf Plugin hochladen und wählen Sie die ZIP-Datei von Ihrem PC aus.
• Nachdem Sie die ZIP-Datei hochgeladen haben, klicken Sie auf Jetzt installieren .
• Anschließend aktivieren Sie das Plugin.
• Sie können sehen, dass das Plugin als Hash Custom Font Uploader angezeigt wird.

Sobald Sie das Plugin installiert haben, können Sie Ihre benutzerdefinierten Schriftarten verwenden, um den Hochladevorgang für Schriftarten zu starten.

Wir führen Sie Schritt für Schritt durch den Prozess.

AUSWAHL DER SCHRIFTART

Themes powered by HashThemes bietet eine große Auswahl an Google-Schriftarten, aus denen Sie wählen können. Es gibt mehr als 800 Google-Schriftarten.

Wenn Sie jedoch auf der Suche nach etwas Besonderem sind, können Sie jederzeit zahlreiche Schriftarten-Websites erkunden, die eine noch größere Auswahl an Schriftarten bieten, die von mehreren Schriftarten-Designern erstellt wurden und auf verschiedenen Websites kostenlos oder kostenpflichtig verfügbar sind.

Font Squirrel ist ein Paradebeispiel für eine solche Website. Diese Plattform gibt Ihnen nicht nur die Freiheit, Schriftarten kostenlos herunterzuladen, sondern optimiert auch den Prozess der Konvertierung Ihrer Dateien in die für das Hochladen von Schriftarten erforderlichen Formate.

Darüber hinaus ist es erwähnenswert, dass zahlreiche hochwertige Schriftarten zum Kauf angeboten werden, für die nur eine geringe Gebühr anfällt und die sofort einsatzbereit sind.

In diesem Tutorial zeigen wir, wie Sie das Hochladen von Schriftarten mit Font Squirrel vereinfachen können.

Wir benötigen zwei Schriftartdateiformate (WOFF und WOFF2), um im Hash Custom Font Uploader verwendet zu werden. Wenn Sie mehr über die Variationen der Schriftart erfahren möchten und warum Dateien in das WOFF- und WOFF2-Format konvertiert werden, lesen Sie weiter. Wenn Sie sofort mit dem Hochladen eines Tutorials für benutzerdefinierte Schriftarten beginnen möchten, klicken Sie hier.

VERSCHIEDENE DATEIFORMATE VERSTEHEN

Bevor wir mit dem Tutorial beginnen, machen wir uns mit einigen typischen Dateiformaten vertraut, in denen Schriftarten vorliegen können.

TrueType-Schriftart (.ttf): Ein .ttf-Schriftartformat ist ein weit verbreitetes Schriftformat für Desktop- und Web-Typografie. Dieser Dateityp ist sowohl mit Windows- als auch mit macOS-Systemen kompatibel.

OpenType-Schriftart (.otf): Ein Open Type-Format ist eine Erweiterung des True Type-Formats. Dieses Format ermöglicht zusätzliche typografische Funktionen und ist sowohl mit Windows als auch mit macOS kompatibel.

Web Open Font Format (.woff): Dieser Formattyp ist speziell für die Nutzung im Internet konzipiert. Es bietet eine gute Komprimierung und Browserkompatibilität.

Web Open Font Format 2 (.woff2): Dieses Dateiformat ist eine verbesserte Version des Web Open Font-Formats und bietet überlegene Komprimierung und Leistung für Web-Schriftarten.

PostScript-Schriftart Typ 1 (.pfb): Das Schriftformat PostScript ist eine ältere Version des Schriftformats, das hauptsächlich in der PostScript-Druckindustrie verwendet wird.

SVG-Schriftart (.svg): Basierend auf XML werden SVG-Schriftarten häufig für Websymbole und spezielle Designs verwendet.

Bitmap-Schriftart (.fon): Schriftarten, die als Pixelraster dargestellt werden und für Anzeigen mit niedriger Auflösung geeignet sind.

Dies sind einige der Schriftartformate, die für verschiedene Zwecke verwendet werden. Der Grund, sich mit diesen Formaten vertraut zu machen, besteht darin, dass einige Dateien für einen zusätzlichen Vorteil konvertiert werden müssen.

Die am häufigsten verwendeten Dateiformate sind TTF (True Type Font) und OTF (Open Type Font) für Desktop- und Web-Typografie.

Ab 2021 waren jedoch Web Open Font Format (WOFF) und WOFF2 (Web Open Font Format 2) die am häufigsten verwendeten Schriftformate für die Webnutzung.

*Hinweis: Es ist wichtig zu wissen, dass sich die Beliebtheit der Schriftarten im Laufe der Zeit ändern kann und neue Technologien die alten überschreiben können.*

Warum ist es notwendig, Dateien in die Formate .woff und .woff2 zu ändern?

Während die TTF- und OTF-Dateien direkt im Internet hochgeladen werden können, hat die Konvertierung in die Dateiformate .woff und .woff2 mehrere Vorteile:

1. Komprimierung:

Der Hauptgrund für die Konvertierung von TTF- und OTF-Dateien in die Formate WOFF und WOFF2 besteht darin, dass sie in ihrer Größe komprimiert werden. Wenn die Dateigröße kleiner ist, führt dies zu schnelleren Ladezeiten von Webseiten. Dies ist auch für die Verbesserung des Benutzererlebnisses und der SEO-Rankings von entscheidender Bedeutung.

2. Weboptimierung:

Die Formate WOFF und WOFF2 eignen sich gut für das Web und werden weithin akzeptiert, einschließlich der Funktion zur Unterteilung von Schriftarten, die es Benutzern ermöglicht, nur die für eine bestimmte Webseite erforderlichen Zeichen und Glyphen einzufügen, wodurch die Dateigröße weiter reduziert wird.

3. Browserkompatibilität:

Moderne Webbrowser unterstützen weitgehend die Formate WOFF und WOFF2 und gewährleisten so eine zuverlässige Schriftwiedergabe auf verschiedenen Plattformen und Geräten. TTF- und OTF-Dateien können unterschiedliche Kompatibilitäts- und Unterstützungsgrade aufweisen.

4. Lizenzierung:

Viele Schriftartenlizenzen erlauben tendenziell die Verwendung der Formate WOFF und WOFF2 im Web, während sie möglicherweise stärkere Einschränkungen für TTF- und OTF-Dateien haben. Durch die Konvertierung von Schriftarten in das WOFF/WOFF2-Format können Sie sicherstellen, dass Sie die Lizenzanforderungen für Schriftarten einhalten.

5. Leistung:

Die Schriftformate WOFF und WOFF2 sind im Allgemeinen optimiert. Daher bieten sie in Webumgebungen eine bessere Leistung, was zu einer flüssigeren und schnelleren Textwiedergabe führt.

Dies sind die Grundvoraussetzungen, um die TTF- und OTF-Dateien in WOFF/WOFF2-Dateien zu konvertieren. Als Nächstes führen wir Sie durch den Prozess zum Hochladen von Schriftarten.

AUSWAHL VON SCHRIFTARTEN AUF DER WEBSITE „FONT SQUIRRE L“.

Beginnen wir nun mit der Schriftartenauswahl und erkunden Sie die Schriftart weiter.

• Geben Sie „Sinkin Sans“ in die Suchleiste ein und Sie sehen eine Schriftartenvorschau mit ihren verschiedenen Variationen.
• Laden Sie als Nächstes die OTF-Datei für die Schriftart Sinkin Sans herunter.

Für dieses Tutorial haben wir die Schriftart „Sinkin Sans“ gewählt . Sie können jede beliebige Schriftart auswählen und verwenden. Außerdem kann die Schriftart, wie bereits erwähnt, in verschiedenen Formaten vorliegen. Hier liegt die Sinkin Sans-Schriftartdatei im OTF-Format vor.

• Extrahieren Sie die ZIP-Datei in Ihren angegebenen Ordner.

WEBFONT-GENERATOR

Die im Hash Custom Font Uploader zu verwendenden Schriftarten sollten in den Dateiformaten WOFF und WOFF2 vorliegen. Wenn die heruntergeladene Schriftart also in den Dateiformaten WOFF und WOFF2 vorliegt, können Sie den folgenden Schritt überspringen und direkt mit dem Hash Custom Font Uploader fortfahren. Wenn die heruntergeladene Schriftart jedoch nicht in den Formaten WOFF und WOFF2 vorliegt, müssen Sie den Schriftartengenerator/-konverter verwenden, um WOFF- und WOFF2-Schriftartendateien zu generieren.

• Wir werden die Online-Anwendung Webfont Generator der Font Squirrel-Website verwenden.
• Klicken Sie auf den Webfont-Generator, wie in Nr. 3 im folgenden Screenshot gezeigt.

• Um Ihr Kit zu erhalten, klicken Sie auf die Schaltfläche „Schriftarten hochladen“ und laden Sie die heruntergeladenen/extrahierten Schriftdateien hoch

• In diesem Fall wählen wir „Sinkin Sans Regular“.
• Wenn Sie Ihre Auswahl getroffen haben, klicken Sie einfach auf Öffnen.
• Laden Sie das Kit herunter .

• Extrahieren Sie die heruntergeladene Zip-Datei. Sie werden sehen, dass der Webfont-Generator die .WOFF- und .WOFF2-Dateien erstellt hat, die für unser Hash Custom Font Uploader Plugin erforderlich sind.

Hochladen benutzerdefinierter Schriftarten über das Hash Custom Font Uploader-Plugin

Die Schriftart Sinkin Sans ist fast bereit für die Verwendung auf Ihrer Website und Sie sind nur noch wenige Schritte entfernt. Bitte befolgen Sie die nachstehenden Anweisungen:

• Gehen Sie zum Hash Custom Font Uploader
• Laden Sie dann die .woff2- und .woff-Schriftartendateien wie angewiesen hoch und stellen Sie sicher, dass die Schriftstärke „Normal 400“ ausgewählt ist.
• Geben Sie Ihrer Schriftart im nächsten Schritt einen Namen, damit Sie sie bei Bedarf leichter finden können. Da es sich in diesem Fall um die Schriftart Sinkin Sans handelt, haben wir sie entsprechend benannt.
• Speichern Sie es, indem Sie auf „Einstellungen speichern“ klicken.
• Nach dem Speichern sehen Sie unten, wie die Schriftart Sinkin Sans angezeigt wird. Dies zeigte auch an, dass die Schriftart funktioniert und Sie sie jetzt verwenden können.

Hochladen von Variationen für benutzerdefinierte Schriftarten

Eine Schriftart kann unterschiedliche Stile und Erscheinungsbilder haben. Hier erfahren Sie, wie Sie verschiedene Schriftstile derselben Schriftart hinzufügen.

Die Schriftart, die wir oben ausgewählt haben (Sinkin Sans), gibt es in verschiedenen Variationen wie dünn, hell, normal, mittel, halbfett, fett, schwarz und kursiv.

Hier wählen wir den Semi Bold -Stil von Sinkin Sans aus. Und wir werden anstelle von „Font Squirrel“ eine andere Schriftartenkonverter-Website verwenden.

Hinweis: Es gibt viele andere Konverter im Internet. Hier verwenden wir CloudConvert.

• Gehen Sie zunächst zum OTF-Konverter, der unsere Dateien in .woff2- und .woff-Dateien konvertiert.
• Hier können Sie sehen, dass es Ihnen hilft, Dateien einfach zu konvertieren. Wählen Sie die Dateien aus, in die Sie konvertieren möchten. Hier werden wir die Datei Sinkin Sans semibold .otf in .woff und .woff2 konvertieren
• Nachdem Sie die zu konvertierende Datei ausgewählt haben, klicken Sie auf Ihrem Desktop auf „ Datei auswählen“ .
• Konvertieren Sie die Dateien. Dies wird einige Zeit dauern.
• Nachdem die Konvertierung abgeschlossen ist, speichern Sie die erforderlichen Dateien auf Ihrem PC.

• Gehen Sie zum Hash Custom Font Uploader
• Und während Sie der gleichen Schriftart die Stärke hinzufügen, klicken Sie auf „ Schriftstärke hinzufügen“ , anstatt auf „Neue Schriftart hinzufügen“ zu klicken.

• Laden Sie dann die .woff2- und .woff-Schriftartendateien wie angewiesen hoch und stellen Sie sicher, dass Sie als Schriftstärke „SemiBold 600“ wählen.
• Klicken Sie auf die Schaltfläche „Einstellungen speichern“ , um sie zu speichern.
• Sie können sehen, wie der Text angezeigt wird. Der Text ist fetter als der obige Text.
• Ebenso können Sie weitere Schriftartvariationen hinzufügen, indem Sie auf „ Schriftstärke hinzufügen “ klicken, und eine andere Schriftart, indem Sie auf „ Neue Schriftart hinzufügen “ klicken.

VERWENDUNG DER SCHRIFTARTEN AUF IHRER WEBSITE

Lassen Sie uns die hochgeladene Schriftart auf der Website verwenden.

• Gehen Sie zu „Darstellung“ > „Anpassen“ .
• Suchen Sie in den Typografie-Einstellungen die Option „Körper“ , um weitere Anpassungen vorzunehmen.“
• Suchen Sie in der Option „Schriftfamilie“ nach „Sinkin Sans“ und wählen Sie es aus.
• Sobald die Schriftart ausgewählt ist, zeigt „ Schriftstärke/-stil “ die Variante an, die wir zuvor hinzugefügt haben (Normal 400 und Halbfett).
• Wählen Sie die entsprechende Variante aus und sehen Sie sich die Änderungen dann live im rechten Customizer-Fenster an.
• Sie können die Schriftgröße, den Buchstabenabstand und die Zeilenhöhe nach Ihren Wünschen anpassen.
• Wenn Sie zufrieden sind, klicken Sie auf „Veröffentlichen“, um die Änderungen zu übernehmen, und Ihre Website erhält ihr neues Aussehen.

Das ist alles, was Sie tun müssen, um Ihre benutzerdefinierten Schriftarten hochzuladen. Wenn Sie Unklarheiten haben, können Sie sich jederzeit an uns wenden.