So ändern Sie die Schriftart in WordPress – Vollständige Anleitung

Schriftarten sind eine Notwendigkeit des Webdesigns. Nicht nur auf WordPress.

Sogar eine einfache HTML-Site muss die Schriftart festgelegt haben. Zum Glück ist WordPress ein Full-Stack-Content-Management-System mit vielen integrierten Codierungen, die Codierungsänderungen erleichtern.

Nachfolgend finden Sie ein intensives Tutorial mit allem, was Sie über Schriftarten und WordPress wissen müssen, wie Sie sie anpassen, in Ihr Stylesheet codieren und Ihre Schriftarten für Geschwindigkeit und Einhaltung der Datenschutzbestimmungen weltweit optimieren.

So ändern Sie die Schriftart in WordPress

Schriftarten können von fonts.google.com importiert werden oder Sie können ein Plugin hinzufügen, um beliebige Google-Schriftarten zu verwenden. Alternativ können Sie jede Schriftartdatei (WOFF, WOFF2, SVG, OTF oder TTF) selbst hosten, indem Sie die Dateien von einem Schriftartenhersteller herunterladen, sie über cPanel oder FTP hochladen und dann das CSS bearbeiten, um die Schriftart zu laden.

So ändern Sie die Schriftart mit dem WordPress-Customizer

Auf WordPress.com können Benutzer mit kostenlosen Plänen die Schriftart ändern, indem sie entweder die Designeinstellungen anpassen oder die globale Filtereinstellung im Blockeditor verwenden. Wie es gemacht wird, hängt von dem Thema ab, das Sie verwenden.

Die CSS-Anpassung ist kostenpflichtigen Plänen oder solchen auf selbst gehosteten WordPress-Sites vorbehalten.

Einige Themes wurden entwickelt, um WordPress Global Filter zu verwenden. Andere haben benutzerdefinierte Schriftarten, die im Design vorgebündelt sind.

Um herauszufinden, welche Methode für Ihr Design geeignet ist, gehen Sie zu Ihren Design-Anpassungsoptionen.

Klicken Sie auf Darstellung > Anpassen > Schriftarten.

Wenn Sie auf die Anpassungsoptionen für Schriftarten klicken, wird eine Meldung angezeigt, die lautet

„Sie können Ihre Schriftarten mit globalen Stilen ändern, die im Blockeditor zu finden sind“,

Dies bedeutet, dass Sie einen Beitrag oder eine Seite erstellen und dann die Schriftarten in den globalen Einstellungen des Blockeditors ändern müssen.

Designs, die einen Schriftartenordner in der Installation enthalten haben, haben eine Option zum Ändern der Schriftart.

Diejenigen, die dies nicht tun, haben keine Schriftarten oder Typografieoptionen zum Ändern. Es kann immer noch gemacht werden. Nur nicht mit ein paar Klicks.

Das Twenty Twenty-One-Theme ist ein Beispiel für ein WordPress-Theme ohne zusätzliche Schriftarten. Dies ist so konzipiert, dass es mit dem Blockeditor kompatibel ist, in dem die Schriftarten in neueren Themen geändert werden können.

Wenn Ihr Design-Anpasser keinen Abschnitt für Schriftarten und Größen oder Typografieeinstellungen anzeigt, versuchen Sie den globalen Stil im Blockeditor, aber Ihr Design muss dies unterstützen.

Ältere Themes oder solche, die WordPress mit installiertem Classic Editor ausführen, müssen eine Problemumgehung verwenden, die nicht alle einfach sind.

So ändern Sie Schriftarten mit dem globalen Stilfilter

Der globale Stilfilter ist Teil des Blockeditors. Um die Schriftart für die gesamte Website zu ändern, erstellen Sie einen neuen Beitrag oder eine neue Seite.

Oben rechts im WordPress-Editor befindet sich ein schwarzes Symbol mit zwei Buchstaben A – eines groß, das andere klein – nebeneinander.

