Wie man lokale Schriftarten in WordPress für eine schnellere Website hostet

Eine schöne Typografie kann das Design Ihrer Website verbessern und Ihr Publikum fesseln. Als Experten für WordPress-Performance stellen wir jedoch fest, dass die Verwendung von Schriften von Drittanbietern Ihre Website verlangsamen kann, was sich negativ auf die Benutzererfahrung auswirkt und möglicherweise Ihre Suchmaschinenoptimierung beeinträchtigt.

Die Lösung ist, die Schriften lokal zu hosten. Indem Sie die Kontrolle über Ihre Schriftdateien übernehmen, kann Ihre Website diese zusätzlichen Ladeschritte überspringen und eine blitzschnelle Website mit besserer Benutzererfahrung und SEO gewährleisten.

In diesem Artikel zeigen wir Ihnen, wie Sie lokale Schriften in WordPress hosten können. So können Sie die Typografie Ihrer Website verbessern und gleichzeitig eine optimale Leistung beibehalten.

Warum sollten Schriftarten in WordPress lokal gehostet werden?

Typografie und benutzerdefinierte Schriftarten können zwar die Gesamtästhetik der Website verbessern, haben aber auch negative Auswirkungen auf die Leistung von WordPress. Wenn Sie z. B. eine benutzerdefinierte Schriftart von Google Fonts verwenden, wird diese von Diensten Dritter 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. Damit können Sie Schriftarten lokal hosten, damit sie schneller geladen werden.

Ein weiterer Grund, Google Fonts lokal zu hosten, ist die Einhaltung der GDPR-Vorschriften. Das ist ein wichtiger rechtlicher Aspekt, 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, betrachtet die EU dies nun als Verstoß gegen die Datenschutzbestimmungen, und Sie können für Schäden haftbar gemacht werden.

Werfen wir also einen Blick darauf, wie man lokale Schriftarten in WordPress hosten kann, um eine schnellere Website zu erhalten. Wir werden zwei Methoden behandeln, wobei die erste Methode für die meisten Benutzer empfohlen wird.

Methode 1: Hosten lokaler Schriftarten in WordPress mit einem Plugin

Als Erstes müssen Sie das OMGF-Plugin (Optimize My Google Fonts) installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

OMGF ist eines der besten WordPress-Plugins für Typografie. Es bietet eine einsteigerfreundliche Möglichkeit, die Leistung und GDPR-Konformität zu verbessern, indem Google Fonts lokal gehostet werden.

Nach der Aktivierung müssen Sie Einstellungen “ Google-Schriftarten optimieren aufrufen, um das Plugin zu konfigurieren. Sie sollten die Registerkarte „Schriftarten optimieren“ sehen.

Beachten Sie die Aussage unter der Überschrift „Google-Schriftarten optimieren“, dass Sie nur die Standardeinstellungen verwenden müssen, um Ihre Google-Schriftarten automatisch durch lokal gehostete Kopien zu ersetzen.

Wenn Sie also auf der Einstellungsseite nach unten blättern, müssen Sie nur sicherstellen, dass für die „Schriftart-Anzeigeoption“ die Standardeinstellung „Swap (empfohlen)“ ausgewählt ist.

Jetzt müssen Sie nur noch auf die Schaltfläche „Speichern & Optimieren“ unten auf der Seite klicken.

Am oberen Rand des Bildschirms wird eine Meldung angezeigt, die besagt: „Optimierung erfolgreich abgeschlossen“.

Herzlichen Glückwunsch! Ihre Google-Schriftarten werden jetzt lokal gehostet. Ihre Website wird schneller geladen und Sie haben das Risiko europäischer Klagen verringert.

Methode 2: Lokale Schriftarten in WordPress manuell hosten

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 Ihnen aber, 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 Möglichkeiten, großartige kostenlose Webschriften zu finden, z. B. Google Fonts, Typekit, FontSquirrel und andere.

Wenn Sie kein Webformat für Ihre Schrift haben, können Sie sie mit dem FontSquirrel Webfont-Generator konvertieren.

Nun müssen Sie die Schriftarten auf Ihrem WordPress-Hosting-Server speichern. Sie können die Dateien per FTP oder über den cPanel File Manager Ihres Hosts hochladen.

Sie sollten einen neuen Ordner mit dem Namen „fonts“ im Verzeichnis Ihres Themes oder Child-Themes erstellen und ihn dort hochladen.

Nachdem Sie die Schriftart hochgeladen haben, müssen Sie die Schriftart mit benutzerdefiniertem CSS in das Stylesheet Ihres Themes laden. Sie können den Code direkt in die style.css-Datei Ihres Themes einfügen oder den Abschnitt „Zusätzliches CSS“ des Theme-Anpassers verwenden.

Sie können dies mit einer CSS3 @font-face-Regel wie dieser erreichen:

@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 Themes oder im Abschnitt „Zusätzliches CSS“ des Theme-Customizers verwenden. Welches CSS Sie verwenden, hängt von Ihrem Theme 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 Schriftart Arvo.

Expertenanleitungen zu Schriftarten in WordPress

Da Sie nun wissen, wie Sie lokale Schriftarten hosten können, möchten Sie vielleicht einige andere Anleitungen zur Verwendung von Schriftarten in WordPress lesen.

• Was ist eine websichere Schriftart + 19 beste websichere Schriftarten
• Wie Sie die Schriftarten in Ihrem WordPress-Theme ändern (einfache Methoden)
• Wie man die Schriftgröße in WordPress einfach ändert
• Hinzufügen von benutzerdefinierten Schriftarten in WordPress
• Wie man Google Fonts datenschutzfreundlich macht
• So deaktivieren Sie Google Fonts auf Ihrer WordPress-Website
• So fügen Sie ganz einfach Icon Fonts in Ihr WordPress-Theme ein
• Die besten WordPress Typografie-Plugins zur Verbesserung Ihres Designs

Wir hoffen, dass diese Anleitung Ihnen geholfen hat, zu lernen, wie Sie lokale Schriftarten in WordPress hosten können, um Ihre Website schneller zu machen. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Steigerung der Besucherzahlen in Ihrem Blog oder für unsere Expertenauswahl von WordPress-Plugins, die Sie unbedingt benötigen, um Ihre Website zu erweitern.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.