93 318 54 36

So fügen Sie neue Schriftarten in WordPress hinzu

31/05/2022
Jose Fco. Llerena

In dieser Anleitung erklären wir Ihnen, wie Sie neue Schriftarten in WordPress hinzufügen.

Seien wir ehrlich, wir alle lieben Blogs und Websites mit klug ausgewählten Schriftarten. Sie machen nicht nur die gesamte Seite attraktiv, sondern binden den Benutzer auch mit ihren Inhalten.
Die Auswahl an WordPress-Schriftarten ist jedoch begrenzt und hängt vom verwendeten Thema ab. Das Gute ist, dass Sie benutzerdefinierte Schriftarten manuell zu WordPress hinzufügen oder einige Plugins verwenden können, die wir hier sehen werden.

Wählen Sie die Schriftart, die in WordPress verwendet werden soll

Es gibt mehrere Websites, von denen Sie kostenlose Webfonts erhalten können. Beispielsweise ist Google Font Service ein kostenloser Schriftartendienst von Google und verfügt über Schriftarten in mehr als 135 Sprachen. Edge Web Fonts hingegen ist ein kostenloser Schriftartendienst von Adobe, der seine umfangreiche Sammlung von Webschriftarten bietet. Sie können auch Typekit ausprobieren, eine kostenlose Bibliothek mit Tausenden von Web-Schriftarten, zusammen mit Fonts.com, das behauptet, über 150.000 Web- und Desktop-Schriftarten bereitzustellen.

Nachdem Sie nun die Schriftart gefunden haben, die Sie auf Ihrer Website verwenden möchten, ist es an der Zeit, ihre Formatierung zu überprüfen. Wir müssen klarstellen, dass nicht alle verfügbaren Schriftarten mit Webbrowsern kompatibel sind. Aber keine Sorge, auch wenn die von Ihnen gewählte Schriftart nicht unterstützt wird, können Sie sie dennoch in ein unterstütztes Format konvertieren.

Bevor wir Schriften von einem Format in ein anderes umwandeln, ist es eine gute Idee, einen kurzen Blick auf die verschiedenen Schriftformate zu werfen.

OpenType oder OpenType-Schriftarten

Abgekürzt als OTF, sind dies die am häufigsten verwendeten Webfonts und eine Marke von Microsoft. Sie funktionieren gut mit fast allen gängigen Browsern.

TrueType-Schriftarten

Diese auch als TTFs bezeichneten Schriftarten wurden in den 1980er Jahren von Microsoft und Apple entwickelt und sind für Windows- und Mac-Betriebssysteme weit verbreitet und werden von allen gängigen Browsern unterstützt.

Web Open Source oder Web Open Source

WOFF-Schriftarten werden häufig auf Webseiten verwendet und vom W3C empfohlen. Diese Schriftarten werden am häufigsten verwendet. Web-Design weil sie hauptsächlich mit allen Browsern kompatibel sind.

WAF 2.0

WOFF 2.0-Quellen sind gegenüber WOFF 1.0 aufgrund ihrer besseren Komprimierungsfähigkeiten im Vorteil. Sie sind nicht mit Safari und Internet Explorer kompatibel, funktionieren aber gut mit Google Chrome, Firefox und Opera.

Eingebettete offene oder eingebettete offene Schriftarten

Diese Arten von OTF-Schriftarten sind kompakt und werden als eingebettete Schriftarten in Webseiten verwendet und von allen gängigen Browsern unterstützt.

Wenn Sie die Schriftart gefunden haben, die Sie auf Ihrer WordPress-Website verwenden möchten, aber nicht sicher sind, ob sie mit allen Browsern kompatibel ist, verwenden Sie das Tool Web Font Generator. Mit diesem Tool können Sie jede Schriftart einfach in ein webfreundliches Format konvertieren:

  1. Greifen Sie auf das Werkzeug zu Webfont-Generator.
  2. Klicken Sie auf die Schaltfläche Schriftarten hochladen, um Ihre Schriftart hochzuladen, und stimmen Sie zu, dass die Schriftarten rechtlich für die Webeinbettung geeignet sind.
  3. Klicken Sie auf die Schaltfläche Herunterladen und speichern Sie die ZIP-Datei auf Ihrem Computer.
  4. In der .zip-Datei finden Sie die Schriftarten WOFF und WOFF 2.0 zusammen mit den CSS-Dateien und der Demo-HTML-Seite. Diese Schriftformate werden von fast allen Browsern unterstützt.

Fügen Sie neue Schriftarten in WordPress über Plugins hinzu

Plugins sind wahrscheinlich die einfachste Möglichkeit, Schriftarten in WordPress hinzuzufügen. Hier sind einige der beliebtesten Plugins, die unten aufgeführt sind:

WP-Google-Schriftart

