So fügen Sie auf einfache Weise benutzerdefinierte Schriftarten zu WordPress hinzu
Veröffentlicht: 2015-05-22Das Hinzufügen weiterer Schriftarten zu Ihrem Computer ist ziemlich einfach. Laden Sie die Dateien einfach in Ihr Schriftartenverzeichnis herunter, und Sie können sie dann in der Software und den Anwendungen Ihrer Wahl verwenden.
Wenn Sie jedoch benutzerdefinierte Schriftarten auf Ihrer Website verwenden möchten, insbesondere solche Schriftarten, die Ihre Besucher möglicherweise nicht auf ihren Geräten installiert haben, wird es etwas komplizierter.
Glücklicherweise gibt es als WordPress-Benutzer einige großartige kostenlose Tools, mit denen Sie einzelne Schriftarten oder eine ganze Bibliothek davon zu Ihrer Website hinzufügen können . Sobald Sie die Schriftarten für Ihr Design verfügbar gemacht haben, können Sie damit beginnen, sie auf die verschiedenen Stile anzuwenden, die auf Ihrer Website verwendet werden.
In diesem Artikel zeigen wir Ihnen, wo Sie hochwertige kostenlose und Premium-Schriftarten finden, wie Sie sie zu Ihrer WordPress-Website hinzufügen können, sowie einige Tools, mit denen Sie die richtigen Einstellungen für jede Schriftart auf Ihrer Website auswählen können.
Wo Sie Schriftarten für Ihre Website finden
Bevor wir zu den Anweisungen kommen, wie Sie benutzerdefinierte Schriftarten zu Ihrer WordPress-Website hinzufügen können, werfen wir einen Blick auf einige der Orte, an denen Sie neue Schriftarten finden können, um das Erscheinungsbild des Textes auf Ihrer Website zu ändern.
Es gibt einige großartige kostenlose Online-Ressourcen, in denen Sie Open-Source-Schriftarten finden, die Sie auf Ihrer gesamten Website frei verwenden können. Einige Ressourcen, die Sie vielleicht erkunden möchten, sind:
- Google Fonts: Durchsuchen Sie über 600 Open-Source-Schriftarten, die für das Web optimiert wurden. Die Verwendung dieser Schriftarten auf Ihrer WordPress-Website ist sehr einfach, wie wir in Kürze behandeln werden.
- Font Squirrel: ein weiteres großes Repository mit kostenlosen Schriftarten.
- Edge Web Fonts: eine Sammlung kostenloser Webfonts powered by Adobe Typekit.
- Typekit: eine professionelle Sammlung von über 4.000 kostenlosen und Premium-Schriftarten von Adobe zur Verwendung im Web und in gedruckter Form.
Wie Sie sehen können, gibt es viele legitime Online-Quellen für kostenlose und Premium-Schriftarten, mit denen Sie das Erscheinungsbild Ihrer WordPress-Website anpassen können.
Typografie-Tools für Webdesigner
Die Auswahl der richtigen Schriftarten für Ihre Website kann schwierig sein. Es geht um mehr, als nur ein oder zwei Schriftarten auszuwählen , die Ihnen gefallen, und sie dann zu Ihrer Website hinzuzufügen.
Sie müssen nicht nur das Erscheinungsbild der Schriftart berücksichtigen, sondern auch die Größe, die Sie wählen, wie breit der Inhaltsbereich Ihrer Website ist und welche Zeilenhöhe für jede Schriftart optimal ist.
Zum Glück gibt es einige kostenlose Online-Tools, mit denen Sie die von Ihnen gewählten Schriftarten korrekt anwenden können. Dadurch wird sichergestellt, dass Ihre Inhalte optimal aussehen .
Eine Online-Ressource, die Sie sich beim Anpassen der Schriftarten auf Ihrer Website unbedingt ansehen sollten, ist der Golden Ratio Typography Calculator. Mit diesem Typografie-Tool von dem Typ hinter Thesis Framework können Sie eine Schriftgröße eingeben, gefolgt von der Breite Ihres Inhaltsbereichs. Das Tool berechnet dann die perfekten typografischen Einstellungen für Ihre spezifische Website-Konfiguration.
Type Scale ist ein weiteres Online-Tool, mit dem Sie ganz einfach feststellen können, welche Größe die verschiedenen Textstile auf Ihrer Website im Verhältnis zueinander haben sollten. Nachdem Sie Ihre Basisschriftgröße eingegeben haben, wie z. B. die Größe des Absatztextes auf Ihrer Website, erfahren Sie dann, auf welche Größe die einzelnen Überschriften eingestellt werden sollten.
Es stehen eine Reihe von Skalen zur Auswahl, einschließlich des oben genannten Goldenen Schnitts. Sobald Sie mit den Einstellungen zufrieden sind, können Sie das CSS schnell für die Verwendung auf Ihrer eigenen Website kopieren .
Benutzerdefinierte WordPress-Schriftart-Plugins
So wie es viele Orte gibt, an denen Sie Schriftarten online finden können, gibt es auch viele Möglichkeiten, sie in Ihre WordPress-Website zu integrieren. Damit Sie jedoch so schnell wie möglich loslegen können , sind hier einige der besten Plugins für WordPress-Schriftarten:
Einfache Google-Schriftarten
Easy Google Fonts ist ein kostenloses Plugin, mit dem Sie jede der über 600 kostenlosen Schriftarten aus dem Google-Repository auf Ihrer WordPress-Website verwenden können. Das Plugin funktioniert mit dem WordPress Customizer Tool. Auf diese Weise können Sie Ihre Änderungen in der Vorschau anzeigen, bevor Sie eine endgültige Entscheidung darüber treffen, welche Schriftarten wo auf Ihrer Website verwendet werden sollen.
Nachdem Sie das Plugin auf Ihrer Website installiert und aktiviert haben, können Sie damit beginnen, die von Ihrem aktuellen WordPress-Theme verwendeten Schriftarten zu ändern. Gehen Sie dazu zum WordPress Customizer-Tool und klicken Sie auf den Abschnitt Typografie.
Mit dem Plugin können Sie standardmäßig die Typografieeinstellungen für die Hauptstile ändern, die von Ihrem Design verwendet werden. Dies könnte den Absatz und die einzelnen Überschriften umfassen. Über die Einstellungsseite von Easy Google Fonts können Sie jedoch benutzerdefinierte Schriftarten erstellen . Diese werden dann der Customizer-Oberfläche hinzugefügt und bieten Ihnen eine einfache Möglichkeit, die Schriftart zu ändern, die von Elementen wie Listen, Anführungszeichen und mehr verwendet wird.
Nachdem Sie ein benutzerdefiniertes Schriftsteuerelement hinzugefügt haben, können Sie über die Design-Typografie-Einstellungen im Customizer darauf zugreifen.
Durch die Verwendung dieser Funktion des Plugins können Sie dann die Schriftarten ändern, die von einem der Elemente oder Stile Ihres WordPress-Designs verwendet werden. Die dem Customizer hinzugefügten Steuerelemente decken auch die Schriftstärke, die Textdekoration und die Transformationseigenschaften sowie die Schriftfarbe, die Hintergrundfarbe, die Größe, die Zeilenhöhe und den Buchstabenabstand ab.

