So fügen Sie benutzerdefinierte Schriftarten zu WordPress hinzu

Wenn Sie möchten, dass sich Ihre Website wirklich von der Masse abhebt, können Sie dies mit benutzerdefinierten Schriftarten erreichen. Es stehen Tausende von schönen benutzerdefinierten Schriftarten zur Auswahl, und indem Sie die richtigen für Ihr Projekt auswählen, können Sie eine Website erstellen, die nicht nur einzigartig ist, sondern auch Ihren Stil und Ihr Branding widerspiegelt. Wie fügst du also benutzerdefinierte Schriftarten zu WordPress hinzu?

In diesem Artikel behandeln wir alles, was Sie über das Anwenden benutzerdefinierter Schriftarten auf Ihrer Website wissen müssen. Das beinhaltet:

• Wo finde ich benutzerdefinierte Schriftarten?
• So fügen Sie Ihrer Website Google Fonts mit dem Plugin Easy Google Fonts hinzu
• Manuelles Hinzufügen von Google Fonts zu Ihrer Website (kein Plugin erforderlich)
• Hinzufügen von Adobe Fonts zu WordPress
• So fügen Sie Ihrem Webspace eine benutzerdefinierte Schriftart hinzu

Bereit anzufangen?

Wo finden Sie benutzerdefinierte Schriftarten?

Heutzutage werden viele Premium-WordPress-Themes mit einer Fülle von benutzerdefinierten Schriftarten ausgeliefert. Diese können jedoch oft das Aufblähen des Themas verstärken und die Ladezeiten Ihrer Website stärker beeinflussen, als Sie denken. Sie werden auch feststellen, dass Sie höchstens ein paar benutzerdefinierte Schriftarten verwenden, sodass die meisten Schriftarten, die Ihr Design bereitstellt, nie benötigt werden.

Daher empfehlen wir, ein leichtes WordPress-Theme zu wählen, dem Sie dann bei Bedarf benutzerdefinierte Schriftarten hinzufügen können. Es gibt eine Reihe von Orten, an denen Sie die richtigen benutzerdefinierten Schriftarten für Ihre Website finden können. Lass uns mal sehen…

• Google Fonts – Die beliebteste Wahl, Google Fonts, bietet ein kostenloses Verzeichnis mit über 900 Open-Source-Designerschriften, die in über 135 Sprachen verwendet werden können. Diese Schriftarten können schnell durchsucht und dann nahtlos in jedes Webdesign-Projekt integriert werden.
• Adobe Fonts (früher bekannt als Typekit) – Obwohl Typekit sowohl kostenlose als auch Premium-Versionen seines Dienstes anbot, die jetzt in Adobe Fonts umbenannt wurden, müssen Sie sich beim kostenpflichtigen Adobe Creative Cloud-Paket anmelden, um auf diese Ressource zugreifen zu können. Es stehen Tausende von Schriftarten zur Auswahl, alle Schriftarten sind für den persönlichen und kommerziellen Gebrauch lizenziert, und Sie können auch aus projektbezogenen Schriftartenpaketen auswählen, die perfekt für diejenigen sind, die kein Auge für Design haben.
• Font Squirrel – In der Font Squirrel-Bibliothek finden Sie eine Mischung aus kostenlosen und Premium-Schriftarten, letztere können als einmalige Käufe erworben werden. Auch hier können Sie aus Tausenden hochwertiger Schriftarten wählen, von denen die meisten kostenlos und kommerziell lizenziert sind.
• Fonts.com – Mit über 150.000 Desktop- und Web-Font-Produkten enthält Fonts.com eine beeindruckende Sammlung hochwertiger benutzerdefinierter Fonts. Im Font.com-Blog finden Sie außerdem eine Reihe interessanter Artikel, in denen typografische Tipps und Techniken ausgetauscht werden.
• FontPair – FontPair bietet eine etwas andere Erfahrung als die anderen Ressourcen und verbindet Schriftarten von Google Fonts, um Ihnen zu helfen, die richtigen Kombinationen von Schriftarten für Ihre Website zu finden.

Jetzt wissen Sie also, wo Sie benutzerdefinierte Schriftarten finden. Schauen wir uns als nächstes an, wie Sie Google Fonts zu Ihrer WordPress-Website hinzufügen.

So fügen Sie Google Fonts mit dem Plugin Easy Google Fonts zu WordPress hinzu

Da Google Fonts die beliebteste Ressource für benutzerdefinierte Schriftarten ist, sehen wir uns zunächst an, wie Sie Ihrer Website eine Schriftart aus dieser Bibliothek hinzufügen. Es gibt eine Reihe von Möglichkeiten, dies zu tun, aber die schnellste und einfachste Option ist die Verwendung des WordPress-Plugins Easy Google Fonts.

