Hinzufügen von benutzerdefinierten Schriftarten in WordPress

Möchten Sie benutzerdefinierte Schriftarten in WordPress hinzufügen? Mit benutzerdefinierten Schriftarten können Sie Ihr Design auffrischen und hervorheben. In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Schriftarten in WordPress mithilfe der Google-Methode Fonts, TypeKit und CSS3 @ Font-Face hinzufügen.

Die Verwendung von benutzerdefinierten Schriftarten in WordPress-Designs ist zu einem allgemeinen Trend geworden. In der Tat gibt es einige Designs, die mit Hunderten von benutzerdefinierten Schriftarten voll geladen sind. Das Laden zu vieler Schriftarten kann jedoch Ihre Website verlangsamen. Deshalb zeigen wir Ihnen, wie Sie benutzerdefinierte Schriftarten richtig laden, damit Ihre Website nicht verlangsamt wird.

Aber bevor wir uns ansehen, wie Sie benutzerdefinierte Schriftarten in WordPress hinzufügen, wollen wir uns zunächst mit der Suche nach benutzerdefinierten Schriftarten befassen.

So finden Sie benutzerdefinierte Schriftarten zur Verwendung in WordPress

Früher waren Schriften teuer, aber nicht mehr. Es gibt viele Orte, an denen Sie kostenlose kostenlose Web-Fonts wie Google Fonts, Typekit, FontSquirrel und fonts.com finden können.

Wenn Sie nicht wissen, wie Schriftarten gemischt werden sollen, probieren Sie Font Pair aus. Designer können schöne Google-Schriftarten miteinander kombinieren.

Denken Sie beim Auswählen Ihrer Schriftarten daran, dass die Verwendung zu vieler benutzerdefinierter Schriftarten Ihre Website verlangsamt. Aus diesem Grund sollten Sie zwei Schriftarten auswählen und in Ihrem gesamten Design verwenden. Dies führt auch zu einer Konsistenz Ihres Designs.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Hinzufügen benutzerdefinierter Schriftarten in WordPress von Google-Schriftarten

Google Fonts ist die größte, kostenlose und am häufigsten verwendete Schriftbibliothek unter Website-Entwicklern. Es gibt mehrere Möglichkeiten, Google Fonts in WordPress hinzuzufügen und zu verwenden.

Methode 1: Hinzufügen von benutzerdefinierten Schriftarten mit dem Easy Google Fonts Plugin

Wenn Sie Google Fonts hinzufügen und auf Ihrer Website verwenden möchten, ist diese Methode bei weitem die einfachste und für Anfänger empfohlene Methode.

Zuerst müssen Sie das Easy Google Fonts-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie zu gehen Aussehen »Customizer Seite. Daraufhin wird die Benutzeroberfläche des Live-Theme-Customizers geöffnet, in der Sie den neuen Abschnitt Typografie sehen.

Wenn Sie auf Typografie klicken, werden verschiedene Bereiche Ihrer Website angezeigt, in denen Sie Google Fonts anwenden können. Klicken Sie unterhalb des zu bearbeitenden Abschnitts auf "Schriftart bearbeiten".

Unter der Schriftfamiliensektion können Sie eine beliebige Google-Schriftart auswählen, die Sie auf Ihrer Website verwenden möchten. Sie können auch den Schriftstil, die Schriftgröße, die Auffüllung, den Rand und mehr auswählen.

Abhängig von Ihrem Thema kann die Anzahl der Abschnitte hier begrenzt sein und Sie können die Schriftartauswahl für viele verschiedene Bereiche Ihrer Website möglicherweise nicht direkt ändern.

Um dies zu beheben, können Sie mit dem Plugin auch eigene Steuerelemente erstellen und diese verwenden, um Schriftarten auf Ihrer Website zu ändern.

Zuerst müssen Sie besuchen Einstellungen »Google Fonts und geben Sie einen Namen für Ihre Schriftartensteuerung. Verwenden Sie etwas, das Ihnen hilft, schnell zu verstehen, wo Sie diese Schriftsteuerung verwenden.

Klicken Sie auf die Schaltfläche "Create font control" und Sie werden aufgefordert, CSS-Selektoren einzugeben. Sie können HTML-Elemente hinzufügen, für die Sie ein Targeting durchführen möchten (z. B. h1, h2, p, blockquote) oder CSS-Klassen verwenden. Mit dem Inspect-Tool können Sie herausfinden, welche CSS-Klassen von dem bestimmten Bereich verwendet werden, den Sie ändern möchten.

Klicken Sie nun auf die Schaltfläche "Save font control", um Ihre Einstellungen zu speichern. Sie können beliebig viele Font-Controller für verschiedene Bereiche Ihrer Website erstellen.

Um diese Font-Controller zu verwenden, müssen Sie zu wechseln Aussehen »Customizer und klicken Sie auf die Registerkarte Typografie.

Unter Typografie sehen Sie jetzt auch die Option 'Theme Typography'. Wenn Sie darauf klicken, werden Ihre benutzerdefinierten Steuerelemente angezeigt, die Sie zuvor erstellt haben. Sie können jetzt einfach auf die Schaltfläche Bearbeiten klicken, um die Schriftarten und das Erscheinungsbild für dieses Steuerelement auszuwählen.