Klicken Sie darauf und das rechte Navigationsfenster zeigt eine Reihe von Schriftarten, die Sie anwenden können.

sind Polizeistationen rund um die Uhr geöffnet

Wenn Sie hier die Schriftarten ändern, werden die Änderungen auf alle Blöcke angewendet, die Text enthalten.

So ändern Sie die Schriftart im Classic Editor

Der globale Styler ist nur verfügbar, wenn Sie den Blockeditor verwenden.

Wenn Sie das Classic Editor-Plugin installiert haben, können Sie entweder ein zusätzliches Plugin installieren oder unten weiterlesen, um zu erfahren, wie Sie die Schriftart manuell in WordPress ändern können.

Beginnen Sie mit Ihrem Theme-Customizer. Die meisten WP-Designs haben einen Schriftartenordner.

Aus Geschwindigkeitsgründen ist die Installation eines Typografie-Font-Plugins die schnellere Lösung, um Ihre Schriftart und Überschriften anzupassen.

Kostenlose WordPress-Plugins zum Ändern der Schriftarttypografie

Die Verwendung eines Plugins ist die einfachste und schnellste Methode, um Schriftarten in WordPress zu ändern. Die meisten Seitenerstellungs-Plug-ins verfügen bereits über benutzerdefinierte Schriftarten. Diese greifen in Google Fonts ein, da dies der einzige Schriftartenanbieter ist, der völlig kostenlos verwendet werden kann, sogar auf kommerziellen Websites.

Wenn Sie ein Abonnement für Adobe Creative Cloud haben, können Sie stattdessen das Adobe Fonts-Plug-in installieren oder den Anweisungen weiter unten folgen, wie Sie benutzerdefinierte Schriftarten zu WordPress hinzufügen, ohne ein Plug-in zu verwenden.

Unten sind die 3 beliebtesten WordPress-Typografie-Plugins

Plugin für erweiterte Editor-Tools

Gehen Sie zum Plugins-Menü in der linken Seitenleiste Ihres WordPress-Dashboards, klicken Sie auf Plugins > Neu hinzufügen.

Typ ' Erweiterte Editor-Tools “ in der Suchleiste.

Nach der Installation und Aktivierung werden zusätzliche Tools zu Ihrer WP-Editor-Symbolleiste hinzugefügt. Wählen Sie das Dropdown-Menü auf der linken Seite der Symbolleiste, um eine andere Schriftart auszuwählen.

WP-Typografie-Plugin

Dieses Plugin hilft Ihnen, die von Ihnen verwendeten Schriftarten besser zu nutzen. Es nimmt Änderungen an Ihrem HTML vor und hilft dabei, Ihr Styling konsistent und korrekt zu halten.

Schriftarten werden nicht hinzugefügt. Dennoch kann es einige Funktionen haben, die Ihnen helfen, Ihre Inhalte nach Ihren Wünschen zu gestalten.

Es ist wahrscheinlicher, dass es auf Lebensmittelseiten nützlich ist, die Rezepte veröffentlichen, oder auf DIY-Seiten, die mathematische Berechnungen abdecken.

Um es zu installieren, gehen Sie zu Plugins > Neu hinzufügen und suchen Sie nach WP Typografie .

Klicken Sie auf Installieren und aktivieren.

Nach der Installation und Aktivierung gibt es verschiedene Änderungen an Ihrer Typografie, die auf der Einstellungsseite automatisiert werden können. Jede Einstellung hat eine Erklärung, was passiert, wenn Sie sie aktivieren.

Beispielsweise ist es auf einer Website, auf der mathematische Berechnungen diskutiert werden, zum Synonym für die Verwendung des Schrägstrichs geworden, um das Divisionssymbol zu ersetzen.

Dieses Plugin kehrt das um, wenn die von Ihnen festgelegte Schriftart ein Teilungszeichen hat.