Easy Google Fonts ist ein kostenloses WordPress-Plugin, mit dem Sie benutzerdefinierte Schriftarten in Ihre WordPress-Website einfügen können, ohne eine Codezeile berühren zu müssen. Durch die Integration mit dem WordPress-Customizer ermöglicht Ihnen dieses Plugin das Einfügen und Verwenden von Google-Schriftarten im Front-End Ihrer Website in Echtzeit, ohne die Seite aktualisieren zu müssen.

Lassen Sie uns nun herausfinden, wie Sie dieses Plugin installieren und verwenden.

Schritt 1: Installieren Sie Easy Google Fonts

Um mit Easy Google Fonts zu beginnen, öffnen Sie Ihr WordPress-Dashboard und wählen Sie Plugins > Neu hinzufügen aus dem Menü.

Geben Sie dann Easy Google Fonts in die Suchfunktion ein und klicken Sie nach dem Abrufen des Plugins auf Installieren > Aktivieren .

Sie finden Easy Google Fonts jetzt unter Einstellungen in Ihrem WordPress-Menü.

Schritt 2: Schriftarten im WordPress Customizer bearbeiten

Nachdem Sie Easy Google Fonts installiert haben, wählen Sie in Ihrem WordPress-Menü Darstellung > Anpassen . Ihre Website wird nun im Frontend geöffnet, wo Sie feststellen, dass dem Customizer ein Typografie -Bereich hinzugefügt wurde.

Klicken Sie auf Typografie. Sie können dann die verschiedenen Bereiche Ihrer Website auswählen, in denen Sie eine benutzerdefinierte Google-Schriftart anwenden möchten (z. B. Absatz, Überschrift 2, Überschrift 3 usw.).

Klicken Sie unter dem Abschnitt, den Sie bearbeiten möchten, auf Schriftart bearbeiten . Sie können dann die Schriftart auswählen, die Sie verwenden möchten – Sie können direkt auf Ihrer Website eine Vorschau anzeigen, wie jede Schriftart aussieht.

Sie können nicht nur die Schriftart ändern, sondern auch Farbe, Größe, Positionierung und vieles mehr. Wenn Sie mit Ihrer neuen Schriftart zufrieden sind, klicken Sie auf Veröffentlichen .

Schritt 3: Erstellen Sie benutzerdefinierte Schriftsteuerelemente

Mit den Standardsteuerelementen von Easy Google Fonts können Sie die Schriftarten der Absatzabschnitte und Überschriften 1-6 ändern. Allerdings können nicht alle Elemente Ihres Designs von den Standard-Schriftsteuerelementen verwaltet werden.

Wenn Sie ein anderes Element Ihres Designs ändern möchten (außer einem Absatz oder einer Überschrift), müssen Sie Ihre eigenen benutzerdefinierten Schriftartsteuerelemente erstellen. Obwohl Easy Font Control Ihnen dies leicht ermöglicht, benötigen Sie dennoch ein grundlegendes Verständnis von CSS-Selektoren.

Um benutzerdefinierte Schriftsteuerelemente hinzuzufügen, wählen Sie in Ihrem WordPress-Dashboard Einstellungen > Google Fonts aus. Geben Sie dann auf der Registerkarte Edit Font Controls Ihrer neuen Font Control-Gruppe einen geeigneten Namen und wählen Sie dann Create Font Control . Hier erstellen wir eine Schriftsteuerung für Blockzitate…

Fügen Sie unter CSS-Selektoren hinzufügen den CSS-Selektor für das Element hinzu, das Sie verwalten möchten. Sie können mehr als ein Element hinzufügen, wenn Sie möchten. Wählen Sie dann Schriftsteuerung speichern aus.

Zurück im Customizer im Frontend deiner Website findest du nun unter Typography die Option Theme Typography, wo du auf deine neuen Custom Controls zugreifen kannst.

Sie können jetzt eine neue benutzerdefinierte Schriftart für das spezifische benutzerdefinierte Element auswählen und alle anderen Darstellungs- und Positionierungseinstellungen ändern.

Easy Custom Fonts ist eine großartige Option für alle, die benutzerdefinierte Schriftarten von Google zu WordPress hinzufügen möchten. Wenn Sie es jedoch vorziehen, können Sie Google Fonts auch manuell zu Ihrer Website hinzufügen, indem Sie nur Code verwenden, kein Plugin. Lassen Sie uns herausfinden, wie das geht …

So fügen Sie Google Fonts manuell zu WordPress hinzu (kein Plugin erforderlich)

Wenn Sie Google Fonts lieber manuell zu WordPress hinzufügen möchten, benötigen Sie sehr grundlegende Programmierkenntnisse.

Schritt 1: Wählen Sie eine Google-Schriftart aus