Vergessen Sie nicht, auf die Schaltfläche zum Speichern oder Veröffentlichen zu klicken, um die Änderungen zu speichern.

Methode 2: Manuelles Hinzufügen von Google-Schriftarten in WordPress

Bei dieser Methode müssen Sie den WordPress-Designdateien Code hinzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Rufen Sie zunächst die Google-Schriftartenbibliothek auf und wählen Sie die Schriftart aus, die Sie verwenden möchten. Klicken Sie anschließend auf die Schaltfläche für die schnelle Verwendung unter der Schriftart.

Sie gelangen auf eine andere Seite, auf der Sie aufgefordert werden, die gewünschten Stile auszuwählen. Sie sollten nur Stile auswählen, von denen Sie glauben, dass Sie sie tatsächlich verwenden.

Scrollen Sie anschließend ein wenig nach unten, bis Sie zum Abschnitt zum Einbetten von Code gelangen. Sie müssen den Einbettungscode unter der Standardregisterkarte kopieren und direkt nach dem Tag in die Datei header.php Ihres Designs oder untergeordneten Themas einfügen.

Das ist alles, was Sie erfolgreich zu Ihrer WordPress-Site hinzugefügt haben.

Sie können diese Schriftart in Ihrem Stylesheet wie folgt verwenden:

 .h1 site-title font-family: 'Open Sans', Arial, serifenlos;  

Ausführliche Anweisungen finden Sie in unserem Handbuch zum Hinzufügen von Google-Schriftarten in WordPress-Designs.

Hinzufügen von benutzerdefinierten Schriftarten in WordPress mithilfe von Typekit

Typekit ist eine weitere kostenlose und erstklassige Ressource für fantastische Schriftarten, die Sie in Ihren Designprojekten verwenden können. Sie haben ein kostenpflichtiges Abonnement sowie ein begrenztes kostenloses Abonnement, das Sie verwenden können.

Melden Sie sich einfach für ein Typekit-Konto an und erstellen Sie ein neues Kit.

Als Nächstes müssen Sie eine Schriftart aus der Typekit-Bibliothek auswählen und Ihrem Kit hinzufügen. Danach holen Sie sich den Einbettungscode für Ihr Kit und gehen Sie zum Admin-Bereich Ihrer WordPress-Site.

Nun müssen Sie das Typekit Fonts für WordPress-Plugin installieren und aktivieren. Nach der Aktivierung einfach besuchen Einstellungen »Typekit-Schriftarten und fügen Sie den Einbettungscode auf der Einstellungsseite des Plugins ein.

Das ist alles, Sie können jetzt die Typekit-Schriftart verwenden, die Sie im Stylesheet Ihres WordPress-Themes ausgewählt haben:

 h1 .site-title font-family: 'modesto-condensed', Arial, serifenlos;  

Ausführlichere Anweisungen finden Sie in unserem Tutorial, wie Sie mit Typekit eine fantastische Typografie in WordPress hinzufügen.

Hinzufügen von benutzerdefinierten Schriftarten in WordPress Verwenden von CSS3 @ font-face

Die direkteste Möglichkeit, benutzerdefinierte Schriftarten in WordPress hinzuzufügen, ist das Hinzufügen der Schriftarten mit CSS3 @Schriftart Methode. Mit dieser Methode können Sie jede beliebige Schriftart auf Ihrer Website verwenden.

Als erstes müssen Sie die gewünschte Schriftart in einem Webformat herunterladen. Wenn Sie nicht über das Webformat für Ihre Schriftart verfügen, können Sie es mit dem FontSquirrel Webfont-Generator konvertieren.

Sobald Sie die Webfont-Dateien haben, müssen Sie sie auf Ihren Webhosting-Server hochladen.

Der beste Ort zum Hochladen der Zeichensätze ist in einem neuen Ordner "Zeichensätze" im Verzeichnis Ihres Designs oder untergeordneten Themes.

Sie können den Font mit dem FTP- oder Dateimanager Ihres cPanels hochladen.

Nachdem Sie die Schrift hochgeladen haben, müssen Sie sie mit der CSS3 @ font-face-Regel wie folgt in das Stylesheet Ihres Themes laden:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); Schriftgewicht: normal;  

Vergessen Sie nicht, die Schriftfamilie und die URL durch Ihre eigene zu ersetzen.

Danach können Sie diese Schriftart an beliebiger Stelle im Stylesheet Ihres Themes wie folgt verwenden:

 .h1 site-title font-family: "Arvo", Arial, serifenlos;  

Das direkte Laden von Schriftarten mit CSS3 @ font-face ist nicht immer die beste Lösung. Wenn Sie eine Schriftart von Google Fonts oder Typekit verwenden, ist es am besten, die Schriftart direkt vom Server aus bereitzustellen, um eine optimale Leistung zu erzielen.

Wir hoffen, dieser Artikel hat Ihnen dabei geholfen, benutzerdefinierte Schriftarten in WordPress hinzuzufügen. Vielleicht möchten Sie auch unser Handbuch zur Verwendung von Symbolschriftarten in WordPress und zum Ändern der Schriftgröße in WordPress lesen.

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.