Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

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.

How to Host Local Fonts in WordPress for a Faster Website

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.

OMGF Settings

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.

Click the Save & Optimize Button

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.

Downloading a Google Font

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.

Upload the Fonts to Your Website

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.

Adding Custom CSS With the Theme Customizer

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.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

7 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Liz S says

    Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?

    • WPBeginner Support says

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.