Öffnen Sie zunächst Google Fonts und wählen Sie die benutzerdefinierte Schriftart aus, die Sie Ihrer Website hinzufügen möchten.

Klicken Sie dann auf der Seite der Schriftart auf Diese Schriftart auswählen . Hier haben wir die Schriftart Indie Flower ausgewählt.

Auf Ihrem Bildschirm erscheint nun ein Popup. Abhängig von der ausgewählten Schriftart können Sie auf eine Auswahl an Anpassungsoptionen für Schriftstärken und -stile zugreifen sowie die Einbettungsinformationen anzeigen.

Schritt 2: Betten Sie den Code der benutzerdefinierten Schriftart in Ihre WordPress-Website ein

Als nächstes müssen Sie den Einbettungscode kopieren (siehe Popup oben) und in den Abschnitt <head> Ihres WordPress-Themes einfügen. Der einfachste Weg, dies zu tun, ist die Installation des kostenlosen WordPress-Plugins Insert Headers and Footers. Mit diesem Plugin können Sie Ihrer Website schnell Code hinzufügen, ohne Ihre Designdateien bearbeiten zu müssen.

Öffnen Sie nach der Installation die Plugin-Einstellungen, indem Sie in Ihrem WordPress-Dashboard Einstellungen > Kopf- und Fußzeilen einfügen auswählen. Sie müssen dann Ihren Google Fonts-Einbettungscode in den Header-Bereich einfügen.

Wenn Sie möchten, können Sie auch die Datei header.php Ihres untergeordneten Designs bearbeiten.

Schritt 3: Wenden Sie die neue Schriftart mit CSS an

Nachdem Sie Ihrer Website den HTML-Code für Ihre benutzerdefinierte Schriftart hinzugefügt haben, können Sie nun CSS verwenden, um Ihre neue benutzerdefinierte Schriftart anzuwenden. Im Google Fonts-Popup finden Sie die CSS-Regeln, die für Ihre neue Schriftart spezifisch sind.

Zurück im Customizer auf der Live-Seite deiner Website wähle Zusätzliches CSS. Hier können Sie CSS-Code eingeben, um die Schriftarten auf Ihrer Website anzupassen. Unten können Sie sehen, dass wir den Indie Flower CSS-Code auf die Kopfzeile 2 und die Absatzabschnitte angewendet haben…

Der Customizer zeigt Ihnen die Schriftänderungen in Echtzeit, und wenn Sie mit den Ergebnissen zufrieden sind, klicken Sie auf Veröffentlichen .

So fügen Sie Adobe-Schriftarten zu WordPress hinzu

Wenn Sie sich für das Premium-Creative Cloud-Paket von Adobe angemeldet haben, können Sie alle benutzerdefinierten Schriftarten zu Ihrer WordPress-Website hinzufügen. Dieser Vorgang ist dem manuellen Hinzufügen von Google Fonts zu Ihrer Website sehr ähnlich. Werfen wir einen kurzen Blick darauf.

Schritt 1: Wählen Sie eine Adobe-Schriftart aus

Das Wichtigste zuerst: Sie müssen die umfangreiche Schriftartenbibliothek von Adobe durchsuchen und eine Schriftart/en auswählen, die zu Ihrem Projekt passen. Nachdem Sie eine Auswahl getroffen haben, klicken Sie auf das Symbol </> , um die Schriftart einem neuen Webprojekt hinzuzufügen.

Sie werden nun aufgefordert, Ihrem Webprojekt einen Namen zu geben und die Kontrollkästchen zu verwenden, um die Schriftstärken und -stile auszuwählen, die Sie einbeziehen möchten. Wählen Sie dann Projekt erstellen aus.

Schritt 2: Betten Sie den Code der Adobe-Schriftart in Ihre WordPress-Website ein

Der nächste Schritt besteht darin, den Code, den Adobe für die von Ihnen gewählte Schriftart bereitstellt, in Ihre WordPress-Website einzubetten.

Dies folgt genau dem gleichen Prozess wie das Einbetten des Google Fonts-Codes. Betten Sie den Code einfach in das <head> -Tag auf Ihrer Website ein oder verwenden Sie das WordPress-Plugin Kopf- und Fußzeilen einfügen (wie zuvor besprochen).

Schritt 3: Wenden Sie die neue Schriftart mit CSS an

Auch hier können Sie, wie bei Google Fonts, jetzt Ihre neue benutzerdefinierte Adobe-Schriftart mithilfe von CSS-Regeln anwenden. In Ihrem Adobe-Dashboard werden auf Ihrer Webprojektseite der Name der CSS-Schriftfamilie sowie der Schriftstil und die numerische Stärke für jeden ausgewählten Schrifttyp aufgeführt.

Zurück auf Ihrer WordPress-Website können diese CSS-Regeln im Customizer unter Additional CSS verwendet werden.

