So fügen Sie Ihrer WordPress-Site benutzerdefinierte Schriftarten hinzu

Warum sollte Ihr Blog mit Standardschriftarten langweilig werden? Lassen Sie Ihren Blog über Ihre lebendige Persönlichkeit und die Themen sprechen, die Sie mit einer Vielzahl von benutzerdefinierten Schriftarten behandeln. Benutzerdefinierte Schriftarten sind eine nette Funktion, mit der Ihr Blog anderen vorzuziehen ist.

Seien wir ehrlich; Wir alle lieben Blogs und Websites mit den richtigen Schriftarten. Sie dekorieren nicht nur die Website, sondern ziehen auch den Benutzer für Ihre Inhalte an. Die Auswahl an Standard-WordPress-Schriftarten ist jedoch begrenzt und hängt vom verwendeten Thema ab. Die gute Nachricht ist, dass Sie sie manuell oder mit speziellen Plugins hinzufügen können.

Und hier stellen sich zwei Fragen: Wo bekomme ich benutzerdefinierte Schriftarten? für WordPress und So installieren Sie benutzerdefinierte Schriftarten auf Ihrer WordPress-Site.

Lass es uns herausfinden.

 Warum sollte ich benutzerdefinierte Schriftarten verwenden??

Die Zeiten sind vorbei, in denen Times New Roman und Georgia als die einzigen Schriftarten für Texte auf Websites angesehen wurden. In den letzten Jahren hat sich der Schriftbereich mit dem Aufkommen von Schriftarten wie Google Fonts und anderen vollständig geändert.

Heutzutage stehen im Internet Hunderte von kostenlosen Schriftarten, Informations- und Schulungshilfen sowie Ressourcen für das Design zur Verfügung. Im Gegensatz zu Adobe Illustrator, Photoshop und anderen klassischen Anwendungen bietet WordPress standardmäßig nicht die vollständige Kontrolle über Schriftarten. Nur einige Themen unterstützen und verwenden benutzerdefinierte Schriftarten.

In diesem Beitrag erfahren Sie daher, wie Sie geeignete benutzerdefinierte Schriftarten finden und diese auf Ihrer WordPress-Site verwenden.

Die Bedeutung der Verwendung benutzerdefinierter Schriftarten

Warum sollten Sie die Schriftarten, den Einzug zwischen Wörtern, den Zeilenabstand, den Buchstabenabstand oder die Schriftsättigung ändern? Wie dem auch sei, einige Studien beweisen dies Typografie verbessert das Leseverständnis.

Viel hängt von der Konstruktion der Schriftarten ab. Auf bewusster und unbewusster Ebene bewertet jeder den Inhalt einer Webseite nach seinem Design.

Das Schriftdesign wirkt sich auf die Leser aus, auch wenn sie es nicht beachten. Das Schriftdesign aufzugeben bedeutet, die Entwicklung selbst aufzugeben! Die Stimmung des Lesers hängt davon ab. Die Schriftart erleichtert entweder das Lesen oder zwingt Benutzer, die Seite zu verlassen.

Alle Webbrowser enthalten eine Reihe von Standardschriftarten. Dies bedeutet, dass die Standardversion verwendet wird, wenn die Schriftart nicht im CSS der Seite angegeben ist. Sie können immer die Standardschriftarten verwenden, diese erschweren jedoch die Arbeit der Benutzer. Aus diesem Grund ist es wichtig, eine benutzerdefinierte Schriftart zu verwenden. Wenn Ihr Thema keine Optionen zum Ändern der Schriftart bietet, können viele Websites und Tools hilfreich sein.

Google Fonts-Alternativen

Viele von Ihnen kennen kostenlose Google-Schriftarten. Es gibt viele weitere Websites, auf denen Sie wunderschöne Schriftarten finden können. Einige von ihnen sind für den persönlichen Gebrauch kostenlos. Wenn Sie für die kommerzielle Nutzung benötigen, benötigen Sie eine Lizenz. Google Fonts und Adobe Edge Fonts sind kostenlos. Deshalb sind sie nicht so einzigartig. Und das passt nicht zu uns.