Auf Rezeptseiten sieht beispielsweise 1 1/2 besser aus als 1 ¹ / _zwei.

In HTML müssten Sie dies mit hochgestellten und tiefgestellten Zeichen in HTML (oder den Schaltflächen in Ihrer Symbolleiste) anwenden.

<sup>1</sup>/<sub>2.&nbsp;</sub>

Und es macht es einfach, Passerzeichen/Symbole wie TM hochgestellt zu formatieren und das Copyright-Symbol mit (c) anstelle der Shortcode-Methode von ALT + 0169 einzufügen, um © zu erhalten.

Für ein registriertes Symbol wird (r) verwendet. Ohne dieses Plugin ist der Code ALT + 0174 zu bekommen ®.

Für die Formatierung Ihrer Inhalte haben Sie die Möglichkeit, Witwen zu verhindern.

Dies ist der Fall, wenn nur ein Wort in einer separaten Zeile erscheint.

Wenn ein einzelnes Wort in eine eigene Zeile fällt, können Sie das Plugin so einrichten, dass es die letzten Wörter aus der vorherigen Zeile einzieht und verhindert, dass Zeilen mit einem einzelnen Wort angezeigt werden. Mit der Wrap-Funktion können Sie das Gleiche mit langen URLs tun.

Einfache Google-Schriftarten

Easy Google Fonts ist das am häufigsten verwendete Typografie-Plugin in WordPress.

Um es zu installieren, gehen Sie zu Plugins > Neu hinzufügen und installieren Sie die Einfache Google-Schriftarten Plugin.

Nach der Installation müssen Sie einen API-Schlüssel von Google abrufen. Dazu benötigen Sie ein Google-Konto.

Gehen Sie zu https://developers.google.com/fonts/docs/developer_api. 

Wählen Sie „Neues Projekt erstellen“ (Scrollen Sie auf der Seite nach unten, um die Schaltfläche „Get the Key“ zu finden) und geben Sie dann einen Namen ein.

Der hier verwendete Name wird in Ihrer Google Cloud Console angezeigt, wo Sie alle Ihre API-Schlüssel für Ihr Google-Konto verwalten können.

Klicken Sie auf „Weiter“ und kopieren Sie dann Ihren API-Schlüssel in Ihre Zwischenablage.

Gehen Sie zurück auf Ihrem WordPress-Dashboard im Menü auf der linken Seite zu Einstellungen > Easy Google Fonts, wählen Sie „Einstellungen“ im oberen Navigationsmenü für das Plugin, fügen Sie Ihren API-Schlüssel ein und klicken Sie dann auf die Schaltfläche Speichern.

Nach der Installation wird Ihrem WP Customizer ein neuer Abschnitt „Typografie“ hinzugefügt. Laden Sie den Customizer, dann können Sie jede Schriftart verwenden, die auf fonts.google.com verfügbar ist.

Die Hauptschrift wird für den Hauptinhalt Ihrer Website verwendet, der für Absätze, Seitenleistentext und den Text in Navigationsmenüelementen verwendet wird.

Die Schriftart für Überschriften ist für die Überschriften-Tags H1 bis H6 vorgesehen und jede kann eine andere Schriftart sein.

Der Kompromiss für die Einfachheit bei Easy Google Fonts ist die Geschwindigkeit

Damit jeder einzelne Besucher Ihre Webseite lädt, muss Ihr Website-Server eine Verbindung zum Google-Webserver herstellen, um die Schriftart abzurufen, die Sie für Ihre Website festgelegt haben.

Das kann die Geschwindigkeit Ihrer Website leicht verlangsamen.

Der Vorgang zum Laden Ihrer Website beim Herstellen einer Verbindung über die Google Fonts-API besteht darin, zuerst den HTML-Code Ihrer Webseite zu lesen, dann eine Verbindung zu fonts.googleapis.com/css herzustellen, um das Stylesheet abzurufen, und dann eine Verbindung zu fonts.gstatic.com herzustellen, um die Schriftart abzurufen auf Ihrer Website laden.