Durch die Kombination der benutzerdefinierten Schriftsteuerelemente mit den angebotenen detaillierten Einstellungen eröffnet das Easy Google Fonts-Plugin eine ganze Welt von Möglichkeiten, wenn es darum geht, das Erscheinungsbild des Textes auf Ihrer WordPress-Website zu ändern, ohne dass Code direkt bearbeitet werden muss.
Verwenden Sie eine beliebige Schriftart
Das obige Easy Google Fonts-Plugin wird dringend empfohlen. Allerdings hat sie einen Nachteil: Sie können nur die Schriften aus der Google Fonts-Sammlung verwenden. Wenn Ihnen keine dieser 686 Schriftarten zusagt oder Sie eine benutzerdefinierte Schriftart verwenden möchten, ist das ebenso kostenlose Use Any Font-Plugin eine gute Alternative.
Nach der Installation und Aktivierung des Plugins können Sie eine oder mehrere Schriftarten direkt von Ihrem Computer auf Ihre Website hochladen. Bevor Sie jedoch beginnen, müssen Sie sich für den kostenlosen API-Schlüssel anmelden (oder eine Spende leisten), der das Plugin mit dem Schriftarten-Konvertierungstool verbindet.
Nachdem Sie mindestens eine Schriftart hochgeladen haben, können Sie diese den einzelnen Elementen Ihrer Website zuweisen. Dazu gehören die Liste der Standardelemente sowie alle benutzerdefinierten Elemente, die Sie definieren.
Das Plugin fügt dem Post-Editor von WordPress auch einige Schriftsteuerelemente hinzu. Dies macht es einfach, die in Ihren Beiträgen und Seiten verwendeten Schriftarten individuell und nicht global zu ändern.
Nachdem Sie eine Schriftart zugewiesen haben, können Sie die Änderungen an Ihrer Typografie anzeigen, indem Sie das Frontend Ihrer Website besuchen. Die Steuerelemente dieses Plugins sind zwar nicht mit denen des Easy Google Fonts-Plugins vergleichbar, aber wenn Sie nur die von den spezifischen Elementen Ihres Designs verwendeten Schriftarten in eine benutzerdefinierte Schriftart Ihrer Wahl ändern möchten, dann tut Use Any Font dies die Arbeit schön.
Typekit-Schriftarten für WordPress
Wenn Sie die kostenlosen und Premium-Schriftarten des Adobe Typekit-Dienstes auf Ihrer WordPress-Website verwenden möchten, dann ist das kostenlose Plug-in „Typekit Fonts for WordPress“ genau das Richtige für Sie.
Mit diesem Plugin können Sie entweder die vordefinierten Selektoren verwenden oder Ihre eigenen benutzerdefinierten CSS-Regeln hinzufügen . Dadurch wird sichergestellt, dass jeder Teil Ihrer Website, den Sie mit einer Typekit-Schriftart personalisieren möchten, Sie dies mit diesem Plugin tun können.
Hinzufügen von benutzerdefinierten Schriftarten zu WordPress von Hand
Wenn Ihnen die Verwendung eines der oben genannten kostenlosen Plugins aus irgendeinem Grund nicht zusagt, können Sie die auf Ihrer WordPress-Website verwendeten Schriftarten jederzeit manuell ändern. Wenn die Schriftart, die Sie verwenden möchten, im Google Fonts-Repository zu finden ist, ist das Hinzufügen zu Ihrer Website sehr einfach.
Sie müssen lediglich die Schriftart auf der Google-Website auswählen und dann den entsprechenden Code in den Head-Bereich und das CSS-Stylesheet Ihrer Website kopieren.
Wenn Ihre bevorzugte Schriftart jedoch nicht in einem Repository wie Google Fonts gehostet wird , wo Sie einfach darauf verlinken können, müssen Sie die Schriftart selbst hosten. Dies ändert den Prozess geringfügig und fügt einige zusätzliche Schritte hinzu, z. B. das Hochladen der Schriftart auf Ihren Server.
Sie können die Schriftartdatei mit einer FTP-Software oder dem Dateimanager-Tool in der Systemsteuerung Ihres Webhosts hochladen. Es ist eine gute Idee, die Schriftart in ein spezielles Verzeichnis für Schriftarten hochzuladen , vorzugsweise in den Ordner Ihres untergeordneten Designs, um die Organisation zu erleichtern.
Sobald sich die Schriftartdatei auf Ihrem Server befindet, öffnen Sie die CSS-Stylesheet-Datei Ihres Designs zur Bearbeitung. Dies kann in Ihrem WordPress-Admin-Dashboard auf dem Bildschirm Aussehen > Editor erfolgen.
Sobald Sie das obige CSS zum Stylesheet hinzugefügt haben, um die Schriftart zu laden, können Sie es überall in dieser CSS-Datei verwenden, um das Erscheinungsbild des Textes wie folgt zu ändern:
Aus Leistungsgründen sollten Sie nach Möglichkeit versuchen, auf ein externes Font-Repository wie Google Fonts zu verlinken. Wenn Sie jedoch die Schriftart, die Sie verwenden möchten, online nicht finden können, müssen Sie möglicherweise einen Teil Ihrer Seitengeschwindigkeit opfern, indem Sie die Datei selbst hosten.
Fazit
Hoffentlich wissen Sie jetzt, wo Sie benutzerdefinierte Schriftarten finden und wie Sie sie zu Ihrer WordPress-Site hinzufügen können. Durch die Verwendung eines der kostenlosen Plugins wie Easy Google Fonts können Sie nicht nur die auf Ihrer Website verwendeten Schriftarten ändern, sondern auch, wie diese Schriftarten dargestellt werden .
Dank des WordPress Customizer-Tools können Sie jetzt ganz einfach Änderungen am Erscheinungsbild des Textes auf Ihrer Website vornehmen. Dies alles geschieht über eine Reihe von visuellen Menüs, komplett mit einer Live-Vorschau.
Wenn Ihr aktuelles Design Ihnen nicht viel Kontrolle darüber gibt, welche Schriftarten auf Ihrer Website verwendet werden, haben Sie jetzt mit einer der oben genannten Methoden eine einfache Möglichkeit, diese Änderungen vorzunehmen, ohne das zugrunde liegende CSS selbst zu bearbeiten.
Was sind deine Lieblingsschriften? Welche Typografieeinstellungen auf Ihrer Website möchten Sie ändern? Wenn Sie Fragen zu Schriftarten, Typografie oder WordPress im Allgemeinen haben, teilen Sie diese bitte in den Kommentaren unten mit.