Haben Sie sich jemals gefragt, wie Designer schöne benutzerdefinierte Webfonts auf ihren Websites verwenden können? Oft fügen sie benutzerdefinierte Schriftarten zu WordPress hinzu, indem sie Typekit verwenden, einen Adobe-Dienst, der Ihnen Zugang zu hochwertigen Schriftarten bietet. In diesem Artikel zeigen wir Ihnen, wie Sie Typekit-Schriftarten in WordPress hinzufügen, um Ihre Typografie zu verbessern.

Warum Typekit-Schriftarten verwenden?
Typekit ist ein beliebter Abonnement-Schriftartendienst, der Ihnen viel Geld sparen kann. Anstatt einzelne Schriftlizenzen zu bezahlen, die ziemlich teuer werden können, können Sie auf ihre gesamte Bibliothek von Hunderten von Schriftarten kostenlos oder zu einem festen Jahrespreis zugreifen.
Die Typekit-Bibliothek ist eine riesige Sammlung von über 1.000 Schriftarten. Einige der schönsten Schriftarten, die Sie im Web finden können, sind über Typekit, einen Adobe-Dienst, verfügbar.
Ihr grundlegender kostenloser Plan bietet Zugriff auf über 230 Schriftarten, und Sie können 2 Schriftfamilien kostenlos auf einer Website verwenden. Andere Pläne beginnen bei 49,99 $ bis 99,99 $ pro Jahr.
Diese großartigen Typekit-Schriftarten können problemlos zu jeder Website hinzugefügt werden, ohne die Ladezeiten Ihrer Seiten zu verlangsamen. Die Schriftarten werden von Adobes CDN bereitgestellt und laden viel schneller, als wenn Sie sie auf Ihrer eigenen Website hosten würden.
Typekit für WordPress Video-Tutorial
Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, können Sie unten weiterlesen.
Warum benutzerdefinierte Webfonts auf WordPress verwenden?
Typografie spielt eine entscheidende Rolle für das Design Ihrer Website.
Die Wahl der richtigen Schriftarten kommuniziert Ihre Persönlichkeit und Botschaft klar an Ihre Leser. Egal, welches Image Sie vermitteln möchten – professionell, freundlich, lässig, erfahren – die Schriftarten auf Ihrer Website können helfen, das richtige Image zu projizieren.
Durch die Verwendung der richtigen Schriftarten können Sie einen bleibenden Eindruck hinterlassen. Anstatt wie jede andere Website im Web auszusehen, wirkt Ihr Text merklich anders. Die Auswahl der richtigen Schriftart für Ihre WordPress-Website kann Ihre Website von einem einfachen Design zu einem ästhetisch ansprechenden und atemberaubenden Kunstwerk machen.
Die richtigen benutzerdefinierten Webfonts können:
- Konversionsraten steigern
- die Absprungrate Ihrer Website senken
- Erhöhen Sie die Verweildauer auf Ihrer Website
- eine unvergessliche Erfahrung für Benutzer schaffen
Bereit, mit Typekit-Schriftarten zu beginnen? Hier erfahren Sie, wie Sie Typekit verwenden, um Ihr WordPress-Design anzupassen.
So starten Sie mit Typekit
Zuerst müssen Sie ein Typekit-Konto erstellen. Besuchen Sie dazu einfach Typekit.com , um die verfügbaren Tarife zu vergleichen.
Sie müssen wählen, für welchen Plan Sie sich anmelden möchten. Der kostenlose Plan beschränkt Sie auf eine Website und beinhaltet den Zugriff auf begrenzte Schriftarten. Möglicherweise möchten Sie mit dem kostenlosen Plan beginnen, um ihn auszuprobieren, und dann später upgraden. Das Upgrade gibt Ihnen eine größere Bibliothek von Schriftarten, und Sie können sie auf mehr Websites verwenden.

Der nächste Schritt ist die Erstellung eines Kits. Das Kit ermöglicht es Ihnen, eine bestimmte Bibliothek von Schriftarten und Einstellungen für Ihre Website zusammenzustellen, sodass Typekit nur die benötigten Dateien und Codes lädt. Um Ihr Kit zu erstellen, fügen Sie Ihren Website-Namen und Domainnamen hinzu und klicken Sie dann auf Weiter.

