3 verschiedene Möglichkeiten, benutzerdefinierte Schriftarten zu Ihrem WordPress-Site-Theme hinzuzufügen
Veröffentlicht: 2020-05-26Es gibt viele interessante und anpassbare Möglichkeiten, wie Sie Ihre WordPress-Website einzigartiger und optisch ansprechender gestalten können. Eine Möglichkeit besteht darin, benutzerdefinierte Schriftarten zu Ihrer WordPress-Site hinzuzufügen. Werfen Sie einen Blick auf die Websites einiger Ihrer Mitbewerber. Sie emulieren möglicherweise denselben Ton und Stil, den Sie auch mit Ihrer eigenen WordPress-Website erstellen möchten. Achten Sie auf die Verwendung von Schriftarten. Viele erfolgreiche Websites neigen dazu, eine Handvoll sorgfältig ausgewählter Schriftarten zu verwenden, die einheitlich auf der gesamten Website verwendet werden.
Es gibt so viele benutzerdefinierte Schriftarten, die kostenlos online verfügbar sind und die Sie ganz einfach zu Ihrer eigenen Website hinzufügen können. Nachdem Sie die richtigen Schriftarten gefunden haben, müssen Sie wissen, wie Sie diese auf Ihrer Website anwenden. Es gibt eine Reihe von Methoden, die Sie ausprobieren können, um dies zu erreichen.
Das Wichtigste zuerst: die richtige Schriftart finden; Es gibt unzählige Websites, die Tausende kostenloser Schriftarten zum Herunterladen anbieten. Probieren Sie Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com aus.
Kurz gesagt, es gibt im Wesentlichen zwei Möglichkeiten, benutzerdefinierte Schriftarten zu Ihrer WordPress-Website hinzuzufügen: manuell oder mit Plugins.
- Fügen Sie Ihrem WordPress-Site-Theme manuell benutzerdefinierte Schriftarten hinzu
- Verwenden Sie Plugins, um benutzerdefinierte Schriftarten zu Ihrem WordPress-Site-Theme hinzuzufügen
- Versuchen Sie es abschließend mit der Verwendung von Themen
Fügen Sie Ihrem WordPress-Site-Theme manuell benutzerdefinierte Schriftarten hinzu
Das manuelle Hinzufügen benutzerdefinierter Schriftarten zu Ihrem WordPress kann von Vorteil sein, wenn Sie nicht riskieren möchten, Ihre WordPress-Site mit zu vielen Plugins zu überlasten. Dies kann durch Bearbeiten der @font-face-Direktive erreicht werden. Auf diese Weise können Sie mehrere Schriftarten in jedem Format mit Ihrer Website verbinden.
Dies umfasst die folgenden Schritte:
Schritt 1
Laden Sie zunächst die von Ihnen ausgewählten benutzerdefinierten Schriftarten von der Website herunter, die Sie am nützlichsten finden. Sobald die Datei auf Ihrem Computer gespeichert ist, extrahieren Sie dieses ZIP-Archiv.
Schritt 2
Anschließend können Sie diese Schriftartdatei auf Ihren WordPress-Hosting-Server im Verzeichnis „wp-content/themes/your-theme-folder/fonts“ hochladen. Wenn Sie noch keinen Ordner für Ihre benutzerdefinierten Schriftarten eingerichtet haben, erstellen Sie einen und speichern Sie ihn dort.
Schritt 3
Gehen Sie als Nächstes zum Admin-Bereich von WordPress. Wählen Sie „Darstellung“ und gehen Sie dann zum Design-Editor. An diesem Punkt sehen Sie die style.css-Datei des Themes auf Ihrem Bildschirm. Darunter müssen Sie diesen Codeabschnitt hinzufügen:
@font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }
Denken Sie daran, „URL“ und „Schriftfamilie“ im Code durch die entsprechenden Werte zu ersetzen, die der von Ihnen gewählten Schriftart entsprechen. Sie sollten diesen Codeabschnitt auch am Anfang der CSS-Datei einfügen, jedoch nach dem Kommentar zum Thema.
Schritt 4
Stellen Sie abschließend sicher, dass Sie auf die wichtige Schaltfläche „Datei aktualisieren“ klicken. Dadurch wird sichergestellt, dass Ihre Änderungen ordnungsgemäß gespeichert werden, bevor Sie die Seite verlassen.
Schritt 5
Anschließend können Sie die Schriftart problemlos überall dort verwenden, wo Sie sie im Stylesheet Ihres Themes anwenden möchten. Verwenden Sie den folgenden Code:
.h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }
Nachdem Sie diesen Font-Face-Code bearbeitet haben, wird die Schriftart jedes Mal geladen, wenn jemand Ihre Website besucht. Sie haben es jedoch noch nicht auf ein bestimmtes Element auf der Seite angewendet. Dazu müssen Sie noch eine letzte Bearbeitung an der entsprechenden style.css-Datei vornehmen, auf die Sie gerade zugegriffen haben. Sie müssen Code wie den folgenden in die Datei eingeben:
.site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }
Für Sie empfohlen: Anfängerleitfaden: Wie installiere ich ein WordPress-Theme?
Schnelle Notiz:
Denken Sie wie zuvor daran, den Wert für die Schriftfamilie so zu bearbeiten, dass er für die von Ihnen verwendete Schriftart geeignet ist.
Wenn Sie beispielsweise benutzerdefinierte Schriftarten von Google Fonts verwenden, sehen Sie, dass es eine Registerkarte namens @import gibt, die Ihnen den relevanten Code bereitstellt, den Sie einfach kopieren und in die style.css-Datei Ihres Themes einfügen können. Dies kann den gesamten Prozess erheblich vereinfachen, wenn Sie sich mit zu viel Codierung nicht auskennen.
Dies ist jedoch keine besonders empfehlenswerte Methode mehr. Es sind einige Leistungsprobleme aufgetreten, die Browser daran hindern, mehrere Stylesheets gleichzeitig herunterzuladen. Dies führt letztendlich dazu, dass Seiten langsamer geladen werden. Berücksichtigen Sie dies also, wenn Sie Ihre Schriftarten und Methoden für deren Verwendung auswählen.
Andererseits können Sie durch die manuelle Installation benutzerdefinierter Schriftarten über CSS Schriftarten verschiedener Formate verbinden, darunter SVG, WOFF, TTF und OTF. Mit dieser Methode können Sie auch arbeiten, ohne auf Dienste Dritter angewiesen zu sein. Ihre Schriftartdateien werden auf Ihrem Server gespeichert. Dies ist der direkteste Weg, benutzerdefinierte Schriftarten zu WordPress hinzuzufügen.

