Google Fonts lokal hosten

    Hallo,

    gibt es eine gute Schritt-für-Schritt-Anleitung, die auch jemand ohne Programmierkenntnisse versteht, wie man Google Fonts auf den eigenen Server runterladen und sie im WP lokal einbinden kann?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Kati28

    Danke. Kann man irgendwo alle Schriften auf einmal sehen, die man auf seiner Seite nutzt?


    Du kannst über die Entwickler-Tools deines Browsers nach geladenen Schriften/Fonts filtern. Allerdings musst du, wenn du die Dateien lokal ausliefern willst, ohnehin alle Aufrufe im Theme ändern. Insofern wirst du sowieso suchen müssen.

    Normalerweise findest du die Aufrufe bzw. den entsprechenden Code irgendwo in der functions.php im Theme Verzeichnis. Leider kann es aber auch sein, dass dies in andere Dateien ausgelagert ist oder dynamisch über die Theme-Options eingebunden wird (und deshlab für den "Laien" nicht so einfach zu finden ist). Im schlimmsten Fall sind sie statisch in der header.php oder der footer.php eingebunden (was wirklich schlechter Stil wäre, dir aber die Suche erleichtern würde).

    Danke für die Tipps. Ich hab nun alle Schriften, die ich bei mir gefunden habe, nach der Anleitung lokal umgezogen. Wie kann man prüfen, ob die Schriften jetzt alle tatsächlich lokal geladen werden? Sieht man es irgendwo?

    Also, ich habe die Schriften runtergeladen und dann den Code in die style.css-Datei von meinem Theme eingebaut. Das sind z.B. die Codes für Raleway und Roboto:
    /* raleway-regular - latin */
    @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Raleway'), local('Raleway-Regular'),
    url('../fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
    }

    /* raleway-italic - latin */
    @font-face {
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/raleway-v12-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Raleway Italic'), local('Raleway-Italic'),
    url('../fonts/raleway-v12-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/raleway-v12-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/raleway-v12-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/raleway-v12-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/raleway-v12-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
    }
    /* roboto-regular - latin */
    @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }

    1.) Laut deinem Screenshot benötigst du mehrere Schriftschnitte, dein Code lädt aber von jeder Schriftart nur den Schriftschnitt "normal" 400 und von der Raleway noch "italic" 400. Ausserdem lädst du nicht alle Schriften ("Lora" z.B. fehlt).

    2.) Dein Code lädt die Schriften lokal (vorausgesetzt, die Pfade stimmen, wovon ich jetzt mal ausgehe). Allerdings musst du zusätzlich noch dafür sorgen, dass sie nicht mehr von Google geladen werden. Dazu musst du alle Aufrufe finden und entfernen (siehe mein Post #5 und #10 von @b3317133).

    ok, danke. Ich versuche morgen Abend nochmal. Lora habe ich auch runtergeladen und auch weitere Schriften. Hier habe ich nur zwei Beispiele gepostet.

    Zitat von Kati28

    ok, danke. Ich versuche morgen Abend nochmal. Lora habe ich auch runtergeladen und auch weitere Schriften. Hier habe ich nur zwei Beispiele gepostet.

    Das 1) war auch eher als Hinweis zu verstehen. Die Ursache deines Problems (das Fonts immer noch vom Google Server geladen werden) ist 2).

    Sorry, dass ich jetzt solche blöde Fragen stelle. Wenn die Schriften auf dem FTP-Server unter /WordPress/wp-content/themes/meinTheme/fonts abgelegt sind, ist dann als Pfad in der css-Datei ../fonts/roboto-v18-latin-regular.eot ausreichend, oder muss ich statt ".." am Anfang den kompletten Pfad angeben, also /WordPress/wp-content/themes/meinTheme/fonts/roboto-v18-latin-regular.eot?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden