Support » Themes » Google Font lokal hosten im Botiga Theme

  • Gelöst sperlstyle

    (@sperlstyle)


    Hallo beinander!
    Hoffentlich hab ich im ersten Schritt meinen Beitrag im richtigen Forum gepostet!
    In meinem Onlineshop würde ich gerne die Schriftart für die Überschriften ändern. Leider war ich bisher mit keinem Weg erfolgreich.

    Ich möchte Amatic SC für die Überschriften nutzen. Leider übernimmt es mir die Schrift nicht ins Frontend, wenn ich sie im Customizer einstelle.

    Dann habe ich versucht, es lokal zu hosten und in mein erstelltes Child-Theme zu laden, aber das funktioniert leider genauso wenig.
    Dabei bin ich nach der Anleitung hier vorgegangen: https://www.webtimiser.de/webfonts-lokal-in-wordpress/

    Ich versuche hier mal noch alle wichtige Fakten aufzuzählen und liefere euch hoffentlich alle Infos, die man dazu braucht.
    Mein Hosting läuft über IONOS.
    Ich habe FileZilla benutzt, um das Child-Theme zu erstellen und zu bearbeiten.

    Generell mache ich meine Sachen mit der aktuellen Version von Firefox auf einem Windows-PC, WordPress (Version 5.9), auch das Theme ist aktuell.

    Hoffentlich hat jemand eine Idee, wie ich mein Problem doch noch lösen kann. Ich bedanke mich schon mal im Voraus für eure Hilfe und investierte Zeit und hoffe, ich oute mich hier nicht als totaler Laie und Anfänger 😉

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 16 bis 30 (von insgesamt 36)
  • Bei dir ist so etwas aktiv:
    https://wordpress.org/plugins/developry-google-fonts/

    Deaktiviere es im Autoptimizer wieder, und mach es wie am Anfang:

    den Ordner Fonts im selben Ordner wie die style.css
    Und dann ohne /fonts/amatic und auch nicht ../fonts/amatic sondern fonts/amatic

    Entferne zudem alles was jetzt doppelt und dreifach ist, lösche auch mal den Cache vom Autoptimizer. Wenn du nicht angemeldet bist, lösch zusätzlich auch den Browser-Cache und schau dann in die Developer-Tools (rechter Mausklick) dann -> Quellcode.

    Wenn ich Cookies akzeptiere, werden die Fonts von Google geladen.
    Wenn ich Cookies verweigere, kommen die entweder durch

    https://sperlstyle.de/wp-content/themes/botiga-child/style.css
    oder
    https://sperlstyle.de/wp-content/uploads/botiga/custom-styles.css

    In beiden CSS-Dateien wird der Font Amatic SC verlinkt, wo die Font-Verzeichnisse liegen, kann ich nicht sehen, entweder dort ist dann ein Treffer dabei

    oder der Web Fonts Loader durch Autoptimize regelt dann das Laden irgendwie.

    Besser wäre auf jeden Fall die lokale Lösung, denn es is unnötig die Schrift von Google laden zu lassen, selbst wenn Besucher einwilligen.

    Du könntest noch ein
    font-display:block;
    oder
    font-display:swap;
    mit in den Code-Block (@font-face) aufnehmen, z. B. nach font-style:normal;

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    @la-geek Hilfe, wie kompliziert!
    Ich hab jetzt meine Ordner mit den fonts wieder gelöscht, die doppelt waren und den Code geändert wie du gesagt hast.
    Das Autoptimizer Plugin hab ich deaktiviert.

    Warum klappt das nicht, wenn man die Cookies akzeptiert? Kann ich das auch noch irgendwie ausschalten?

    EDIT: Bei mir ist die Schriftart jetzt wieder weg.

    • Diese Antwort wurde geändert vor 4 Monaten, 2 Wochen von sperlstyle.

    Das müsste irgendeine Einstellung in deinem Cookie-Banner sein.

    Du könntest noch ein
    font-display:block;
    oder
    font-display:swap;
    mit in den Code-Block (@font-face) aufnehmen, z. B. nach font-style:normal;

    Nochmal:

    der Code-Block @font-face (usw.) ist in 2 CSS-Dateien,

    https://sperlstyle.de/wp-content/themes/botiga-child/style.css
    oder
    https://sperlstyle.de/wp-content/uploads/botiga/custom-styles.css

    außerdem wird es immer im Cache gespeichert.

    Der Ordner fonts muss im selben Verzeichnis sein, wie die CSS-Datei.
    siehe

    Der Code-Block sollte nur in einer CSS-Datei sein und das am besten in der style.css des Child-Themes, so wird es bei Upates des Eltern-Themes nicht überschrieben.

    Wie kommt der Code-Block in die custom-style.css-Datei des Eltern-Themes Botiga?

    Nach jeder Änderung, Cache löschen.

    Das Springen der Schriftfamilie kannst du mit dem font-display (wie im vorherigen Post geschrieben, in den Griff bekommen.

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Das weiß ich beim besten Willen nicht, wie der in diese andere Datei kommt. Aber der Code-Block ist jetzt aus der zweiten Datei gelöscht.

    Im Real Cookie Banner (Free) Plugin hab ich noch einen Content Blocker zu Google Fonts gefunden. Das hab ich jetzt mal deaktiviert. War scho so voreingestellt glaub ich .

    Die Schrift wird auch wieder richtig angezeigt.
    Soll ich jetzt wieder Google Fonts mit Autoptimizer blockieren?

    • Diese Antwort wurde geändert vor 4 Monaten, 2 Wochen von sperlstyle.

    Ich kenne mich mit dem Autoptimizer nicht aus. Er war gerade ja auch aktiviert, richtig?
    Dennoch wurden die Schrift von Google geladen, wenn man Cookies akzeptiert hat.
    Das ist jetzt auch so.

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Ja, jetzt hab ichs grad wieder aktiviert und ausgewählt ,,Google Fonts entfernen“. Was wäre denn die Alternative zu diesem Plugin? Wie kann ich die Google Fonts sonst deaktivieren?

    Hast du die Schrift eventuell im Theme selbst ausgewählt?
    Siehe auch: https://docs.athemes.com/search?query=google+font

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Äääähm, ja… Sollte ich vielleicht besser nicht?! (Das war wahrscheinlich ziemlich doof von mir oder?)

    Nee doof sicher nicht 🙂

    Aber von dort wird dann vermutlich die Schrift vom Google Server geholt.
    Jetzt hast du es entfernt, vermute ich?
    Denn nun wird die Schrift wieder nicht angezeigt. Das ist erst mal gut so. Es wird auch nix mehr vom Google Server geladen.

    Jetzt musst du nur noch in die style.css (des Child-Themes) die Schrift zuweisen.

    h1,h2,h3,h4,h5,h6 {
    font-family: "Amatic SC",handwriting;
    }
    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Oh Gott, jetzt hab ich was kaputt gemacht:
    https://sperlstyle.de/fehler

    Den Code hab ich in die CSS eingefügt. Der Fehler war schon vorher da.

    • Diese Antwort wurde geändert vor 4 Monaten, 2 Wochen von sperlstyle.
    • Diese Antwort wurde geändert vor 4 Monaten, 2 Wochen von sperlstyle.

    Welche Dateien hast du bearbeitet? Speicher die Dateien immer als UTF-8 ohne Bom ab. Öffne also alle Dateien, die du angefasst hast, noch mal und speichere sie so.

    Siehe hier:
    https://software-lupe.de/tipp/utf-8-ohne-bom-mit-notepad/

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Die php-Dateien hats mir immer mit dem Notepad geöffnet, die css nur mit Texteditor oder so… Ich hab das bisher mit dem Windows-Notepad gemacht. Hab nicht gewusst, dass das was anderes ist. Ich hol mir schnell das richtige Programm und öffne die Dateien nochmal.

Ansicht von 15 Antworten - 16 bis 30 (von insgesamt 36)