Jetzt haben wir also behandelt, wie man benutzerdefinierte Schriftarten zu WordPress hinzufügt, indem man die äußerst beliebten kostenlosen Google Fonts sowie die beeindruckende Premium-Ressource Adobe Fonts verwendet.

Die letzte Option, die wir besprechen werden, ermöglicht es Ihnen jedoch, jede benutzerdefinierte Schriftart zu Ihrer Website hinzuzufügen, indem Sie sie auf den Server Ihrer Website hochladen. Lassen Sie uns mehr herausfinden.

So fügen Sie Ihrem Webspace eine benutzerdefinierte Schriftart hinzu

Das Hinzufügen einer benutzerdefinierten Schriftart zu Ihrem Webspace ist relativ einfach, aber auch hier benötigen Sie ein grundlegendes CSS-Verständnis, um die Schriftart auf Ihrer Website anzuwenden.

Schritt 1: Laden Sie eine benutzerdefinierte Schriftart herunter

Wie am Anfang dieses Artikels erwähnt, gibt es zahlreiche Ressourcen, in denen Sie kostenlose oder benutzerdefinierte Premium-Schriftarten für die Verwendung auf Ihrer Website auswählen können. Stellen Sie bei der Auswahl einer benutzerdefinierten Schriftart beim Hinzufügen zu Ihrem Server sicher, dass Sie das Recht haben, sie zu verwenden, und dass sie heruntergeladen werden kann.

Hier haben wir die kostenlose benutzerdefinierte Schriftart Milkshake von Squirrel Fonts heruntergeladen.

Es ist wichtig, dass Sie Ihre benutzerdefinierte Schriftart in einem Webfont-Format herunterladen. Das Webfont-Containerformat WOFF genießt die größte browserübergreifende Unterstützung, aber Google empfiehlt, mehrere Formate bereitzustellen, um Benutzern auf allen Geräten ein einheitliches Erlebnis zu bieten.

Wenn Sie Ihre benutzerdefinierte Schriftart in ein anderes Format konvertieren müssen, bietet Squirrel Font ein kostenloses Webfont-Generator-Tool, mit dem Sie dies tun können.

Schritt 2: Laden Sie die benutzerdefinierte Schriftart auf Ihren Server hoch

Der nächste Schritt besteht darin, Ihre benutzerdefinierte Schriftart auf Ihren Server hochzuladen. Öffnen Sie dazu den Dateimanager im cPanel Ihrer Website.

Erstellen Sie dann in Ihrem aktiven Themenordner einen neuen Ordner mit dem Namen Schriftarten und laden Sie Ihre benutzerdefinierte Schriftart hier hoch.

Wenn Sie mehrere Formate Ihrer Schriftart haben, laden Sie sie alle in den Ordner Schriftarten hoch. Ihre benutzerdefinierte Schriftart wurde nun zu Ihrem Webspace hinzugefügt.

Schritt 3: Verwenden Sie CSS, um die benutzerdefinierte Schriftart auf Ihre Website anzuwenden

Sie müssen nun die benutzerdefinierte Schriftart auf Ihre Website anwenden. Zunächst müssen Sie die Schriftart in das Stylesheet Ihres Designs laden. Öffnen Sie dazu den WordPress Customizer und fügen Sie unter Zusätzliches CSS diesen Code hinzu:

 @Schriftart {
    Schriftfamilie: Milkshake;
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         format("woff");
}

Stellen Sie vor allem sicher, dass Sie den Schriftartnamen und die URL ändern (kopieren Sie die URL für die Schriftartdatei auf Ihrem Server).

Sie können dann fortfahren und CSS-Regeln verwenden, um die Schriftarten auf Ihrer Website zu aktualisieren. Hier ist ein Beispiel dafür, wie die benutzerdefinierte Schriftart auf Kopfzeile 3 und Absatzabschnitte angewendet wird:

Wenn Sie mit dem Aussehen Ihrer neuen benutzerdefinierten Schriftart auf Ihrer Website zufrieden sind, klicken Sie auf Veröffentlichen .

Abschließende Gedanken zum Hinzufügen benutzerdefinierter Schriftarten zu WordPress

Wie Sie sehen können, gibt es zahlreiche Ressourcen, mit denen Sie die perfekte Schriftart für Ihr Projekt finden können, wenn Sie nach einer schönen und aufmerksamkeitsstarken benutzerdefinierten Schriftart suchen. Und darüber hinaus sind Sie jetzt mit dem Wissen ausgestattet, wie Sie benutzerdefinierte Schriftarten erfolgreich zu WordPress hinzufügen können. Also, welche benutzerdefinierten Schriftarten werden Sie wählen?

Haben Sie Fragen zum Hinzufügen benutzerdefinierter Schriftarten zu WordPress? Bitte fragen Sie in den Kommentaren unten nach …