Site Overlay

Hinzufügen von benutzerdefinierten Schriftarten zu WordPress

Wenn Sie möchten, dass sich Ihre Website wirklich von der Masse abhebt, dann können Sie dies mit benutzerdefinierten Schriftarten erreichen. Es gibt Tausende von schönen benutzerdefinierten Schriftarten zur Auswahl, und wenn 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ügen Sie also benutzerdefinierte Schriftarten zu WordPress hinzu?

In diesem Artikel erfahren Sie alles, was Sie über die Anwendung benutzerdefinierter Schriftarten auf Ihrer Website wissen müssen. Dazu gehören:

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

Bereit für den Anfang?

Wo finden Sie benutzerdefinierte Schriftarten?

Google Fonts

Google Fonts

Heutzutage werden viele Premium-WordPress-Themes mit einer Vielzahl von benutzerdefinierten Schriftarten geliefert. Diese können jedoch oft das Theme aufblähen und die Ladezeiten Ihrer Website stärker beeinträchtigen, als Sie denken. Außerdem werden Sie feststellen, dass Sie höchstens ein paar benutzerdefinierte Schriftarten verwenden, so dass Sie die meisten der von Ihrem Theme bereitgestellten Schriftarten nie benötigen werden.

Daher empfehlen wir Ihnen, ein leichtgewichtiges WordPress-Theme zu wählen, dem Sie bei Bedarf benutzerdefinierte Schriftarten hinzufügen können. Es gibt eine Reihe von Stellen, an denen Sie die richtigen benutzerdefinierten Schriftarten für Ihre Website finden können. Werfen wir einen Blick darauf…

  • Google Fonts – Die beliebteste Wahl, Google Fonts, bietet ein kostenloses Verzeichnis von über 900 Open-Source-Designer-Schriften, die in über 135 Sprachen verwendet werden können. Diese Schriften 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, der jetzt unter dem Namen Adobe Fonts firmiert, müssen Sie sich für das kostenpflichtige Adobe Creative Cloud-Paket anmelden, um Zugriff auf diese Ressource zu erhalten. Sie können aus Tausenden von Schriften wählen, alle Schriften sind für den persönlichen und kommerziellen Gebrauch lizenziert, und Sie können auch aus projektbezogenen Schriftartenpaketen wä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, wobei letztere als einmalige Käufe erworben werden können. Auch hier können Sie aus Tausenden von hochwertigen Schriftarten wählen, von denen die meisten kostenlos und kommerziell lizenziert sind.
  • Fonts.com – Mit über 150.000 Desktop- und Web-Schriftarten bietet Fonts.com eine beeindruckende Sammlung von hochwertigen benutzerdefinierten Schriftarten. Im Font.com-Blog finden Sie außerdem eine Reihe interessanter Artikel mit typografischen Tipps und Techniken.
  • FontPair – FontPair bietet eine etwas andere Erfahrung als die anderen Ressourcen und stellt Schriftarten von Google Fonts zusammen, um Ihnen zu helfen, die richtigen Kombinationen von Schriftarten für Ihre Website zu finden.

So, jetzt wissen Sie, wo Sie benutzerdefinierte Schriftarten finden. Als Nächstes sehen wir uns an, wie Sie Google Fonts zu Ihrer WordPress-Website hinzufügen können.

Mit dem Plugin Easy Google Fonts Google Fonts zu WordPress hinzufügen

Easy Google Fonts

Easy Google Fonts

Da Google Fonts die beliebteste Quelle für benutzerdefinierte Schriftarten ist, sehen wir uns zunächst an, wie Sie eine Schriftart aus dieser Bibliothek zu Ihrer Website hinzufügen können. Es gibt mehrere Möglichkeiten, aber die schnellste und einfachste 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 auch nur eine Zeile Code anfassen zu müssen. Durch die Integration in den WordPress Customizer ermöglicht dieses Plugin das Einfügen und Verwenden von Google-Schriftarten im Frontend Ihrer Website in Echtzeit, ohne dass Sie die Seite aktualisieren müssen.

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

Schritt 1: Installieren Sie Easy Google Fonts

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

Geben Sie dann Easy Google Fonts in die Suchfunktion ein, und sobald das Plugin gefunden wurde, klicken Sie auf Installieren > Aktivieren.

Plugin aktivieren

Plugin aktivieren

Sie finden Easy Google Fonts nun 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ü den Punkt Erscheinungsbild > Anpassen. Ihre Website wird nun im Frontend geöffnet, wo Sie feststellen werden, dass dem Customizer ein Bereich Typografie hinzugefügt wurde.

Customizer Typografie

Customizer Typografie

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, Kopfzeile 2, Kopfzeile 3 usw.).

Standardtypografie

Standardtypografie

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 in der Vorschau sehen, wie jede Schriftart direkt auf Ihrer Website aussieht.

Schriftart bearbeiten