Hier sind ein paar andere Ressourcen zum Auffinden von Schriftarten zur kostenlosen und kommerziellen Nutzung:

1. TemplateMonster – Auf der Website des TemplateMonster-Marktplatzes finden Sie alles, was Sie für das Webdesign benötigen. Es gibt auch viele Schriftarten und Schriftpakete für den persönlichen Gebrauch zu einem kleinen Preis. Außerdem werden sie im ONE Web Development Kit vorgestellt. Die Sammlung ist riesig und kreativ. Um Ihnen bei der Auswahl zu helfen, werden alle Schriftarten in Broschüren oder Rahmen dargestellt. Jede Schriftart wird auch mit einer kommerziellen Lizenz präsentiert.
2. MyFonts – MyFonts bietet derzeit die weltweit größte Auswahl an Schriftarten. Die Preise liegen hier aber auch im höheren Segment. Wenn Sie also ein knappes Budget haben, ist es möglicherweise nicht für Sie.
3. FontSpring – Fontspring verkauft ausgefallene Schriftarten für den kommerziellen Gebrauch. Aber in fast jeder Familie 1-2 kostenlose Schriftarten, die für persönliche Zwecke verwendet werden können. Außerdem gibt es einen separaten Bereich mit kostenlosen Schriftarten. Die Kollektion ist vibran. Vor dem Herunterladen müssen Sie jedoch die Lizenzinformationen für eine bestimmte Schriftart sorgfältig studieren.
4. Cufonfonts – Es ist auch eine umfangreiche Sammlung verschiedener Schriftarten. Wählen Sie eine aus, und Sie sehen eine Seite mit detaillierten Informationen dazu. Es gibt viele kostenlose Schriftarten, die in einzelne Abschnitte unterteilt sind. Das Sortiersystem auf CufonFonts ist sehr flexibel und bequem. Außerdem ist Webfont-Unterstützung enthalten.
5. Dafont – Eine weitere zugängliche Sammlung von 3.500 kostenlosen Schriftarten. Die meisten von ihnen sind nur für den persönlichen Gebrauch bestimmt. Eine nette Funktion DaFont ist ein Kategoriesystem. Sie können Schriftarten im Stil von Comics, Videospielen, Vintage-Schriftarten oder als japanische Schriftzeichen stilisierten Schriftarten auswählen.

Die Auswahl der Schriftarten ist sehr verlockend, da sie alle schön sind. Aber Sie sollten nicht viel wählen. Verwenden Nicht mehr als zwei Schriftarten auf der Website. Dann wird das Aussehen Ihrer Website konsistent sein. Laden Sie nach Auswahl Ihrer Schriftarten die Dateien für jeden verwendeten Stil herunter (normal, fett, kursiv usw.)..

Nachdem Sie die entsprechende Schriftart für die Site ausgewählt haben, erfahren Sie, wie Sie sie hinzufügen können.

So fügen Sie WordPress benutzerdefinierte Schriftarten hinzu

Es gibt verschiedene Möglichkeiten, einer WordPress-Site Schriftarten hinzuzufügen:

1. Plugins: In diesem Fall werden verschiedene WordPress-Plugins verwendet, um den Prozess zu vereinfachen.
2. Manuell: Mit dieser Methode müssen Sie eine heruntergeladene Schriftart auf die Site hochladen und die CSS-Datei bearbeiten.
3. Themen: Viele beliebte Themen enthalten integrierte Optionen zum Anpassen Ihrer Schriftarten (Hinweis: Diese Option wird nicht behandelt, da der Vorgang je nach verwendetem Thema variiert. Qualitativ hochwertige Premium-Themen wie das Total WordPress-Thema werden jedoch online angeboten Dokumente, denen Sie leicht folgen können – wie in diesem Handbuch, um Total benutzerdefinierte Schriftarten hinzuzufügen)

Option 1 – Ändern Sie WordPress-Schriftarten mit Plugins

Wenn wir uns nicht um globale Änderungen kümmern, können wir WordPress-Plugins installieren, die die Schriftarten auf Ihrer Site ändern.

Eigenschaften von benutzerdefinierten Schrift-Plugins