Das ist pro Schriftart. Also ziemlich viel.

Ein dreistufiger Prozess, der die Ladezeit Ihrer Seite um fast eine Sekunde verlängern kann. Es mag nicht viel erscheinen, aber hinzugefügt zu jeder anderen Ressource, die das Rendern blockiert, sammelt es sich an. Ein Besucher kann Ihre Seite in weniger als einer Sekunde verlassen.

Das Plugin erleichtert die Verwendung von Google Fonts, muss jedoch auf Leistung optimiert werden.

Sie können das mit dem OMGF-Plugin für WordPress tun, das Sie wahrscheinlich sowieso brauchen werden.

Denn ohne die Kopplung dieser beiden Plugins verstößt Easy Google Fonts alleine gegen die Datenschutzbestimmungen.

reich j. Puno-Lieder

Warum das wichtig ist

Verschiedene Länder haben Datenschutzbestimmungen bezüglich der Verwendung von Cookies, die auf Benutzergeräten platziert werden.

Europa hat die strengsten Datenschutzgesetze der Welt. DSGVO – Allgemeine Datenschutzbestimmungen. Dies gilt für alle Seiten, die in jedem Land der Europäischen Union (EU) aufgerufen werden können.

Dazu müssen ausdrückliche Cookie-Zustimmungshinweise angezeigt und eine Cookie-Richtlinie auf der Website veröffentlicht werden, die Benutzer über die Daten informiert, die Ihre Website durch die Verwendung von Cookies sammelt.

Dazu gehören Cookies von Drittanbietern, die fonts.googleapis.com oder fonts.gstatic.com verwenden, um Besucher-CSS-Datensätze und IP-Adressprotokolle zu speichern.

Der kalifornische Consumer Privacy Act (CCPA) hat einen ähnlichen Geltungsbereich wie die DSGVO, nur dass er nicht gleich geregelt ist. In Europa gibt es für europäische Unternehmen Strafen bei Nichteinhaltung.

Der Zweck des CCPA besteht darin, die Transparenz für Einwohner Kaliforniens darüber zu erhöhen, wie ihre Informationen verwendet werden.

Technisch verlangt der CCPA nur, dass Benutzer darüber informiert werden, dass eine Website Cookies verwendet und warum. Eine Opt-out-Einwilligungsoption ist nicht zwingend erforderlich.

In Europa muss den Benutzern die Möglichkeit gegeben werden, die Speicherung von Cookies auf ihren Geräten abzulehnen.

Brasilien hat im September 2020 die LGPD (Lei Geral de Proteçao de Dados) eingeführt, die der DSGVO sehr ähnlich ist, abzüglich der harten Bußgelder bei Nichteinhaltung. Schwere Verstöße werden mit hohen Strafen geahndet.

Der wichtige Teil des Setzens von Cookies durch Google Fonts

Eine IP-Adresse wird als „Personal Identifiable Information“ (PII) erkannt, daher macht das Cookie, das Google über Ihre Website auf einem Benutzergerät platziert, Ihre Website DSGVO, CCPA und LGPD. Wenn Sie kein „Cookie Consent“-Plug-in verwenden, sollten Sie Google Fonts selbst hosten, um die Anforderungen zu erfüllen.

So machen Sie Google Fonts ganz einfach datenschutzkonform

Die einfachste Methode, Google Fonts selbst auf Ihrem eigenen Server zu hosten, ist die Verwendung des OMGF-Plugins für WordPress. Es macht die Google Font API überflüssig.

Dazu gibt es zwei Methoden. Manuell oder automatisch. Für den automatischen Modus müssen Sie jedoch eine Pro-Lizenz kaufen. Die Preise variieren je nach Anzahl der Websites, auf denen Sie es verwenden.

