1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von Ridonda, 29. August 2022.

  1. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    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?
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    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.
    Dieser Code ist offensichtlich unvollständig.

    Link zur Seite? Siehe auch Forenregeln, Punkt II.
     
  3. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
  4. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    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.
     
  5. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    hier ist es flüssig und hängt nicht.

    win 11 firefox aktuelle version
     
  6. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    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.
     
  7. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    Cache aktiv? Was genau meinst Du damit. Zum Cache löschen im Backend benutze ich Autoptimize – meinst Du das?
     
  8. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    Ich hoffe die Screenshots helfen weiter!
     

    Anhänge:

  9. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Die Font Dateien, auf die in style.css 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 fonts Ordners in das Child Theme.

    Und passe in style.css den Pfad (das ist das "folder prefix" aus Punkt 3 im Google Webfonts Helper) von ../fonts/ in fonts/ an.
     
    #9 b3317133, 29. August 2022
    Zuletzt bearbeitet: 29. August 2022
  10. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    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?
     
  11. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    >>> Punkt 4 hatte ich erledigt – aber wahrscheinlich an falscher Stelle hochgeladen?
     
  12. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Habe es oben noch etwas erklärt, Du solltest die Punkte aber auch auf der Google Webfonts Helper Seite selbst lesen können.
     
  13. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    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)?
     

    Anhänge:

  14. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.317
    Zustimmungen:
    582
    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 (Waterfall Chart) sehen (roter Text) Da steht auch welche Datei wo fehlt
    https://gtmetrix.com/reports/plankundplank.de/jNOPaqda/
     
  15. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Der Order ist nur im Child Theme nötig, dazu noch die Pfadanpassungen in style.css sonst wird weiter an der falschen Stelle gesucht, siehe oben:
     
    Ridonda gefällt das.
  16. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    Ganz herzlichen Dank – hat wunderbar geklappt! Toll, dass man hier so viel Support bekommt. Ich wäre aufgeschmissen ohne! :)
     
  17. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Jetzt kannst Du die Dokumentation von Astra und Elementor oben in Antwort #2 lesen und in der Child Theme functions.php umsetzen und damit dann auf irgendwelche zusätzlichen Entfernungsplugins verzichten.

    Weiterhin sind noch Punkte aus einem andern Thread offen:
     
    Ridonda gefällt das.
  18. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    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!!!
     
    #18 Ridonda, 29. August 2022
    Zuletzt von einem Moderator bearbeitet: 3. September 2022
  19. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    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.
     
  20. Ridonda

    Ridonda Active Member

    Registriert seit:
    6. Oktober 2021
    Beiträge:
    37
    Zustimmungen:
    3
    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?!)
     

    Anhänge:

    #20 Ridonda, 30. August 2022
    Zuletzt von einem Moderator bearbeitet: 3. September 2022
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden