Hinzufügen von benutzerdefinierten Schriftarten in WordPress
Möchten Sie benutzerdefinierte Schriftarten in WordPress hinzufügen? Mit benutzerdefinierten Schriftarten können Sie eine schöne Kombination verschiedener Schriftarten auf Ihrer Website verwenden, um die Typografie und das Benutzererlebnis zu verbessern. Abgesehen davon, dass sie gut aussehen, können benutzerdefinierte Schriftarten Ihnen auch helfen, die Lesbarkeit zu verbessern, ein Markenimage zu schaffen und die Zeit zu erhöhen, die Benutzer auf Ihrer Website verbringen.
In diesem Artikel zeigen wir Ihnen, wie Sie benutzerdefinierte Schriftarten in WordPress mithilfe von Google Fonts, TypeKit und der CSS3-Methode @Font-Face hinzufügen können.
Hinweis: Das Laden zu vieler Schriftarten kann Ihre Website verlangsamen.
Wir empfehlen, zwei Schriftarten auszuwählen und diese auf Ihrer gesamten Website zu verwenden. Wir zeigen Ihnen auch, wie Sie sie richtig laden, ohne Ihre Website zu verlangsamen. Bevor wir uns ansehen, wie Sie benutzerdefinierte Schriftarten in WordPress hinzufügen, lassen Sie uns einen Blick auf die Suche nach benutzerdefinierten Schriftarten werfen, die Sie verwenden können.
Wie Sie benutzerdefinierte Schriftarten für WordPress finden
Schriftarten waren früher teuer, aber das ist nicht mehr so.
Es gibt viele Orte, an denen Sie großartige kostenlose Web-Schriften finden können, z. B. Google Fonts, Typekit, FontSquirrel und fonts.com.
Wenn Sie nicht wissen, wie Sie Schriftarten mischen und anpassen können, dann probieren Sie Font Pair. Es hilft Designern, schöne Google-Schriften miteinander zu kombinieren. Denken Sie bei der Auswahl Ihrer Schriftarten daran, dass die Verwendung zu vieler benutzerdefinierter Schriftarten Ihre Website verlangsamt.
Deshalb sollten Sie zwei Schriftarten auswählen und diese in Ihrem gesamten Design verwenden. Dies wird auch Konsistenz in Ihr Design bringen.
Hinzufügen von benutzerdefinierten Schriftarten in WordPress von Google Fonts
Google Fonts ist die größte, kostenlose und unter Website-Entwicklern am häufigsten verwendete Schriftartenbibliothek.
Es gibt mehrere Möglichkeiten, wie Sie Google Fonts in WordPress hinzufügen und verwenden können.
Methode 1: Hinzufügen von benutzerdefinierten Schriftarten mit dem einfachen Google Fonts Plugin
Wenn Sie Google Fonts auf Ihrer Website hinzufügen und verwenden möchten, dann ist diese Methode bei weitem die einfachste und für Anfänger zu empfehlen.
Als erstes müssen Sie das Easy Google Fonts-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins. Nach der Aktivierung können Sie auf die Seite Erscheinungsbild " Customizer gehen
Dadurch wird die Live-Theme-Anpassungsoberfläche geöffnet, wo Sie den neuen Abschnitt Typografie sehen.
Wenn Sie auf "Typografie" klicken, werden verschiedene Abschnitte Ihrer Website angezeigt, auf die Sie Google Fonts anwenden können. Klicken Sie einfach auf "Schriftart bearbeiten" unter dem Abschnitt, den Sie bearbeiten möchten.
Unter dem Abschnitt "Schriftfamilie" können Sie eine beliebige Google-Schriftart auswählen, die Sie auf Ihrer Website verwenden möchten.
Sie können auch Schriftstil, Schriftgröße, Polsterung, Rand und mehr auswählen. Abhängig von Ihrem Theme könnte die Anzahl der Abschnitte hier begrenzt sein und Sie können möglicherweise die Schriftauswahl für viele verschiedene Bereiche Ihrer Website nicht direkt ändern. Um dies zu beheben, können Sie mit dem Plugin auch eigene Steuerelemente erstellen und diese zum Ändern von Schriftarten auf Ihrer Website verwenden. Als erstes müssen Sie die Seite Einstellungen " Google Fonts besuchen und einen Namen für Ihr Font-Control vergeben
Verwenden Sie etwas, das Ihnen hilft, schnell zu verstehen, wo Sie dieses Schriftart-Steuerelement verwenden werden.
Als Nächstes klicken Sie auf die Schaltfläche "Font Control erstellen" und dann werden Sie aufgefordert, CSS-Selektoren einzugeben. Sie können HTML-Elemente hinzufügen, auf die Sie abzielen möchten (z. B. h1, h2, p, blockquote) oder CSS-Klassen verwenden.
Sie können das Tool "Inspect " in Ihrem Browser verwenden, um herauszufinden, welche CSS-Klassen von dem bestimmten Bereich, den Sie ändern möchten, verwendet werden.
Klicken Sie nun auf die Schaltfläche "Schriftsteuerung speichern", um Ihre Einstellungen zu speichern.
Sie können so viele Schriftsteuerungen erstellen, wie Sie für verschiedene Bereiche Ihrer Website benötigen. Um diese Font-Controller zu verwenden, müssen Sie auf Erscheinungsbild " Customizer gehen und auf die Registerkarte Typografie klicken
Unter Typografie sehen Sie nun auch die Option "Theme-Typografie". Wenn Sie darauf klicken, werden Ihre benutzerdefinierten Schriftsteuerungen angezeigt, die Sie zuvor erstellt haben. Sie können nun einfach auf die Schaltfläche "Bearbeiten" klicken, um die Schriftarten und das Aussehen für dieses Steuerelement auszuwählen.
Vergessen Sie nicht, auf die Schaltfläche Speichern oder Veröffentlichen zu klicken, um Ihre Änderungen zu speichern.
Methode 2: Manuelles Hinzufügen von Google Fonts in WordPress
Bei dieser Methode müssen Sie Code zu Ihren WordPress-Theme-Dateien hinzufügen.
Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress. Besuchen Sie zunächst die Google-Schriftartenbibliothek und wählen Sie eine Schriftart aus, die Sie verwenden möchten. Klicken Sie anschließend auf die Schaltfläche "Quick Use" unter der Schriftart.
Auf der Seite der Schriftart sehen Sie die für diese Schriftart verfügbaren Stile.
Wählen Sie die Stile aus, die Sie in Ihrem Projekt verwenden möchten, und klicken Sie dann auf die Schaltfläche in der Seitenleiste oben.
Als Nächstes müssen Sie in der Seitenleiste auf die Registerkarte "Einbetten" wechseln, um den Einbettungscode zu kopieren.
Es gibt zwei Möglichkeiten, wie Sie diesen Code zu Ihrer WordPress-Seite hinzufügen können.
Erstens können Sie einfach die Datei header.php Ihres Themes bearbeiten und den Code vor dem Tag einfügen.
Wenn Sie jedoch mit der Codebearbeitung in WordPress nicht vertraut sind, können Sie ein Plugin verwenden, um diesen Code hinzuzufügen. Installieren und aktivieren Sie einfach das Plugin " Insert Headers and Footers ". Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins. Gehen Sie nach der Aktivierung auf die Seite Einstellungen " Kopf- und Fußzeilen einfügen und fügen Sie den Einbettungscode in das Feld "Skripte in Kopfzeile" ein
Vergessen Sie nicht, auf die Schaltfläche "Speichern" zu klicken, um Ihre Änderungen zu speichern.
Das Plugin beginnt nun, den Google Font-Einbettungscode auf allen Seiten Ihrer Website zu laden. Sie können diese Schriftart im Stylesheet Ihres Themes wie folgt verwenden:
.h1 site-title { font-family: 'Open Sans', Arial, sans-serif }
Eine ausführliche Anleitung finden Sie in unserer Anleitung zum Hinzufügen von Google-Schriftarten in WordPress-Themes.
Hinzufügen benutzerdefinierter Schriftarten in WordPress mit Typekit
Typekit von Adobe Fonts ist eine weitere kostenlose und Premium-Ressource für fantastische Schriftarten, die Sie in Ihren Design-Projekten verwenden können.
Es gibt sowohl ein kostenpflichtiges Abonnement als auch einen begrenzten kostenlosen Plan, den Sie nutzen können. Melden Sie sich einfach für ein Adobe Fonts-Konto an und besuchen Sie den Bereich "Schriften durchsuchen". Von hier aus müssen Sie auf die Schaltfläche klicken, um eine Schriftart auszuwählen und ein Projekt zu erstellen
Als nächstes sehen Sie den Einbettungscode mit Ihrer Projekt-ID. Es wird Ihnen auch gezeigt, wie Sie die Schriftart im CSS Ihres Themas verwenden können. Sie müssen diesen Code kopieren und in den Abschnitt Ihrer Website einfügen.
Es gibt zwei Möglichkeiten, wie Sie diesen Code zu Ihrer WordPress-Website hinzufügen können. Erstens können Sie einfach die Datei header.php Ihres Themes bearbeiten und den Code vor dem Tag einfügen.
Wenn Sie jedoch mit der Codebearbeitung in WordPress nicht vertraut sind, können Sie ein Plugin verwenden, um diesen Code hinzuzufügen. Installieren und aktivieren Sie einfach das Plugin " Insert Headers and Footers ". Gehen Sie nach der Aktivierung auf die Seite Einstellungen " Kopf- und Fußzeilen einfügen und fügen Sie den Einbettungscode in das Feld "Skripte in Kopfzeile" ein
Das war's. Jetzt können Sie die Typekit-Schriftart, die Sie im Stylesheet Ihres WordPress-Theme ausgewählt haben, wie folgt verwenden:
h1 .site-title { font-family: gilbert, sans-serif; }
Eine ausführliche Anleitung finden Sie in unserem Tutorial, wie Sie mit Typekit tolle Typografie in WordPress hinzufügen können.
Hinzufügen benutzerdefinierter Schriftarten in WordPress mit CSS3 @font-face
Der direkteste Weg, benutzerdefinierte Schriftarten in WordPress hinzuzufügen, ist das Hinzufügen der Schriftarten mit der CSS3 @font-face-Methode.
Mit dieser Methode können Sie jede beliebige Schriftart auf Ihrer Website verwenden. Als Erstes müssen Sie die Schriftart, die Sie mögen, in einem Webformat herunterladen. Wenn Sie das Webformat für Ihre Schriftart nicht haben, können Sie sie mit dem FontSquirrel Webfont-Generator konvertieren.
Sobald Sie die Webfont-Dateien haben, müssen Sie sie auf Ihren WordPress-Hosting-Server hochladen. Der beste Ort, um die Schriften hochzuladen, ist in einem neuen "fonts"-Ordner im Verzeichnis Ihres Themes oder Child-Themes. Sie können FTP oder den Dateimanager Ihres cPanels verwenden, um die Schriftart hochzuladen.
Sobald Sie die Schrift hochgeladen haben, müssen Sie die Schrift im Stylesheet Ihres Themes mit der CSS3-Regel @font-face wie folgt laden:
@font-face { font-family: Arvo src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf) font-weight: normal }
Vergessen Sie nicht, die font-family und die URL durch Ihre eigene zu ersetzen. Danach können Sie diese Schriftart überall im Stylesheet Ihres Themes wie folgt verwenden:
.h1 site-title { font-family: "Arvo", Arial, sans-serif }
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, dann ist es am besten, die Schriftart direkt von deren Server zu bedienen, um eine optimale Leistung zu erzielen.
Das ist alles, wir hoffen, dass dieser Artikel Ihnen geholfen hat, benutzerdefinierte Schriftarten in WordPress hinzuzufügen.