Die manuelle Methode bedeutet nur, dass Sie das Plugin verwenden müssen, um eine Verbindung zur Google Fonts-API herzustellen, Kopien (eine Cache-Version) der Schriftarten, die Sie verwenden möchten, in den benötigten Dateitypen herunterzuladen und dann ein Stylesheet zum Laden der Schriftarten zu erstellen von Ihrem Server anstelle von Googles.

Das OMGF-Plugin kopiert die Schriftdateien von fonts.google.com und legt sie auf Ihrem Server ab. Es verbindet Ihre Benutzer nicht über die API mit den Google-Servern. Das ist der Verknüpfungsteil zum Kopieren der Dateien in Ihre WordPress-Installation.

Ohne sie müssten Sie alles manuell erledigen. Dies ist wie die kostenlose Methode zur manuellen Automatisierung des Selbsthostings für Google Fonts.

So einfach geht das.

Installieren Sie das OMGF-Plugin

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen.

Suche nach Schlüsselwort für OMGF – eine Abkürzung für „ Meine Google Fonts optimieren “.

Klicken Sie auf die Schaltfläche „Jetzt installieren“ und dann auf „Aktivieren“.

Sobald dies erledigt ist, wird Ihrem Menü „Einstellungen“ ein neuer Menüpunkt mit der Bezeichnung „Google Fonts optimieren“ hinzugefügt.

Klicken Sie darauf und die Seite Allgemeine Einstellungen wird geladen.

Es mag einschüchternd aussehen, aber die Standardeinstellungen sind normalerweise ausreichend. Sie müssen lediglich die Konfigurationseinstellungen überprüfen und dann auf „Speichern und optimieren“ klicken.

Bei der manuellen Methode können Sie nicht viel tun.

Die Pro-Version hat viel mehr Optimierungsfunktionen. Wenn Sie die kostenlose Version verwenden, wird ein Cache-Ordner für Schriftarten auf Ihrem Server erstellt. Dort werden Ihre Dateien gespeichert. (/uploads/omgf).

Wenn Sie einen anderen Ordner wünschen, klicken Sie auf „Erweiterte Einstellungen“ und legen Sie Ihr benutzerdefiniertes „Fonts Cache Directory“ auf den Ordner fest, der sich bereits auf Ihrem Server befindet. Wenn Ihr Design keinen Schriftartenordner hat, wird einer erstellt.

Klicken Sie auf die Registerkarte „Erkennungseinstellungen“, um zu überprüfen, ob die Standardoption auf „Ersetzen“ für „Google Fonts-Verarbeitung“ eingestellt ist. Wenn es auf „Entfernen“ eingestellt ist, wird Ihre Website auf Systemschriftarten zurückgesetzt.

Wenn Sie die Informationen zu den „Erkennungseinstellungen“ nach unten scrollen, werden Sie auf einen Dateitypabschnitt stoßen. Als kostenloser Benutzer können Sie keine anderen Dateitypen hinzufügen. Dabei verpasst man nicht viel.

Die Dateitypen WOFF und WOFF2 sind die Standardoptionen. EOT-, TTF- und SVG-Dateien sind Premium-Funktionen. Lesen Sie weiter, um mehr über Schriftdateitypen und die Typen zu erfahren, die Sie benötigen.

Wenn Sie mit den Einstellungen zufrieden sind, gehen Sie zurück zur ersten Registerkarte mit dem Titel „Schriftarten optimieren“, scrollen Sie nach unten zum Abschnitt „Optimierte Schriftarten verwalten“ und überprüfen Sie, ob die URL auf eine Seite verweist, auf der Sie die gewünschte Schriftart oder Schriftarten veröffentlicht haben um Kopien von auf Ihrem Server zu erstellen, klicken Sie dann auf „Speichern und optimieren“.