Schriftart bearbeiten

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

Schritt 3: Benutzerdefinierte Schriftart-Steuerelemente erstellen

Mit den Standard-Steuerelementen von Google Fonts können Sie die Schriftarten von Absatzabschnitten und Überschriften 1-6 ändern. Allerdings lassen sich nicht alle Elemente Ihres Themas mit den Standard-Schriftsteuerungen verwalten.

Wenn Sie ein anderes Element Ihres Themas ändern möchten (nicht nur einen Absatz oder eine Überschrift), müssen Sie Ihre eigenen benutzerdefinierten Schriftsteuerungen erstellen. Auch wenn dies mit Easy Font Control leicht möglich ist, benötigen Sie dennoch ein grundlegendes Verständnis von CSS-Selektoren.

Um benutzerdefinierte Schriftartensteuerungen hinzuzufügen, wählen Sie Einstellungen > Google Fonts in Ihrem WordPress-Dashboard. Geben Sie dann auf der Registerkarte Schriftsteuerelemente bearbeiten Ihrer neuen Schriftsteuerelementgruppe einen passenden Namen und wählen Sie dann Schriftsteuerelement erstellen. Hier werden wir eine Schriftsteuerung für Blockquotes erstellen…

Blockquote

Blockquote

Unter CSS-Selektoren hinzufügen fügen Sie den CSS-Selektor für das Element hinzu, das Sie verwalten möchten. Sie können mehrere Elemente hinzufügen, wenn Sie möchten. Wählen Sie dann Save Font Control.

Edit Font Controls

Edit Font Controls

Zurück im Customizer auf dem Frontend Ihrer Website finden Sie nun unter Typography die Option Theme Typography, wo Sie auf Ihre neuen benutzerdefinierten Steuerelemente zugreifen können.

Theme Typography

Theme Typography

Sie können nun eine neue benutzerdefinierte Schriftart für das spezifische benutzerdefinierte Element auswählen und alle anderen Einstellungen für Aussehen und Positionierung ändern.

Blockquotes

Blockquotes

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 vorziehen, können Sie Google Fonts jedoch auch manuell zu Ihrer Website hinzufügen, indem Sie nur den Code und kein Plugin verwenden. Lassen Sie uns herausfinden, wie das geht…

Manuelles Hinzufügen von Google Fonts zu WordPress (kein Plugin erforderlich)

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

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

Um zu beginnen, öffnen Sie 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.

Indie Flower

Indie Flower

Ein Popup wird nun auf Ihrem Bildschirm erscheinen. Je nach ausgewählter Schriftart haben Sie Zugriff auf eine Reihe von Anpassungsoptionen für Schriftgewichte und -stile und können die Einbettungsinformationen anzeigen.

Indie Flower Embed Info

Indie Flower Embed Info

Schritt 2: Einbetten des Codes der benutzerdefinierten Schriftart in Ihre WordPress-Website

Als Nächstes müssen Sie den Embed-Code (siehe Popup oben) kopieren und in den <head>-Abschnitt Ihres WordPress-Themas einfügen. Am einfachsten geht das, wenn Sie das kostenlose WordPress-Plugin Insert Headers and Footers installieren. Mit diesem Plugin können Sie schnell Code zu Ihrer Website hinzufügen, ohne Ihre Theme-Dateien bearbeiten zu müssen.

Nach der Installation öffnen Sie die Plugin-Einstellungen, indem Sie in Ihrem WordPress-Dashboard Einstellungen > Kopf- und Fußzeilen einfügen wählen. Anschließend müssen Sie den Einbettungscode für Google Fonts in den Abschnitt Header einfügen.

Plugin Headers Footers einfügen

Plugin Headers Footers einfügen

Auch können Sie, wenn Sie möchten, die Header.php-Datei Ihres Child-Theme bearbeiten.

Schritt 3: Neue Schriftart mit CSS anwenden

Nachdem Sie den HTML-Code für Ihre benutzerdefinierte Schriftart in Ihre Website eingefü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.

Indie Flower CSS

Indie Flower CSS

Zurück im Customizer auf der Live-Seite Ihrer Website, wählen Sie Additional CSS. Hier können Sie CSS-Code eingeben, um die Schriftarten auf Ihrer Website anzupassen. Unten sehen Sie, dass wir den Indie Flower CSS-Code auf die Abschnitte Header 2 und Absatz angewendet haben…

Zusätzliches CSS

Zusätzliches CSS

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

Hinzufügen von Adobe-Schriftarten zu WordPress

Wenn Sie sich für das Premium-Paket Creative Cloud von Adobe angemeldet haben, können Sie alle benutzerdefinierten Schriftarten zu Ihrer WordPress-Website hinzufügen. Dieser Prozess 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