Nachdem Sie Ihre Informationen für Ihr Kit ausgefüllt haben, gibt Ihnen Typekit einen JavaScript-Code, den Sie zu Ihrer Website hinzufügen können. Sie können diesen Code in einem Texteditor wie Notepad kopieren und einfügen, um ihn vorerst zu speichern. Wir werden ihn im nächsten Schritt dieses Tutorials zu Ihrer Website hinzufügen.
Vorerst können Sie mit der Auswahl Ihrer Schriftarten beginnen. Sie können die Schriftartenbibliothek durchsuchen und nach Optionen wie Klassifizierung, Dicke, Breite, x-Höhe und mehr filtern.

Wenn Sie eine Schriftart sehen, die Ihnen gefällt, können Sie darauf klicken, um weitere Details und Beispiele zu erhalten. Wenn Sie sie zu Ihrem Webkit hinzufügen möchten, klicken Sie auf der rechten Seite auf die Schaltfläche Web Use: Add to Kit.

Dies öffnet ein Pop-up, in dem Sie die ausgewählte Schriftart dem gerade erstellten Kit hinzufügen müssen.

Jetzt können Sie auf die Schaltfläche Veröffentlichen klicken, um die Änderungen an Ihrem Kit zu speichern.

Das ist alles! Ihr Schriftart-Kit ist jetzt einsatzbereit.
Hinzufügen Ihrer Typekit-Schriftarten in WordPress
Der einfachste Weg, Ihre neuen benutzerdefinierten Webfonts zu Ihrem WordPress-Blog hinzuzufügen, ist die Verwendung eines WordPress Typekit-Plugins.
Wir empfehlen das Plugin Typekit Fonts for WordPress. Nach der Installation und Aktivierung des Plugins können Sie Einstellungen » Typekit Fonts besuchen, um das Plugin zu konfigurieren.

Zuerst müssen Sie den JavaScript-Code, den Sie zuvor gespeichert haben, in das Feld für den Typekit-Einbettungscode einfügen. Danach können Sie CSS-Selektoren hinzufügen, um anzugeben, wo Sie die Schriftart auf Ihrer Website verwenden möchten.
Im obigen Screenshot haben wir die Schriftart dem CSS-Selektor h1.site-title hinzugefügt.
Ihr WordPress-Theme verwendet möglicherweise unterschiedliche Klassen für verschiedene Elemente. Sie müssen das Tool „Element untersuchen“ in Ihrem Webbrowser verwenden, um diese CSS-Klassen herauszufinden. Möglicherweise möchten Sie auch unser von WordPress generiertes CSS-Cheat-Sheet für Anfänger ansehen, um Ihnen den Einstieg zu erleichtern.

Das ist alles! Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie mit Typekit großartige Typografie in WordPress hinzufügen. Vielleicht möchten Sie auch einen Blick auf unseren Leitfaden werfen, wie Sie Google Webfonts in Ihren WordPress-Themes hinzufügen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie finden uns auch auf Twitter und Facebook.


Forest Antemesaris
Diese Liste hat für mich funktioniert, also danke! Aber die Kursivschrift ist keine echte Kursivschrift, sondern schräg. Gibt es eine Möglichkeit, die Kursivschrift zu echter Kursivschrift zu machen?
WPBeginner Support
Es würde von der spezifischen Schriftart abhängen, Sie sollten sich an den Support von Typekit wenden, und sie sollten Ihnen helfen können.
Admin
Jes
Same request here. I have installed the Typekit plugin and gone through all the processes to add fonts to my site, but the fonts are not available in the inline text editor and drop-down menu list
George Galbraith
Divi unterstützt keine einfache Möglichkeit, Schriftarten zum Inline-Texteditor oder Dropdown hinzuzufügen. Sie müssen den altmodischen Weg gehen und Ihre Schriftgröße/Schriftstärke/Schriftart für h1-h6/p immer noch im CSS-Feld des Theme-Customizers definieren.
Verwenden Sie dann die Tags, um die Schriftarten im Inline-Editor anzuwenden. Hoffe, das hilft!
Michael
Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin
Ich frage mich, wie ich die Schriftart mit Typekit und benutzerdefinierten Schriftarten (nicht Google) zum Inline-Editor und den Dropdown-Menüs meines Themes (DIVI) hinzufügen kann.
Haben Sie Vorschläge?
Prost!