Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie mit Typekit beeindruckende Typografie in WordPress hinzu

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.

Typekit-Schriftarten in WordPress

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

WPBeginner abonnieren

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.

Typekit Abonnementpläne

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.

Erstellen eines Kits für Ihre Website

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.

Eine Schriftart aus der Typekit-Bibliothek auswählen

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.

Füge eine Typekit-Schriftart zu deinem Webkit hinzu

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

Hinzufügen Ihrer benutzerdefinierten Web-Schriftart zu einem Kit

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

Veröffentlichen Sie Ihr Kit, um Ihre Änderungen 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.

Verwendung eines WordPress Typekit-Plugins zur Anpassung von Schriftarten

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.

Verwenden des Inspect Element-Tools in Google Chrome, um CSS-Klassen zu finden

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

5 CommentsLeave a Reply

  1. 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?

    • 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

  2. 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 :-(

    • 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!

  3. 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!

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.