Verwenden Sie Plugins, um benutzerdefinierte Schriftarten zu Ihrem WordPress-Site-Theme hinzuzufügen
Viele Menschen entscheiden sich für die Verwendung von Plugins, um ihre benutzerdefinierten Schriftarten in ihre WordPress-Sites einzubinden, da dies in vielerlei Hinsicht die einfachste Methode sein kann. Dies gilt insbesondere dann, wenn Sie sich nicht mit der CSS-Codierung befassen möchten. Google Fonts ist eine beliebte Wahl, vor allem weil es problemlos zusammen mit dem WordPress-Plugin verwendet werden kann. Die beiden besten Optionen für Sie sind Easy Google Fonts und Google Fonts Typography. Sobald Sie eines dieser Plugins aktiviert haben, können Sie problemlos auf den gesamten Schriftartenkatalog von Google Fonts zugreifen und ihn Ihren Seiten hinzufügen, ohne sich mit kompliziertem Code befassen zu müssen.
Die Verwendung von Google Fonts ist der einfachste Weg, dies zu tun, und Sie können Ihre Änderungen und benutzerdefinierten Schriftarten in Echtzeit auf dem Bildschirm in der Vorschau anzeigen.
Je nachdem, welche Schriftartdateien Sie verwenden möchten und ob Sie ein einzelnes Repository verwenden möchten oder nicht, sollten Sie die Verwendung eines alternativen Plugins wie des Plugins „Benutzerdefinierte Schriftarten“ in Betracht ziehen.
Schritt 1
Sobald Sie das Plugin Ihrer Wahl installiert und aktiviert haben, gehen Sie zu „Darstellung“ und klicken Sie dann auf die Customizer-Seite, um die Live-Schnittstellenseite des WordPress-Theme-Customizers zu öffnen. Hier sehen Sie die Registerkarte „Typografie“, die Ihnen jeden Abschnitt Ihrer eigenen Website anzeigt, auf den Sie Ihre eigenen benutzerdefinierten Schriftarten anwenden können.
Schritt 2
Sobald Sie diese Seite geöffnet haben, können Sie in dem Abschnitt der Seite, den Sie mit der Bearbeitung beginnen möchten, auf die Schaltfläche „Schriftart bearbeiten“ klicken. Anschließend können Sie die verschiedenen Unterabschnitte durcharbeiten und den Schriftstil, die Größe, den Rand usw. auswählen. Diese Abschnitte variieren je nach dem von Ihnen verwendeten Thema.
Ihr Thema könnte auch bedeuten, dass Sie die Schriftartenauswahl für verschiedene Abschnitte Ihrer Website nicht direkt bearbeiten können. Es gibt jedoch eine einfache Lösung für dieses Problem: Gehen Sie einfach zu „Einstellungen“ und dann zu „Google Fonts“, wo Sie Ihre eigenen Schriftartensteuerelemente erstellen können. Geben Sie dazu einfach einen Steuerelementnamen in das Feld ein und wählen Sie CSS-Selektoren aus. Auf diese Weise können Sie beliebige HTML-Elemente hinzufügen, die Sie für diese Schriftart verwenden möchten. Nachdem Sie diese Informationen eingegeben haben, müssen Sie Ihre Änderungen unbedingt speichern, indem Sie auf die Schaltfläche „Schriftartsteuerung speichern“ klicken, damit Ihre Einstellungen vollständig aktualisiert werden. Anschließend können Sie weiterhin so viele benutzerdefinierte Schriftarten-Steuerelemente erstellen, wie Sie für die einzelnen Abschnitte Ihrer WordPress-Website benötigen.
Schritt 3
Um diese neuen Schriftart-Controller zu verwenden, nachdem Sie sie erstellt haben, gehen Sie einfach zurück zum Abschnitt „Darstellung“, klicken Sie auf „Anpasser“ und dann auf die Registerkarte „Typografie“. Anschließend sehen Sie die Option „Thementypografie“. Wenn Sie darauf klicken, können Sie auf Ihre benutzerdefinierten Schriftarten-Steuerelemente zugreifen, indem Sie einfach auf die Schaltfläche „Bearbeiten“ klicken, um die gewünschten Schriftarten und das gewünschte Erscheinungsbild für diese bestimmte Schriftart auszuwählen Kontrolle. Vergessen Sie auch hier nicht, Ihre Änderungen zu speichern, indem Sie auf die Schaltfläche „Veröffentlichen“ oder „Speichern“ klicken, um Ihre Website zu aktualisieren.
Schnelle Notiz:
Einige andere großartige benutzerdefinierte WordPress-Schriftart-Plugins, die wir empfehlen würden, sind „Custom Font Uploader“ und „Use Any Font“. Es stehen jedoch unzählige andere zur Auswahl. Informieren Sie sich also über Ihre Optionen, bevor Sie sich für das Plugin entscheiden, das Sie verwenden möchten.
Vielleicht gefällt Ihnen auch Folgendes: Die 20 meistverkauften Micro-Nischen-WordPress-Themes.
Versuchen Sie es abschließend mit der Verwendung von Themen
Zusätzlich zu diesen beiden Hauptmethoden zum Hinzufügen benutzerdefinierter Schriftarten und Typografie zu Ihrer WordPress-Website können Sie auch die zur Auswahl stehenden Themen nutzen. Es stehen zahlreiche Themes zur Verfügung, von denen viele über integrierte Optionen verfügen, mit denen Sie Ihre installierten Schriftarten anpassen können. Der Vorgang hierfür variiert je nach verwendetem Theme. Suchen Sie also unbedingt nach dem passenden Ratgeber, der zu Ihrem Thema passt. Hochwertige Premium-WordPress-Themes bieten auch Online-Zugriff auf Dokumente, die Richtlinien zum Hinzufügen benutzerdefinierter Schriftarten zu diesem bestimmten Theme enthalten.
Visuelle und gestalterische Elemente sind wohl einer der wichtigsten Faktoren bei der Erstellung einer effektiven Website, die die Aufmerksamkeit jedes Besuchers auf sich zieht. Eines der größten Features in diesem Bereich ist die Verwendung von Schriftarten. Unabhängig davon, wie Sie benutzerdefinierte Schriftarten zu Ihrer WordPress-Website hinzufügen, sollten Sie die Schriftarten finden und verwenden, die am besten zum Stil, zur Zielgruppe, zum Inhalt, zum Thema und zum Ton Ihrer gesamten Website und Marke passen.
Dieser Artikel wurde von Beatrice Beard geschrieben. Beatrice ist eine professionelle Texterin bei Academic Brits, die sich auf eine beeindruckende Bandbreite an Themen und Fachgebieten spezialisiert hat. Beatrice ist immer offen dafür, ihre persönlichen Erfahrungen zu teilen und Anfängerautoren kompetente Ratschläge zu geben, um all die vielen Herausforderungen und Besonderheiten bei der Erstellung hochwertiger Inhalte aufzudecken, die sich wirklich verkaufen.