Möchten Sie benutzerdefinierte Schriftarten zu 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. Benutzerdefinierte Schriftarten sind nicht nur ästhetisch ansprechend, sondern können auch die Lesbarkeit verbessern, eine Markenidentität schaffen und die Verweildauer der Nutzer auf Ihrer WordPress-Website erhöhen.
In diesem Artikel wird Ihnen gezeigt, wie Sie die Google-SchriftartenundTypeKit im Gesang antworten CSS3 @Font-Face Methode, um benutzerdefinierte Schriftarten in WordPress hinzuzufügen.
Hinzufügen benutzerdefinierter Schriftarten in WordPress
Achtung!Das Laden zu vieler Schriftarten kann Ihre Website verlangsamen. Wir empfehlen, zwei Schriftarten auszuwählen und sie auf Ihrer Website zu verwenden. Wir zeigen Ihnen auch, wie Sie sie korrekt laden können, ohne dass Ihre Website verlangsamt wird.
Bevor wir uns damit befassen, wie man benutzerdefinierte Schriftarten in WordPress hinzufügt, sollten wir uns ansehen, wie man benutzerdefinierte Schriftarten findet, die man verwenden kann.
Wie man benutzerdefinierte Schriftarten zur Verwendung in WordPress findet
Heutzutage gibt es viele Möglichkeiten, großartige kostenlose Web-Schriften zu finden, z. B. Google Fonts, Typekit, FontSquirrel und fonts.com.
Hinzufügen benutzerdefinierter Schriftarten zu WordPress von Google Fonts
Google Fonts ist die größte, kostenlose und von Webentwicklern am häufigsten verwendete Schriftbibliothek. Es gibt viele Möglichkeiten, Google Fonts in WordPress hinzuzufügen und zu verwenden.
Methode 1: Google Fonts mit WordPress-Plugin hinzufügen
Wenn Sie Google Fonts auf Ihrer Website hinzufügen und verwenden möchten, ist diese Methode am einfachsten und für Anfänger zu empfehlen.
- Installation von Plug-Ins::
- Installation und Aktivierung Google-Schriften Typografie Plug-ins.
- Plug-ins konfigurieren::
- Geben Sie nach der Aktivierung Ihre E-Mail-Adresse ein, um die offizielle Schnellstartanleitung zu erhalten. Klicken Sie dann auf Font Plugins → Custom Fonts in der Admin-Seitenleiste. Dadurch werden Sie automatisch zum WordPress Theme Customiser weitergeleitet und öffnen das neue "Schriftart-Plug-ins"Teil.
- Schriftart auswählen::
- Wählen Sie im Abschnitt Grundeinstellungen die Standardschriftarten für die Website aus und wählen Sie unter Erweiterte Einstellungen Schriftarten für bestimmte Teile der Website aus.
- Verwenden Sie das Dropdown-Menü "Schriftfamilie", um eine neue Schrift auszuwählen. Die Vorschau ändert sich automatisch und zeigt den Schrifteffekt an.
- Buchungsänderungen::
- Wenn Sie mit der Auswahl der benutzerdefinierten Schriftart zufrieden sind, klicken Sie auf "Beitrag", um Ihre Änderungen zu speichern.
Methode 2: Manuelles Hinzufügen von Google Fonts in WordPress
Bei dieser Methode muss Code in die WordPress-Theme-Datei eingefügt werden.
- Schriftart auswählen::
- Besuchen Sie die Google Fonts-Bibliothek und wählen Sie die gewünschte Schriftart aus. Klicken Sie auf die Schaltfläche "Quick Use" unterhalb der Schriftart, wählen Sie den gewünschten Stil aus und kopieren Sie den Einbettungscode.
- Code hinzufügen::
- Bearbeiten Sie das Thema der
header.phpDatei und fügen Sie den Code in die Datei<body>Fügen Sie vor der Beschriftung oder der Verwendung des WPCode-Plugins den eingebetteten Code in das Feld "Kopfzeile" ein und klicken Sie auf "Änderungen speichern".
- Bearbeiten Sie das Thema der
- Schriftarten verwenden::
- Verwenden Sie diese Schriftart z. B. im Stylesheet des Themas:
.site-title { font-family: 'Open Sans', Arial, sans-serif; }Hinzufügen benutzerdefinierter Schriftarten zu WordPress mit Typekit
Typekit von Adobe Fonts ist eine weitere kostenlose, qualitativ hochwertige Ressource, die großartige Schriften für Ihre Designprojekte bietet.
- ein Konto registrieren::
- Melden Sie sich für ein Adobe Fonts-Konto an und rufen Sie den Bereich "Schriften durchsuchen" auf. Wählen Sie die Schriftart aus und erstellen Sie ein Projekt, indem Sie den Einbettungscode mit der Projekt-ID kopieren.
- Code hinzufügen::
- Bearbeiten Sie das Thema der
header.phpDatei und fügen Sie den Code in die Datei<body>Fügen Sie vor der Beschriftung oder der Verwendung des WPCode-Plugins den eingebetteten Code in das Feld "Kopfzeile" ein und klicken Sie auf "Änderungen speichern".
- Bearbeiten Sie das Thema der
- Schriftarten verwenden::
- Verwenden Sie die ausgewählte Typekit-Schriftart im Stylesheet des Themas, zum Beispiel:
.site-title { font-family: 'gilbert', sans-serif; }Hinzufügen von benutzerdefinierten Schriftarten zu WordPress mit CSS @font-face
Die einfachste Art, WordPress benutzerdefinierte Schriftarten hinzuzufügen, ist das Hinzufügen der Schriftart @font-face mit Hilfe der CSS-Methode, mit der Sie jede beliebige Schriftart auf Ihrer Website verwenden können.
- Schriftarten herunterladen::
- Laden Sie Ihre Lieblingsschriftarten im Webformat herunter. Wenn kein geeignetes Webformat verfügbar ist, können Sie es mit dem FontSquirrel Webfont Generator konvertieren.
- Schriftarten hochladen::
- Laden Sie die Schriftarten auf den WordPress-Hosting-Server hoch. Der empfohlene Speicherort ist der neue Ordner "fonts" im Verzeichnis des Themes oder des Child-Themes.
- Schriftarten laden::
- Verwenden Sie die CSS-Regel @font-face, um z. B. Schriften in das Stylesheet des Themas zu laden:
@font-face { font-family: 'Arvo'; src: url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf'); font- weight: normal; }- Schriftarten verwenden::
- Verwenden Sie diese Schriftart an beliebiger Stelle im Stylesheet des Themas, zum Beispiel:
.site-title { font-family: 'Arvo', Arial, sans-serif; }Das direkte Laden von Schriftarten mit CSS @font-face ist nicht immer die beste Lösung. Wenn Sie zum Beispiel Folgendes verwenden Google-Schriftarten vielleicht Satzteil Schriftarten, dann ist es am besten, die Schriftarten direkt von ihren Servern zu liefern, um die beste Leistung zu erzielen.
zu einem Urteil gelangen
Das Hinzufügen benutzerdefinierter Schriftarten kann das visuelle Erscheinungsbild und die Benutzerfreundlichkeit Ihrer WordPress-Website erheblich verbessern. Schriftarten können mit Google Fonts, Typekit und CSS@font-face-Methoden leicht personalisiert werden.