Wenn Sie auf „Speichern und optimieren“ klicken, scannt das Plugin die von Ihnen festgelegte URL, ruft die erforderlichen Schriftartdateien von Google-Servern ab und fügt eine Cache-Version jeder Schriftart zu Ihrem WordPress-Design hinzu.

Diese Cache-Fonts werden von Ihrem Server statt von Google geladen. Alle aktiven Schriftarten auf Ihrer Website werden im selben Abschnitt mit Optionen zum Verwalten Ihrer Schriftarten vorbelegt.

Im obigen Screenshot wurden nur zwei Schriftarten kopiert. „Lato“ und „Monsterratte“. Die aktiven Schriftarten des Designs. Alle anderen Tausenden von Google Fonts werden ignoriert, sodass Sie nicht die gesamte Bibliothek importieren, da dies wahrscheinlich Ihre Serverbandbreite beeinträchtigen würde.

Die Schriftarten, die in diesem Beispiel importiert werden, stammen aus dem Thema. Obwohl es sich um ein Premium-Design handelt, verwendet es die Google Fonts Developer API. Dies gilt auch für viele Designs mit benutzerdefinierten Schriftarten.

Auch ohne das Easy Google Fonts Plugin können Themes also nicht datenschutzkonform sein. Wenn Themes Google Fonts verwenden, sollten Sie trotzdem OMGF für Compliance und Geschwindigkeit verwenden.

Der Grund für Geschwindigkeitsprobleme bei Themen, die die API verwenden, besteht darin, dass Google-Server Anfragen möglicherweise nicht erfüllen, wenn Sie ein beliebtes Thema verwenden, oder zumindest nicht so schnell, wie es sein könnte.

Was Sie über FOUT wissen sollten

FOUT steht für „Flash of Unstyled Text“. Dies passiert, wenn das Laden der Schriftart eine Weile dauert. Anstatt einen weißen Bildschirm anzuzeigen, während die Seite geladen wird, laden Browser die Standardschriftart.

Der „Flash“-Teil ist der kurze Moment, in dem die Standard-Browser-Schriftart geladen wird, dann wechselt die Website nach dem Laden zur benutzerdefinierten Schriftart. Obwohl es sich um Sekunden handelt, ist FOUT auffälliger, wenn Sie eine dekorative Schriftart verwenden.

Um zu verhindern, dass FOUT auftritt, legen Sie mehrere Schriftarten in Ihrem CSS fest.

So legen Sie Backup-Schriftarten mit CSS fest

Im WordPress CSS Customizer werden Schriftstapel festgelegt. Sie können so viele verwenden, wie Sie möchten, aber im Allgemeinen reichen vier bis zehn Schriftartnamen aus, um sicherzustellen, dass Sie generische Fallback-Schriftarten haben.

der geschrieben hat, lass es gehen

Denken Sie daran, dass jede Schriftart, die Sie in Ihr CSS aufnehmen, sich im Schriftartenordner Ihres Designs befinden muss.

Wenn nicht, sollte die URL für die Schriftart mithilfe der @import-Funktion in das Design-Stylesheet aufgenommen werden, um die Schriftart von überall im Web abzurufen.

Welche Schriftarten Ihnen auch zur Verfügung stehen, Sie können in Ihrem CSS Customizer einen Schriftartenstapel festlegen.

Ein Beispiel für einen Schriftstapel:

.body {
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
}

Eine Erklärung, wie Schriftstapel in CSS codiert werden

Font-family wird verwendet, um den Namen der Schriftart festzulegen. Für jedes Thema ist die Klasse, auf die Sie die Schriftart anwenden, unterschiedlich. Gängige CSS-Klassen in WP-Designs sind für den Hauptinhalt, oder

@font-face {
font-family: Caveat Bold;
src: url(https://yoursite.com/wp-content/themes/twentynineteen/fonts/Caveat-Bold.ttf);
font-weight: normal;

.page-title {
font-family: “Caveat Bold”;
}