So fügen Sie benutzerdefinierte Schriftarten zu einer WordPress-Website hinzu

Möchten Sie erfahren, wie Sie benutzerdefinierte Schriftarten zu einer WordPress-Website hinzufügen?

Warum sollten Sie Ihren Blog langweilig machen, indem Sie Standardschriften verwenden? Lassen Sie Ihren Blog mit einer Vielzahl von benutzerdefinierten Schriftarten über Ihre lebhafte Persönlichkeit und die Themen sprechen, die Sie behandeln. Benutzerdefinierte Schriftarten sind eine coole Funktion, mit der Ihr Blog anderen vorgezogen wird.

Seien wir ehrlich; Wir alle lieben Blogs und Websites mit den richtigen Schriftarten. Sie schmücken nicht nur die Website, sondern tragen auch dazu bei, den Benutzer auf Ihre Inhalte aufmerksam zu machen. Die Auswahl an Standard-WordPress-Fonts ist jedoch begrenzt und hängt vom verwendeten Theme ab. Die gute Nachricht ist, dass Sie sie manuell oder mit hinzufügen können Wordpress-Plugins spezialisiert.

Und hier stellen sich zwei Fragen: wo Sie benutzerdefinierte Schriftarten erhalten für WordPress u So installieren Sie benutzerdefinierte Schriftarten auf Ihrer Website.

Lassen Sie uns herausfinden.

Warum sollte ich benutzerdefinierte Schriftarten verwenden?

Vorbei sind die Zeiten, in denen Times New Roman und Georgia als einzige Schriftarten für Texte auf Websites galten. In den letzten Jahren hat sich der Schriftraum mit dem Aufkommen von Schriftarten wie z Google Fonts und andere.

Heute gibt es Hunderte von kostenlosen Schriftarten, Informations- und Schulungshilfen sowie Designressourcen, die im Internet verfügbar sind. Im Gegensatz zu Adobe Illustrator, Photoshop und anderen klassischen Apps gibt Ihnen WordPress keine vollständige Kontrolle über Standardschriftarten. Nur bestimmte WordPress-Designs unterstützen und verwenden benutzerdefinierte Schriftarten.

In diesem Artikel erfahren Sie daher, wie Sie geeignete benutzerdefinierte Schriftarten finden und auf Ihrer WordPress-Website verwenden.

Die Bedeutung der Verwendung benutzerdefinierter Schriftarten

Warum sollten Sie Schriftarten, Worteinzüge, Zeilenabstände, Buchstabenabstände oder die Schriftsättigung ändern, fragen Sie sich? Einige Studien zeigen dies jedoch Typografie verbessert das Leseverständnis.

Viel hängt von der Konstruktion der Schriftarten ab. Auf bewusster und unbewusster Ebene – jeder wertet den Inhalt einer Webseite per Design.

Schriftdesign beeinflusst Leser, auch wenn sie nicht darauf achten. Das Schriftdesign aufzugeben bedeutet, die Entwicklung selbst aufzugeben! Die Stimmung des Lesers hängt davon ab. Die Schriftart erleichtert das Lesen oder zwingt Benutzer, die Seite zu verlassen.

Alle Webbrowser enthalten eine Reihe von Standardschriftarten. Das bedeutet, wenn die Schriftart nicht im CSS der Seite angegeben ist, wird die Standardversion verwendet. Sie können immer noch die Standardschriftarten verwenden, aber sie erschweren es den Benutzern. Aus diesem Grund ist es wichtig, eine benutzerdefinierte Schriftart zu verwenden. Wenn Ihr WordPress-Theme Ihnen keine Optionen zum Ändern der Schriftart bietet, gibt es viele Websites und Tools, die Ihnen helfen können.

Google Fonts-Alternativen

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

Hier sind einige andere Ressourcen zum Suchen von Schriftarten zur freien und kommerziellen Nutzung:

1. Templatemonster — Auf der Website von TemplateMonster finden Sie alles, was Sie für das Webdesign benötigen. Es gibt auch viele Schriftarten und Schriftartenpakete für den persönlichen Gebrauch zu einem kleinen Preis. Darüber hinaus werden alle Schriftarten auf Broschüren oder Rahmen dargestellt, um Ihnen die Auswahl zu erleichtern. Jede Schriftart wird auch mit einer kommerziellen Lizenz präsentiert.
2. MyFonts — MyFonts bietet derzeit die weltweit größte Auswahl an Schriftarten. Allerdings sind die Preise auch hier im oberen Segment angesiedelt. Wenn Sie also ein knappes Budget haben, ist dies möglicherweise nichts für Sie.
3. FontSpring — Fontspring verkauft neuartige Schriftarten für den kommerziellen Gebrauch. Aber in fast jeder Familie können 1-2 kostenlose Schriftarten für persönliche Zwecke verwendet werden. Außerdem gibt es einen separaten Abschnitt mit kostenlosen Schriftarten. Die Sammlung ist lebendig. Vor dem Herunterladen müssen Sie jedoch die Lizenzinformationen für eine bestimmte Schriftart sorgfältig studieren.
4. Cufonts — Es ist auch eine riesige Sammlung verschiedener Schriftarten. Wählen Sie eine aus und Sie sehen eine Seite mit detaillierten Informationen darüber. Es gibt viele kostenlose Schriftarten, die in einzelne Abschnitte unterteilt sind. Das Sortiersystem von CufonFonts ist sehr flexibel und bequem. Auch Webfont-Unterstützung ist enthalten.
5. Dafont — Eine weitere barrierefreie Sammlung von 3 kostenlosen Schriftarten. Die meisten von ihnen sind nur für den persönlichen Gebrauch bestimmt. Ein cooles DaFont-Feature ist ein Kategoriensystem. Sie können Schriftarten im Stil von Comics, Videospielen, Vintage usw. auswählen.

Die Auswahl an Schriftarten ist sehr verlockend, weil sie alle schön sind. Aber man sollte nicht viel auswählen. Verwenden Sie nicht mehr als zwei Schriftarten auf einer Website Netz. Dann ist dieAussehen Ihrer Website wird konsequent sein. Nachdem Sie Ihre Schriftarten ausgewählt haben, stellen Sie sicher, dass Sie die Dateien für jeden Stil hochladen, den Sie verwenden werden (normal, fett, kursiv usw.).

Nachdem Sie nun die geeignete Schriftart für Ihre Website ausgewählt haben, erfahren Sie, wie Sie sie hinzufügen.

So fügen Sie benutzerdefinierte Schriftarten zu WordPress hinzu

Es gibt mehrere Möglichkeiten, Schriftarten zu einer WordPress-Website hinzuzufügen:

1. Plugins : in diesem Fall anders Wordpress-Plugins werden verwendet, um den Prozess zu erleichtern.
2. manuell : Bei dieser Methode müssen Sie eine Schriftart von der Website herunterladen und die CSS-Datei ändern.
3. Themes: Viele beliebte Themen verfügen über integrierte Optionen zum Anpassen Ihrer Schriftarten (Hinweis: Wir werden diese Option nicht behandeln, da der Vorgang je nach verwendetem Thema unterschiedlich ist.

Option 1 – Ändern Sie WordPress-Schriftarten mit Plugins

Wenn uns globale Änderungen egal sind, können wir installieren Wordpress-Plugins Dadurch werden die Schriftarten auf Ihrer Website geändert.

Funktionen von Plugins für benutzerdefinierte Schriftarten

Open-Source-Software hat einen Vorteil für das Interesse der Community, und WordPress hat diesen Vorteil ebenfalls. Mit mehreren WordPress-Plugins können Sie benutzerdefinierte Schriftarten hinzufügen. Wie wählt man ein geeignetes Plugin aus, wenn es so viele gibt? Was sind die Funktionen von WordPress-Plugins für benutzerdefinierte Schriftarten?

Hier sind einige Punkte zu beachten:

• Möglichkeit, eine benutzerdefinierte Schriftart zu verwenden
• Möglichkeit, mehrere Schriftarten zu verwenden
• Header und Zielkomponenten
• Bonus: Die Möglichkeit, die Schriftarteinstellungen im visuellen Editor zu ändern

Das ist alles. Das erste Merkmal in der Liste ist sehr wichtig. Sie können weiterhin Schriftarten von Websites wie DaFont, Font Squirrel usw. herunterladen, aber Sie müssen in der Lage sein, sie in WordPress hochzuladen.

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

1. Better Awesome Font

Mit diesem WordPress-Plugin können Benutzer die neueste Version von Better Font Awesome-Schriftarten automatisch mit dem kombinieren CSS, Shortcodes und mehr. Außerdem wird dieses WordPress-Plugin automatisch aktualisiert.

Sie finden als Features: regelmäßige Updates, einen Shortcode-Generator, Kompatibilität mit anderen WordPress-Plugins, etc ...

Herunterladen | Demo | Web-Hosting

2. Google Fonts für WordPress

Dieses WordPress-Plugin besteht aus 877-Spezialschriften, mit denen Sie alle Schriften auf Ihren WordPress-Websites verwenden können. Dank der Echtzeitvorschau können Sie sehen, wie Ihre Website aussehen wird, sobald die Schriftart angewendet wird. 

Außerdem können Sie es speichern und im Frontend bearbeiten, wenn Sie die gewünschte Kombination gefunden haben.

Zu den Funktionen gehören: eine Echtzeitvorschau, a ziemlich fortgeschrittenes SEO, mehrsprachiger Support, Unterstützung für mehr 870 + Google Fonts, einfache Updates und mehr.

Herunterladen | Demo | Web-Hosting

3.Fonts-Plugin

Fonts Plugin ist ein kostenloses WordPress-Plugin, das Benutzern den Zugriff auf Google Fonts und Adobe Fonts-Bibliotheken ermöglicht. Mit diesem WordPress-Plugin können Sie aus über 1000 Google- und Adobe-Schriftarten auswählen, mehrere Schriftarten auf Ihrer Website verwenden und verschiedene Optionen mit der Echtzeit-Vorschaufunktion des Plugins im WordPress-Customizer testen.

Für weitere Möglichkeiten zum Anpassen der Typografie Ihrer Website wie Schriftgröße, Buchstabenabstand und Zeilenhöhe können Sie auf die Premium-Version upgraden. Schriftarten-Plugin Pro.Herunterladen | Demo | Web-Hosting

4. Einfache Google Fonts

Easy Google Fonts ist eine davon beste WordPress-Plugins um die Typografie Ihrer Website anzupassen. Wie beim Fonts-Plug-in können Sie aus Hunderten von Google-Schriftarten auswählen und diese im Customizer in der Vorschau anzeigen, bevor Sie sie zu Ihrer Website hinzufügen.

Obwohl es Zugriff auf eine kleinere Anzahl von Google-Schriftarten bietet, ist es insofern einzigartig, als es Ihnen ermöglicht, benutzerdefinierte Schriftsteuerelemente und -regeln im Admin-Bereich zu erstellen, die sofort im WordPress-Customizer erscheinen.

Herunterladen | Demo | Web-Hosting

Option 2 – Benutzerdefinierte WordPress-Schriftarten manuell installieren

Mit der @font-face-Direktive können Sie eine oder mehrere Schriftarten mit Ihrer Website verbinden. Aber diese Methode hat ihre Vor- und Nachteile.

Avantages:

• Dank 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 korrekte Schriftartverbindung für jeden Stil müssen Sie einen separaten Code registrieren.
• Ohne CSS-Kenntnisse kann man 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.

Remarque : Stellen Sie sicher, dass Sie dies tun, bevor Sie beginnen ein Child-Theme erstellen für Ihre Webseite. Auf diese Weise können Sie alle Änderungen an Ihrem untergeordneten Design vornehmen und Ihr Hauptdesign beibehalten, damit Sie es bei Bedarf in Zukunft problemlos aktualisieren können.

Schritt 1: Erstellen Sie einen „Fonts“-Ordner

Erstelle in deinem Child-Theme einen neuen „Fonts“-Ordner unter: wp-content/themes/your-child-theme/fonts

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

Dies kann über Ihr Hosting-Control-Panel oder per FTP erfolgen.

Fügen Sie alle Schriftartendateien zum neu hinzugefügten Schriftartenordner hinzu: wp-content/themes/ Erstelle in deinem Child-Theme einen neuen „fonts“-Ordner unter: wp-content/themes/your-child-theme/fonts die du erstellt hast.

Schritt 3. Importieren Sie Schriftarten über das Child-Theme-Stylesheet

Öffnen Sie die Datei style.css deines Child-Themes und füge den folgenden Code am Anfang der CSS-Datei (nach dem Child-Theme-Kommentar) hinzu:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

wo MyWebFont ist der Name der Schriftart und der Wert der Eigenschaft src (die Daten in Klammern in Anführungszeichen) ist ihr Speicherort (relative Links). Wir müssen jeden Stil separat angeben.

Da wir zuerst den normalen Stil verbinden, setzen wir die Eigenschaften font-weight und font-style auf normal.

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Wenn alles gleich ist, sind wir die einzigen, die die Eigenschaft Schriftstil an Kursiv anhängen.

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Wo wir die Eigenschaft font-weight auf fett setzen.

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

Schritt 6. Um Fett und Kursiv zu verbinden, geben Sie Folgendes ein:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Das war's. Nun, da Sie vier Schriftstile mit Ihrer Website verbunden haben.

Aber es gibt eine Anmerkung: Diese Schriftverbindung wird im Internet Explorer 8 nicht korrekt angezeigt. Der Trost ist, dass nur sehr wenige Leute noch IE8 verwenden.

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

• 10 WordPress-Akkordeon-Plugins für eine Website
• So fügen Sie mehrere Spalten in WordPress hinzu
• Einige Plugins zu integrieren Google-Dienste auf Ihrem Blog
• 5 WordPress-Plugins zum Anzeigen von Benachrichtigungen
• Mit verschiedenen Hintergründen Wordpress

Zusammenfassung

Was ist das erste, was Benutzer bemerken, wenn sie Ihre Website besuchen? Das ist richtig, sein Design! Der größte Teil des Designs beruht 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. Wie Sie es wählen, ist Ihnen überlassen.

Stellen Sie sicher, dass Sie nicht mehr als zwei Schriftarten auf derselben Website verwenden. Denn je mehr benutzerdefinierte Schriftarten Sie der Website hinzufügen, desto mehr sinkt die Website-Geschwindigkeit.

Das war es für diesen Artikel, der Ihnen zeigt, wie Sie einer WordPress-Website benutzerdefinierte Schriftarten hinzufügen. Wir laden Sie ein, es zu versuchen. Wenn Sie Bedenken oder Vorschläge haben, teilen Sie uns dies bitte innerhalb mit commentaires.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

In der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.   

...