Möchten Sie Schriftarten von Drittanbietern zu Ihrer Website hinzufügen, ohne die Geschwindigkeit Ihrer Website zu verlangsamen?
Benutzerdefinierte Schriftarten verbessern die Typografie und das Benutzererlebnis Ihrer Website, das Laden dauert jedoch länger. Die gute Nachricht ist, dass Sie Ihre Schriftarten lokal hosten können, um sicherzustellen, dass Ihre Website immer schnell ist.
In diesem Artikel zeigen wir Ihnen, wie Sie lokale Schriftarten in WordPress hosten.
Warum Schriftarten lokal in WordPress hosten?
Während Typografie und benutzerdefinierte Schriftarten können die allgemeine Website-Ästhetik verbessern, sie wirken sich jedoch negativ auf Ihre aus WordPress-Leistung. Wenn Sie beispielsweise eine benutzerdefinierte Schriftart von Google Fonts verwenden, werden diese von Drittanbieterdiensten geladen, was Ihre Website verlangsamt.
Glücklicherweise gibt es eine Möglichkeit, benutzerdefinierte Schriftarten zu verwenden, ohne Ihre Website zu verlangsamen. In WordPress 6.0 wurde eine neue Webfonts-API eingeführt. Auf diese Weise können Sie Schriftarten lokal hosten, damit sie schneller geladen werden.
Ein weiterer Grund, Google Fonts lokal zu hosten, besteht darin, DSGVO-konform zu bleiben. Dies ist eine wichtige rechtliche Überlegung, wenn Sie Website-Besucher aus der Europäischen Union haben.
Wenn jemand eine Website besucht, die Google Fonts verwendet, wird seine IP-Adresse von Google protokolliert, wenn die Schriftarten geladen werden. Da dies ohne ihre Zustimmung geschieht, sieht die EU nun einen Verstoß gegen die Datenschutzbestimmungen und Sie können schadensersatzpflichtig werden.
Lassen Sie uns einen Blick darauf werfen, wie Sie lokale Schriftarten in WordPress für eine schnellere Website hosten können. Wir werden zwei Methoden behandeln, und die erste Methode wird für die meisten Benutzer empfohlen.
Methode 1: Lokale Schriftarten in WordPress mit einem Plugin hosten
Als erstes müssen Sie die installieren und aktivieren OMGF (Optimize My Google Fonts)-Plugin. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
OMGF ist eines der besten WordPress-Typografie-Plugins. Es bietet eine anfängerfreundliche Möglichkeit, die Leistung und die DSGVO-Konformität zu verbessern, indem Google Fonts lokal gehostet werden.
Nach der Aktivierung müssen Sie besuchen Einstellungen » Google Fonts optimieren um das Plugin zu konfigurieren. Sie sollten sich die Registerkarte „Schriftarten optimieren“ ansehen.
Beachten Sie die Erklärung unter der Überschrift „Google Fonts optimieren“, dass Sie nur die Standardeinstellungen verwenden müssen, um Ihre Google Fonts automatisch durch lokal gehostete Kopien zu ersetzen.
Das bedeutet, dass Sie beim Herunterscrollen auf der Einstellungsseite lediglich sicherstellen müssen, dass für die Option „Schriftartanzeige“ die Standardeinstellung „Austauschen (empfohlen)“ ausgewählt ist.
Alles, was Sie jetzt tun müssen, ist, unten auf der Seite auf die Schaltfläche „Speichern und optimieren“ zu klicken.
Oben auf dem Bildschirm wird die Meldung „Optimierung erfolgreich abgeschlossen“ angezeigt.
Glückwünsche! Ihre Google Fonts werden jetzt lokal gehostet. Ihre Website wird schneller geladen und Sie haben das Risiko europäischer Klagen verringert.
Methode 2: Manuelles Hosten lokaler Schriftarten in WordPress
Sie können Schriftarten auch lokal hosten, ohne ein Plugin zu verwenden, indem Sie die @font-face-Methode aus unserer Anleitung zum Hinzufügen benutzerdefinierter Schriftarten in WordPress verwenden. Diese Methode erfordert zwar mehr Arbeit, ermöglicht es Ihnen jedoch, jede beliebige Schriftart auf Ihrer Website zu verwenden.
Sie müssen die Schriftarten, die Sie verwenden möchten, in einem Webformat herunterladen. Es gibt viele Orte, an denen Sie großartige kostenlose Webfonts finden können, z. B. Google Fonts, Typekit, FontSquirrel und mehr.
Wenn Sie nicht über das Webformat für Ihre Schriftart verfügen, können Sie sie mithilfe von konvertieren FontSquirrel Webfont-Generator.
Jetzt müssen Sie die Schriftarten auf Ihrem WordPress-Hosting-Server speichern. Sie können die Dateien per FTP oder mit dem cPanel-Dateimanager Ihres Hosts hochladen.
Du solltest einen neuen Ordner namens ‚fonts‘ im Verzeichnis deines Themes oder Child-Themes erstellen und dort hochladen.
Nachdem Sie die Schriftart hochgeladen haben, müssen Sie die Schriftart mithilfe von benutzerdefiniertem CSS in das Stylesheet Ihres Designs laden. Sie können den Code direkt zur style.css-Datei Ihres Designs hinzufügen oder den Abschnitt „Zusätzliches CSS“ des Design-Anpassers verwenden.
Sie können dies mit der @font-face-Regel von CSS3 wie folgt tun:
@font-face {
font-family: Arvo;
src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Vergessen Sie nicht, die Schriftfamilie und die URL durch Ihre eigene zu ersetzen.
Danach können Sie diese Schriftart überall im Stylesheet Ihres Designs oder im Abschnitt „Zusätzliches CSS“ des Design-Anpassers verwenden. Welches CSS Sie verwenden, hängt von Ihrem Design ab und davon, wo Sie die lokale Schriftart verwenden möchten. Hier ist ein Beispiel von unserer Demo-Website:
h1 {
font-family: Arvo, Arial, sans-serif;
}
Wie Sie sehen können, verwendet unsere Überschrift jetzt die lokal gehostete Arvo-Schriftart.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie Sie lokale Schriftarten in WordPress für eine schnellere Website hosten. Vielleicht möchtest du auch erfahren, wie du deinen Blog-Traffic steigern kannst, oder sieh dir unsere Liste der unverzichtbaren WordPress-Plugins an, um deine Website zu erweitern.