Mit dem Plugin können Sie ganz einfach Schriftarten zu Ihrer WordPress-Website hinzufügen WP-Google-Schriftart für Schriftarten. Dieses Plugin enthält automatisch den notwendigen Code, um die neuen Schriftarten zu Ihrer WordPress-Site hinzuzufügen. Es bietet auch die Freiheit, benutzerdefinierte Schriftarten für bestimmte CSS-Elemente durch den WordPress-Administrator zu verwenden.

Installieren Sie einfach dieses Plugin aus dem offiziellen WordPress-Plugin-Verzeichnis und öffnen Sie den neuen Abschnitt, der im WordPress-Dashboard erstellt wird: Google Fonts. Das Google Font Control Panel, d. h. die Einstellungsseite, wird angezeigt. Hier können Sie Schriftarten auswählen und verschiedene Einstellungen wie Schriftart, zugewiesene Elemente usw. ändern.

Verwenden Sie eine beliebige Schriftart

Wenn Sie eine beliebige Quelle hinzufügen möchten, verwenden Sie Jede Schriftart ist ein weiteres Plugin, mit dem Sie Schriftarten zu Ihrer WordPress-Website hinzufügen können.

Sie können dieses Plugin aus dem offiziellen WordPress-Plugin-Verzeichnis installieren. Sobald die Installation abgeschlossen ist, gehen Sie zum Abschnitt Beliebige Quelle verwenden und erstellen Sie einen kostenlosen API-Schlüssel und klicken Sie auf die Schaltfläche Verifizieren.

Sobald die Überprüfung abgeschlossen ist, können Sie Schriftarten in den Formaten TTF, OTF und WFF hochladen. Mit dem Plugin können Sie auch benutzerdefinierten Elementen Schriftarten zuweisen.

Manuelles Hinzufügen neuer Schriftarten in WordPress

Wenn Sie Ihr WordPress nicht mit Plugins überladen möchten, können Sie Schriftarten manuell zu WordPress hinzufügen. Der Vorgang ist ganz einfach: Sie müssen die Schriftarten auf Ihr Hosting-Konto hochladen und die CSS-Datei des Themas bearbeiten.

  1. Befolgen Sie diese Anweisungen, um neue Schriftarten in WordPress hinzuzufügen:
  2. Laden Sie die Schriftart auf Ihren Computer herunter.
  3. Normalerweise finden Sie die Schriftartdateien in einer .zip-Datei. Entpacken Sie sie.
  4. Jetzt müssen Sie die Schriftartdatei (Sie können dafür den FTP-Client oder den Dateimanager verwenden) in das Verzeichnis wp-content/themes/your-theme/fonts hochladen (Sie müssen den Ordner „Fonts“ selbst erstellen, falls er nicht vorhanden ist). . In unserem Beispiel laden wir die Schriftart AguafinaScript-Regular.ttf.
  5. Nun gehst du in den WordPress-Adminbereich und öffnest Appearance -> Editor. Gehen Sie zur style.css-Datei. Scrollen Sie zum Ende dieser Datei und fügen Sie den folgenden Code hinzu (vergessen Sie nicht, die Schriftfamilie und die URL-Werte an Ihre Schriftart anzupassen):

@Schriftart {
Schriftfamilie: Aquafine Script-Regular;
src: url(https://www.b-fast.it/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}

Klicken Sie auf die Schaltfläche Datei aktualisieren, um Ihre Änderungen zu speichern.

Der Font-Face-Code lädt die Schriftart jedes Mal, wenn ein Besucher auf Ihre Website kommt. Die Schriftart wird jedoch noch nicht auf Elemente angewendet. Daher werden Sie keine Änderungen am Frontend sehen. Um die Schriftart einem bestimmten Element zuzuweisen, müssen Sie dieselbe style.css-Datei bearbeiten.

Um beispielsweise diese Schriftart Ihrem Titel (h1) zuzuweisen, geben Sie einfach ein

h1 {
Schriftfamilie: "Aquafina Script-Regular", Arial, serifenlos;
}

Fazit

Ich hoffe, dieses Tutorial hat Ihnen geholfen, es zu wissen
Für diejenigen, die mit CSS nicht vertraut sind, empfehlen wir die Verwendung der Plugin-Methode, da dies eine einfachere Methode ist und keine weiteren impliziten Programmierkenntnisse erfordert.

Müssen Sie Ihre Website aktualisieren?

Benötigen Sie einen unserer Webdesign-Services? In IndianWebs Wir verfügen über umfassende Erfahrung und sind mit einem Team von Programmierern und Webdesignern verschiedener Fachrichtungen in der Lage, eine breite Palette von Dienstleistungen bei der Erstellung individueller Webseiten anzubieten. Was auch immer Ihr Projekt ist, wir werden es in Angriff nehmen.