Zunächst müssen Sie die umfangreiche Schriftartenbibliothek von Adobe durchsuchen und eine oder mehrere Schriftarten auswählen, die zu Ihrem Projekt passen. Sobald Sie eine Auswahl getroffen haben, klicken Sie auf das Symbol </>, um die Schriftart zu einem neuen Webprojekt hinzuzufügen.

Wählen Sie eine Adobe-Schriftart

Wählen Sie eine Adobe-Schriftart

Sie werden nun aufgefordert, Ihr Webprojekt zu benennen und mit Hilfe der Kontrollkästchen die Schriftschnitte und -stile auszuwählen, die Sie einschließen möchten. Wählen Sie dann Projekt erstellen.

Schritt 2: Einbetten des Codes der Adobe-Schriftart in Ihre WordPress-Website

Der nächste Schritt ist das Einbetten des Codes, den Adobe für die von Ihnen gewählte Schriftart zur Verfügung stellt, in Ihre WordPress-Website.

Dies geschieht auf genau dieselbe Weise wie das Einbetten des Codes von Google Fonts. Binden Sie den Code einfach in den <head>-Tag Ihrer Website ein oder verwenden Sie das WordPress-Plugin „Insert Headers and Footers“ (wie zuvor beschrieben).

Schritt 3: Anwenden der neuen Schriftart mit CSS

Wie bei Google Fonts können Sie auch hier Ihre neue benutzerdefinierte Adobe-Schriftart mit CSS-Regeln anwenden. In Ihrem Adobe-Dashboard werden auf Ihrer Webprojektseite der Name der CSS-Schriftfamilie sowie der Schriftstil und die numerische Gewichtung für jeden von Ihnen ausgewählten Schrifttyp aufgelistet.

Adobe Font CSS font-family

Adobe Font CSS font-family

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

So, jetzt haben wir uns damit beschäftigt, wie man benutzerdefinierte Schriftarten zu WordPress hinzufügt, indem man die sehr beliebten kostenlosen Google Fonts sowie die beeindruckende Premium-Ressource Adobe Fonts verwendet.

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

Wie Sie eine benutzerdefinierte Schriftart zu Ihrem Webspace hinzufügen

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

Schritt 1: Herunterladen einer benutzerdefinierten Schriftart

Wie zu Beginn dieses Artikels erwähnt, gibt es zahlreiche Ressourcen, aus denen Sie kostenlose oder hochwertige benutzerdefinierte Schriftarten für Ihre Website auswählen können. Wenn Sie eine benutzerdefinierte Schriftart für Ihren Server auswählen, vergewissern Sie sich, 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.

Milkshake

Milkshake

Es ist wichtig, dass Sie Ihre benutzerdefinierte Schriftart in einem Webfont-Format herunterladen. Das Webfont-Containerformat WOFF wird von den meisten Browsern unterstützt, aber Google empfiehlt die Bereitstellung mehrerer Formate, um den Nutzern auf allen Geräten ein einheitliches Erlebnis zu bieten.

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

Schritt 2: Hochladen der benutzerdefinierten Schriftart auf Ihren Server

Der nächste Schritt ist das Hochladen der benutzerdefinierten Schriftart auf Ihren Server. Öffnen Sie dazu den Dateimanager im cPanel Ihrer Website.

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

Fonts hochladen

Fonts hochladen

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

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

Sie müssen nun die benutzerdefinierte Schriftart auf Ihrer Website anwenden. Zunächst müssen Sie die Schriftart in das Stylesheet Ihres Themes laden. Öffnen Sie dazu den WordPress Customizer und fügen Sie unter Additional CSS diesen Code ein:

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

Achten Sie darauf, dass Sie den Namen der Schriftart und die URL ändern (kopieren Sie die URL der Schriftartdatei auf Ihrem Server).

Sie können dann die CSS-Regeln verwenden, um die Schriftarten auf Ihrer Website zu aktualisieren. Hier ein Beispiel für die Anwendung der benutzerdefinierten Schriftart auf die Überschrift 3 und die Absatzabschnitte:

Milkshake CSS

Milkshake CSS

Wenn Sie damit zufrieden sind, wie Ihre neue benutzerdefinierte Schriftart auf Ihrer Website aussieht, klicken Sie auf Veröffentlichen.

Abschließende Überlegungen zum Hinzufügen benutzerdefinierter Schriftarten zu WordPress

Wie Sie sehen, gibt es zahlreiche Ressourcen, mit denen Sie die perfekte Schriftart für Ihr Projekt finden können, wenn Sie auf der Suche nach einer schönen und aufmerksamkeitsstarken benutzerdefinierten Schriftart sind. Außerdem wissen Sie jetzt, wie Sie erfolgreich benutzerdefinierte Schriftarten zu WordPress hinzufügen können.

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

Kostenloser Kurs

Buckle Up! 5 Schritte zur Beschleunigung Ihrer WordPress-Site

Machen Sie Ihre Site mit ein paar einfachen Techniken 30-40%
schneller

Gratiskurs besuchen rocket

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.