So hosten Sie lokale Schriftarten in WordPress für eine schnellere Website

Eine schöne Typografie kann das Design Ihrer Website verbessern und Ihr Publikum fesseln.

Aber während wir die Leistung unserer Website verbesserten, stellten wir fest, dass die Abhängigkeit von Drittanbieter-Schriftartdiensten WordPress verlangsamen kann, was die Benutzererfahrung beeinträchtigt und möglicherweise Ihre SEO schädigt.

Wir haben ein paar Möglichkeiten gefunden, dieses Problem zu vermeiden. Eine Lösung ist, die Schriftarten lokal zu hosten.

Indem Sie die Kontrolle über Ihre Schriftartdateien übernehmen, kann Ihre Website diese zusätzlichen Ladeschritte überspringen und so eine blitzschnelle Website mit besserer Benutzererfahrung und SEO gewährleisten.

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

Warum Schriftarten lokal in WordPress hosten?

Während Typografie und benutzerdefinierte Schriftarten die allgemeine Ästhetik der Website verbessern können, haben sie einen negativen Einfluss auf Ihre WordPress-Performance. 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. Eine neue Webfonts API wurde in WordPress 6.0 eingeführt. Dies ermöglicht es Ihnen, Schriftarten lokal zu hosten, damit sie schneller geladen werden.

Ein weiterer Grund, Google Fonts lokal zu hosten, ist die DSGVO-Konformität. 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 seine Erlaubnis geschieht, betrachtet die EU dies nun als Verstoß gegen die Datenschutzbestimmungen, und Sie können für Schäden haftbar gemacht werden.

Dennoch wollen wir uns ansehen, 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.

1. Lokale Schriftarten in WordPress mit einem Plugin hosten
2. Schriftarten in WordPress manuell lokal hosten
3. Expertenanleitungen zu Schriftarten in WordPress

Methode 1: Lokale Schriftarten in WordPress mit einem Plugin hosten

Das Erste, was Sie tun müssen, ist das OMGF (Optimize My Google Fonts) Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema 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 Einstellungen » Google Fonts optimieren besuchen, um das Plugin zu konfigurieren. Sie sollten sich auf dem Tab 'Schriftarten optimieren' befinden.

Beachten Sie die Aussage 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 Scrollen auf der Einstellungsseite einfach sicherstellen müssen, dass die Option 'Font-Display Option' die Standardeinstellung 'Swap (empfohlen)' ausgewählt hat.

Alles, was Sie jetzt tun müssen, ist auf die Schaltfläche „Speichern & Optimieren“ am unteren Rand der Seite zu klicken.

Sie sehen eine Meldung am oberen Bildschirmrand, die besagt: „Optimierung erfolgreich abgeschlossen.“

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

Methode 2: Lokale Schriftarten manuell in WordPress hosten

Sie können Schriftarten auch lokal hosten, ohne ein Plugin zu verwenden, indem Sie die @font-face-Methode aus unserem Leitfaden zu So fügen Sie benutzerdefinierte Schriftarten in WordPress hinzu verwenden. Während diese Methode mehr Arbeit erfordert, können Sie damit jede beliebige Schriftart auf Ihrer Website 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 Web-Schriftarten finden, wie z. B. Google Fonts, Typekit, FontSquirrel und mehr.

Wenn Sie das Webformat für Ihre Schriftart nicht haben, können Sie es mit dem FontSquirrel Webfont Generator konvertieren.

Jetzt müssen Sie die Schriftarten auf Ihrem WordPress-Hosting Server speichern. Sie können die Dateien per FTP hochladen oder den cPanel-Dateimanager Ihres Hostinganbieters verwenden.

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

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

Sie können dies mit einer CSS3 @font-face-Regel wie dieser 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 eigenen zu ersetzen.

Danach können Sie diese Schriftart überall in der Stylesheet-Datei Ihres Themes oder im Abschnitt Zusätzliches CSS des Theme-Customizers verwenden. Das von Ihnen verwendete CSS hängt von Ihrem Theme und dem Ort ab, an dem 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.

Expertenanleitungen zu Schriftarten in WordPress

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie lokale Schriftarten in WordPress für eine schnellere Website hosten können. Möglicherweise möchten Sie auch einige andere Anleitungen zum Thema Schriftarten in WordPress sehen:

• Was ist eine Web-Safe-Schriftart + 19 beste Web-Safe-Schriftarten
• So ändern Sie Schriftarten in Ihrem WordPress-Theme (einfache Wege)
• Schriftgröße in WordPress einfach ändern
• So fügen Sie benutzerdefinierte Schriftarten in WordPress hinzu
• 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

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.