Open-Source-Software hat einen Vorteil für das Interesse der Community, und WordPress hat auch diesen Vorteil. Mit mehreren WordPress-Plugins können Sie benutzerdefinierte Schriftarten hinzufügen. Wie wählt man ein passendes Plugin mit so vielen? Was sind die Funktionen von benutzerdefinierten Schriftarten-Plugins??

Hier sind einige Punkte zu beachten:

• Möglichkeit, benutzerdefinierte Schriftarten zu verwenden
• Möglichkeit, mehr als eine Schriftart zu verwenden
• Zielheader und -komponenten
• Bonus: Die Möglichkeit, die Schriftarteinstellungen über den visuellen Editor zu ändern

Das ist alles. Das erste Merkmal auf der Liste ist sehr wichtig. Sie können Schriftarten jederzeit von Websites wie DaFont, Font Squirrel usw. herunterladen, müssen sie jedoch in WordPress hochladen können.

Schauen wir uns einige Plugins für WordPress an, mit denen Sie benutzerdefinierte Schriftarten hochladen können.

Benutzerdefinierter Schriftarten-Uploader

Mit diesem Plugin können Sie Google-Schriftarten herunterladen und auf verschiedene Elemente Ihres Blogs anwenden. Zum Beispiel zu den Überschriften oder zum Hauptteil des Artikels oder der Seite.

Verwenden Sie eine beliebige Schriftart

Dies ist ein WordPress-Plugin, mit dem Sie Schriftarten bequem herunterladen und direkt über den visuellen Editor verwenden können. Der visuelle Editor von WordPress kann die Schriftart eines beliebigen Textes automatisch ändern. Dieses Plugin bietet verschiedene Funktionen, die das Hinzufügen benutzerdefinierter Schriftarten wesentlich einfacher machen.

WP Google Fonts

Mit WP Google Fonts können Sie den Google-Schriftkatalog verwenden. Einer der erstaunlichen Vorteile dieses Plugins ist das Hinzufügen von fast 1000 Google-Schriftarten. Während Sie Google-Schriftarten manuell in die Warteschlange stellen können, ist es für die meisten Benutzer viel einfacher, ein Plugin zu verwenden.

So installieren Sie Schriftarten mit einem Plugin?

Nehmen wir zum Beispiel WP Google Fonts. Installieren Sie dieses Plugin einfach aus dem offiziellen WordPress-Repository und öffnen Sie den Bereich Google Fonts.

Hier wird ein Kontrollfeld für Google-Schriftarten angezeigt. Wählen Sie Schriftarten aus und ändern Sie verschiedene Einstellungen, z. B. den Schriftstil, die Elemente, auf die er angewendet wird usw..

Option 2 – Installieren Sie benutzerdefinierte WordPress-Schriftarten manuell

Über die @ font-face-Direktive können Sie eine oder mehrere Schriftarten mit Ihrer Site verbinden. Diese Methode hat jedoch Vor- und Nachteile.

Vorteile::

• Über CSS können Sie Schriftarten in jedem Format verbinden: ttf, otf, woff, svg.
• Schriftdateien befinden sich auf Ihrem Server – Sie sind nicht auf Dienste von Drittanbietern angewiesen.

Nachteile::

• Für die richtige Schriftverbindung für jeden Stil müssen Sie einen separaten Code registrieren.
• Ohne CSS zu kennen, können Sie leicht verwirrt werden.

Aber es ist kein wirkliches Problem, wenn Sie können Kopieren Sie einfach einen fertigen Code und wo Sie Ihre Werte angeben müssen.

Schritt 1: Erstellen Sie einen “Schriftarten” -Ordner

Erstellen Sie in Ihrem untergeordneten Thema einen neuen Ordner “Schriftarten” unter: wp-content / theme / your-child-theme / fonts

Schritt 2. Laden Sie die heruntergeladenen Schriftdateien auf Ihre Website hoch

Dies kann über das Control Panel Ihres Hostings oder über FTP erfolgen.

Fügen Sie alle Schriftdateien zum neu hinzugefügten Schriftartenordner hinzu: wp-content / theme / your-child-theme / fonts du hast geschaffen.

Schritt 3. Importieren Sie Schriftarten über das untergeordnete Design-Stylesheet

