Laden der Schrift dauert oder funktioniert nicht, nach lokaler Einbindung der Fonts

  • Hallo zusammen, ich habe die Fonts meiner Website nun lokal auf dem Server mithilfe eines Child Themes und dem Google Webfonts Helper eingebunden, was soweit geklappt hat.

    Die Google Fonts, die ich zuvor benutzt hatte, konnte ich nur mit dem Plugin "Disable & Remove Google Fonts" wegbekommen. Innerhalb WordPress war es mir nicht möglich. Das Plugin "Autoptimize" hat es auch nicht geschafft, dieses habe ich aber aktiviert gelassen, um auch die WordPress Emojis zu deaktivieren.

    Theme: Astra
    Pagbuilder: Elementor

    Nun lädt bei mir aber nur der Browser Chrome die richtige Schrift (Merriweather) – aber das leider nur sehr träge. Safari und Firefox laden gar nicht die richtige Schrift. Allgemein erscheint mir das Laden der Website nun sehr träge. In die style.css hatte ich den Zusatz
    font-display: swap;
    eingebunden. In die functions.php
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

    Hat einer von euch Tipps, was ich noch tun könnte?

    • 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

  • Wie man die Google Webfonts in Astra abschaltet, steht z.B. in der Astra Theme Dokumentation.

    Wie man die Google Webfonts in Elementor abschaltet und die Ladegeschwindigkeit erhöht, steht z.B. in der Elementor Dokumentation.

    In die functions.php
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>


    Dieser Code ist offensichtlich unvollständig.

    Link zur Seite? Siehe auch Forenregeln, Punkt II.

  • Die Google Fonts, die ich zuvor benutzt hatte, konnte ich nur mit dem Plugin "Disable & Remove Google Fonts" wegbekommen. Innerhalb WordPress war es mir nicht möglich. Das Plugin "Autoptimize" hat es auch nicht geschafft,

    OH OH: wenn nicht einmal Autoptimize die Fonts los wird...

    hast du einen Cache aktiv? oder muss das Plugin "Disable & Remove Google Fonts" bei jedem Seiten zugriff die Fonts erneut entfernen. dies kann eine Performance Bremse sein.

    Mit offenen Augen träumen

  • Die Webfont Dateien sind nicht an passender Stelle im Child Theme hochgeladen, Zugriffe auf die Font Dateien ergeben derzeit Fehler 404 nicht gefunden. Poste einen Screenshot der Verzeichnisstruktur und Dateien im Child Theme, dann kann man Dir ggf. weiterhelfen.

  • OH OH: wenn nicht einmal Autoptimize die Fonts los wird...

    hast du einen Cache aktiv? oder muss das Plugin "Disable & Remove Google Fonts" bei jedem Seiten zugriff die Fonts erneut entfernen. dies kann eine Performance Bremse sein.


    Cache aktiv? Was genau meinst Du damit. Zum Cache löschen im Backend benutze ich Autoptimize – meinst Du das?

  • Die Webfont Dateien sind nicht an passender Stelle im Child Theme hochgeladen, Zugriffe auf die Font Dateien ergeben derzeit Fehler 404 nicht gefunden. Poste einen Screenshot der Verzeichnisstruktur und Dateien im Child Theme, dann kann man Dir ggf. weiterhelfen.


    Ich hoffe die Screenshots helfen weiter!

  • Die Font Dateien, auf die in [FONT=Courier New]style.css[/FONT] des Child Themes verwiesen wird, sind lt. Screenshot nicht hochgeladen (Ergänzung: bzw. an die falsche Stelle hochgeladen, es war zunächst nur der erste Screenshot in der Antwort #8 vorhanden).

    Offenbar fehlt noch der Punkt 4 aus dem Google Webfonts Helper, "Download files" und der Upload des [FONT=Courier New]fonts[/FONT] Ordners in das Child Theme.

    Und passe in [FONT=Courier New]style.css[/FONT] den Pfad (das ist das "folder prefix" aus Punkt 3 im Google Webfonts Helper) von [FONT=Courier New]../fonts/[/FONT] in [FONT=Courier New]fonts/[/FONT] an.

    4 Mal editiert, zuletzt von b3317133 (29. August 2022 um 17:23)

  • Die Font Dateien, auf die in style.css des Child Themes verwiesen wird, sind lt. Screenshot nicht hochgeladen.

    Offenbar fehlt noch der Punkt 4 aus dem Google Webfonts Helper.

    Die Fonts liegen im Fonts Ordner. Muss der einfach verschoben werden in den Child Theme Ordner?
    Und was genau ist Punkt 4 aus dem Google Webfonts Helper?

  • Die Fonts liegen im Fonts Ordner. Muss der einfach verschoben werden in den Child Theme Ordner?
    Und was genau ist Punkt 4 aus dem Google Webfonts Helper?


    >>> Punkt 4 hatte ich erledigt – aber wahrscheinlich an falscher Stelle hochgeladen?

  • Habe es oben noch etwas erklärt, Du solltest die Punkte aber auch auf der Google Webfonts Helper Seite selbst lesen können.


    Danke für die Ausführungen.
    Nur noch mal für mich als Anfänger: kann ich den fonts-Ordner einfach verschieben auf dem Server – und soll er am Ende nur im Child Theme Ordner liegen – oder auch im Website-Ordner (wo die Fonts zur Zeit liegen)?

  • Cache aktiv? Was genau meinst Du damit.

    Wenn man komplizierte, aufwendige Sachen macht, ist ein Speichern des Ergebnisses sinnvoll. Dieses Abspeichern nennt man Cache.
    Damit beim nächsten Seitenaufruf nicht erneut die aufwendige Aufgabe ausgeführt werden muss, liefert der WebServer dann das Ergebnis aus dem Cache aus.

    Ein Cache *kann* muss aber nicht eine Seite beschleunigen.

    Fehlende Fonts kannst du unter Wasserfall[size=14] (Waterfall Chart[/SIZE]) sehen (roter Text) Da steht auch welche Datei wo fehlt
    https://gtmetrix.com/reports/plankundplank.de/jNOPaqda/

    Mit offenen Augen träumen

  • ..soll er am Ende nur im Child Theme Ordner liegen ..


    Der Order ist nur im Child Theme nötig, dazu noch die Pfadanpassungen in [FONT=Courier New]style.css[/FONT] sonst wird weiter an der falschen Stelle gesucht, siehe oben:

    ... Upload des [FONT=Courier New]fonts[/FONT] Ordners in das Child Theme.

    Und passe in [FONT=Courier New]style.css[/FONT] den Pfad (das ist das "folder prefix" aus Punkt 3 im Google Webfonts Helper) von [FONT=Courier New]../fonts/[/FONT] in [FONT=Courier New]fonts/[/FONT] an.

  • Der Order ist nur im Child Theme nötig, dazu noch die Pfadanpassungen in [FONT=Courier New]style.css[/FONT] sonst wird weiter an der falschen Stelle gesucht, siehe oben:


    Ganz herzlichen Dank – hat wunderbar geklappt! Toll, dass man hier so viel Support bekommt. Ich wäre aufgeschmissen ohne! :)

  • Jetzt kannst Du die Dokumentation von Astra und Elementor oben in Antwort #2 lesen und in der Child Theme [FONT=Courier New]functions.php[/FONT] umsetzen und damit dann auf irgendwelche zusätzlichen Entfernungsplugins verzichten.

    Weiterhin sind noch Punkte aus einem andern Thread offen:

    .. Die Seite bindet derzeit ohne Zustimmung auch noch weitere externe Inhalte von vimeo.com, akamai.net, cloudflare.net usw. ein, technisch ist das alles die gleiche Problematik wie bei Google Webfonts.

  • Wie soll man denn nun mit Videos umgehen? Alle raten vom Hosten auf dem eigenen Server ab. Und für Vimeo hatte ich einen Content Blocker eingerichtet – scheint anscheinend nicht auszureichen?!

    Und was ist akamai.net und cloudflare.net – bzw. wie krieg ich die weg!!!

    2 Mal editiert, zuletzt von Olaf (3. September 2022 um 09:53)

  • Warum sollte man ein Video nicht selbst hosten? Dein Elementor Hintergrundvideo kann man problemlos auch als .mp4 in der lokalen WordPress Mediathek einbinden.

    Ein ggf. beabsichtigtes Blocken des aktuellen vimeo Hintergrundvideos funktioniert derzeit augenscheinlich nicht, akamai und cloudflare werden von vimeo genutzt/eingebunden.

  • Ahh, gut zu wissen! Danke für die vielen hilfreichen Hinweise!

    1.
    Zur Zeit ist das Hintergrundvideo noch eine .mov Datei mit 563 MB – das Laden in die Medien wird ja ab einer bestimmten Größe geblockt. Die anderen Videos sind auch .mov-Dateien in unterschiedlichen Dateigrößen – ich gehe mal davon aus, dass alle dann besser im .mp4 Format wären?

    2.
    Kannst Du ein Äquivalent zu tinypng empfeheln, um auch Videos ohne Qualitätsverlust zu verkleinern?

    3.
    Gibt es zum Laden größerer Videos ein geeignetes Plugin? Oder kann ich das auch direkt auf dem Server hochladen – und wenn ja, wo genau, bzw. gibt es dabei sonst noch etwas zu beachten? Anbei auch ein Screenshot von dem derzeitigen Upload-Verzeichnis.
    (Ordner 2022 > wobei Ordner Nr. 01-06 leere Verzeichnisse sind – im Ordner 2021 sind Ordner 11 + 12 leer?!)

Jetzt mitmachen!

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