Hinzufügen von Awesome Typography in WordPress mit Typekit

Haben Sie sich jemals gefragt, wie Designer schöne benutzerdefinierte Webschriftarten auf ihren Websites verwenden können? Oft fügen sie mithilfe von Typekit, einem Adobe-Dienst, mit dem Sie auf qualitativ hochwertige Schriftarten zugreifen können, benutzerdefinierte Schriftarten zu WordPress hinzu. In diesem Artikel zeigen wir Ihnen, wie Sie Typekit-Schriftarten in WordPress hinzufügen, um Ihre Typografie zu verbessern.

Warum sollten Sie Typekit-Schriftarten verwenden??

Typekit ist ein beliebter Zeichensatz-Dienst auf Abonnementbasis, mit dem Sie viel Geld sparen können. Anstatt für einzelne Zeichensatzlizenzen zu zahlen, die recht teuer werden können, können Sie kostenlos oder zu einem Pauschalpreis auf die gesamte Bibliothek mit Hunderten von Zeichensätzen zugreifen.

Die Typekit-Bibliothek ist eine riesige Sammlung von über 1.000 Schriftarten. Einige der schönsten Schriftarten, die Sie im Internet finden können, sind über den Adobe-Dienst Typekit erhältlich.

Ihr grundlegender kostenloser Plan beinhaltet den Zugriff auf über 230 Schriftarten und Sie können 2 Schriftfamilien auf einer Website kostenlos verwenden. Andere Pläne beginnen zwischen 49,99 und 99,99 USD pro Jahr.

Diese fantastischen Typekit-Schriftarten können problemlos zu jeder Website hinzugefügt werden, ohne dass die Seitenladegeschwindigkeit verringert wird. Die Schriftarten werden über das CDN von Adobe bereitgestellt und werden mit wesentlich höheren Geschwindigkeiten geladen, als wenn Sie sie auf Ihrer eigenen Site 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 weiter unten lesen.

Warum benutzerdefinierte Webfonts in WordPress verwenden??

Typografie spielt eine entscheidende Rolle bei der Gestaltung Ihrer Website.

Wenn Sie die richtigen Schriftarten auswählen, werden Ihre Leser und Leser deutlich über Ihre Persönlichkeit und Botschaft informiert. Egal welche Art von Bild Sie darstellen möchten - professionell, freundlich, lässig, erfahren - die Schriftarten auf Ihrer Website können dabei helfen, das richtige Bild zu projizieren.

Durch die Verwendung der richtigen Schriftarten können Sie einen bleibenden Eindruck hinterlassen. Anstatt wie jede andere Website im Web auszusehen, sieht Ihr Text deutlich anders aus. Wenn Sie die richtige Schriftart für Ihre WordPress-Site auswählen, kann Ihre Website von einem einfachen Design zu einem ästhetisch ansprechenden und beeindruckenden Kunstwerk werden.

Die richtigen benutzerdefinierten Webschriftarten können:

• Conversion-Raten erhöhen
• senken Sie die Absprungrate Ihrer Website
• Mehr Zeit für Ihre Website
• Erstellen Sie ein unvergessliches Erlebnis für Benutzer

Sind Sie bereit, mit Typekit-Schriften zu beginnen? So verwenden Sie Typekit zum Anpassen Ihres WordPress-Designs.

Erste Schritte mit Typekit

Zuerst müssen Sie ein Typekit-Konto erstellen. Besuchen Sie dazu einfach Typekit.com, um die verfügbaren Pläne zu vergleichen.

Sie müssen auswählen, für welchen Plan Sie sich anmelden möchten. Der kostenlose Plan beschränkt Sie auf eine Website und beinhaltet den Zugriff auf eingeschränkte Schriftarten. Sie können mit dem kostenlosen Plan beginnen, um es auszuprobieren, und später ein Upgrade durchführen. Mit dem Upgrade erhalten Sie eine größere Bibliothek mit Schriftarten, die Sie auf mehreren Websites verwenden können.

Der nächste Schritt ist die Erstellung eines Kits. Mit dem Kit können Sie eine spezifische Bibliothek mit Schriftarten und Einstellungen für Ihre Website zusammenstellen, sodass Typekit nur die erforderlichen Dateien und den erforderlichen Code lädt. Um Ihr Kit zu erstellen, fügen Sie Ihren Site-Namen und Ihren Domain-Namen hinzu und klicken Sie auf Fortsetzen.

Nachdem Sie Ihre Informationen für Ihr Kit ausgefüllt haben, gibt Typekit Ihnen etwas JavaScript-Code, den Sie Ihrer Site hinzufügen können. Sie können diesen Code in einen Texteditor wie Notepad kopieren und einfügen, um ihn vorerst zu speichern. Wir werden es Ihrer Website im nächsten Schritt dieses Tutorials hinzufügen.

Im Moment können Sie mit der Auswahl Ihrer Schriftarten beginnen. Sie können die Schriftbibliothek durchsuchen und nach Optionen wie Klassifizierung, Gewicht, Breite, X-Höhe usw. filtern.

Wenn Sie eine Schriftart sehen, die Sie mögen, können Sie darauf klicken, um weitere Informationen und Beispiele zu erhalten. Wenn Sie es zu Ihrem Web-Kit hinzufügen möchten, klicken Sie auf Web-Nutzung: Zum Kit hinzufügen Taste auf der rechten Seite.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie die von Ihnen ausgewählte Schriftart dem soeben erstellten Kit hinzufügen müssen.

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

Das ist alles! Ihr Font-Kit ist jetzt einsatzbereit.

Hinzufügen Ihrer Typekit-Schriftarten in WordPress

Die einfachste Möglichkeit, neue benutzerdefinierte Webfonts zu Ihrem WordPress-Blog hinzuzufügen, ist die Verwendung eines WordPress Typekit-Plugins.

Wir empfehlen das Typekit Fonts für WordPress-Plugin. Nachdem Sie das Plugin installiert und aktiviert haben, können Sie es besuchen Einstellungen "Typekit-Schriftarten um das Plugin zu konfigurieren.

Zuerst müssen Sie den zuvor gespeicherten JavaScript-Code in das Feld Typekit-Einbettungscode einfügen. Danach können Sie CSS-Selektoren hinzufügen, um anzugeben, wo Sie die Schriftart auf Ihrer Site verwenden möchten.

In der Abbildung oben haben wir die Schriftart hinzugefügt h1.site-title CSS-Auswahl.

Ihr WordPress-Theme verwendet möglicherweise unterschiedliche Klassen für verschiedene Elemente. Sie müssen das Tool zum Prüfen von Elementen in Ihrem Webbrowser verwenden, um diese CSS-Klassen herauszufinden. Vielleicht möchten Sie auch unser von WordPress generiertes CSS-Spickzettel für Anfänger nutzen, um Ihnen den Einstieg zu erleichtern.

Das ist alles! Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie mit Typekit eine beeindruckende Typografie in WordPress hinzufügen können. Vielleicht möchten Sie auch einen Blick auf unsere Anleitung zum Hinzufügen von Google-Webfonts zu Ihren WordPress-Themes werfen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.