Öffnen Sie die style.css-Datei Ihres untergeordneten Themas und fügen Sie den folgenden Code am Anfang der CSS-Datei hinzu (nach dem Kommentieren des untergeordneten Themas):

@Schriftart{
Schriftfamilie: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: url ('fonts / WebFont.eot? #iefix') Format ('embedded-opentype'),
URL-Format ('fonts / WebFont.woff') ('woff'),
URL-Format ('fonts / WebFont.ttf') ('wahrer Typ'),
URL-Format ('fonts / WebFont.svg # svgwebfont') ('svg');
Schriftgröße: normal;
Schriftstil: normal;
}}

Wo MyWebFont ist der Name der Schriftart, und der Wert der Eigenschaft src (die Daten in Klammern in Anführungszeichen) ist ihre Position (relative Links). Wir müssen jeden Stil separat spezifizieren.

Da wir zuerst den normalen Stil verbinden, setzen wir die Eigenschaften für Schriftgröße und Schriftstil auf normal.

Schritt 4. Beim Hinzufügen Kursivschrift, schreib das Folgende:

@Schriftart{
Schriftfamilie: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: url ('fonts / WebFont-Italic.eot? #iefix') Format ('embedded-opentype'),
URL-Format ('fonts / WebFont-Italic.woff') ('woff'),
URL-Format ('fonts / WebFont-Italic.ttf') ('wahrer Typ'),
URL-Format ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
Schriftgröße: normal;
Schriftstil: kursiv;
}}

Wenn alles gleich ist, haben nur wir die Eigenschaft im Schriftstil kursiv angehängt.

Schritt 5. Um die fette Schrift hinzuzufügen, fügen Sie den folgenden Code hinzu:

@Schriftart{
Schriftfamilie: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
src: url ('fonts / WebFont-Bold.eot? #iefix') Format ('embedded-opentype'),
URL-Format ('fonts / WebFont-Bold.woff') ('woff'),
URL-Format ('fonts / WebFont-Bold.ttf') ('wahrer Typ'),
URL-Format ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
Schriftdicke: fett;
Schriftstil: normal;
}}

Wo wir die Font-Weight-Eigenschaft auf Fett setzen.

Denken Sie daran, den richtigen Speicherort der Schriftdateien für jeden Stil anzugeben.

Schritt 6. Um fett kursiv zu verbinden, geben Sie Folgendes ein:

@Schriftart{
Schriftfamilie: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: url ('fonts / WebFont-Italic-Bold.eot? #iefix') Format ('embedded-opentype'),
URL-Format ('fonts / WebFont-Italic-Bold.woff') ('woff'),
URL-Format ('fonts / WebFont-Italic-Bold.ttf') ('wahrer Typ'),
URL-Format ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
Schriftdicke: fett;
Schriftstil: kursiv;
}}

Nun, das ist alles �� Jetzt haben Sie vier Schriftstile mit Ihrer Website verbunden.

Es gibt jedoch eine Bemerkung: Diese Schriftverbindung wird in Internet Explorer 8 falsch angezeigt. Der Trost ist, dass nur noch sehr wenige Benutzer IE8 verwenden.

Benutzerdefinierte Schriftarten für WordPress einpacken

Was fällt den Nutzern als Erstes auf, wenn sie Ihre Website besuchen? Richtig, sein Design! Der größte Teil des Designs basiert auf der richtigen Verwendung schöner Schriftarten. Sie müssen sich also um das Schriftdesign Ihrer Website kümmern. Fügen Sie Code hinzu oder verwenden Sie eines der oben genannten Plugins, um einen neuen Schriftstil einzubetten. Welchen Weg Sie wählen, liegt bei Ihnen.

Stellen Sie sicher, dass Sie nicht mehr als zwei Schriftarten auf derselben Site verwenden. Je mehr benutzerdefinierte Schriftarten Sie der Site hinzufügen, desto langsamer wird die Geschwindigkeit der Site.

Das ist alles, zögern Sie nicht zu kommentieren. 

Wir werden uns auch freuen zu hören, welche Option Sie auswählen, um Ihrer Website eine benutzerdefinierte Schriftart hinzuzufügen, und wo Sie Ihre Schriftart finden.