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 - 1 bis 15 (von insgesamt 36)
  • Ich möchte Amatic SC für die Überschriften nutzen.

    Welche Überschriften meinst du?

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Bei Typography als Heading

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Ich ergänze mal noch den CSS-Code, den ich in meine style.css hochgeladen hab:

    /* amatic-sc-regular - latin */
    @font-face {
      font-family: 'Amatic SC';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/amatic-sc-v22-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/amatic-sc-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/amatic-sc-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/amatic-sc-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/amatic-sc-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/amatic-sc-v22-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
    }

    Einen Screenshot von meinem Filezilla mit Child-Theme Ordner hab ich hier:

    Stimmt das soweit mit den Angaben im CSS?

    url(‚../ ist falsch
    url(‚./ wäre richtiger 🙂

    Zumindest wenn die font Dateien im Ordner fonts in deinem child theme liegen 🙂

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Danke, @michi91. Aber das ändert leider immer noch nix, wenn ich immer nur einen Punkt setze…

    • Diese Antwort wurde geändert vor 4 Monaten, 3 Wochen von sperlstyle.
    Moderator espiat

    (@espiat)

    deine fonts befinden sich im Unterordner der css.

    Also:

    src: url('/fonts/amatic-sc-v22-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('/fonts/amatic-sc-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('/fonts/amatic-sc-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('/fonts/amatic-sc-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('/fonts/amatic-sc-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('/fonts/amatic-sc-v22-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
    }
    Thread-Ersteller sperlstyle

    (@sperlstyle)

    @espiat Danke, das hab ich jetzt auch gleich ausprobiert, aber es geht immer noch nicht.

    Kann es sein, dass irgendwas die Darstellung der Google Fonts blockiert?
    Oder warum wird die Schriftart nicht im Frontend angezeigt, wenn ich sie ganz einfach über den Customizer auswähle? In der Vorschau wird es richtig dargestellt, aber auf keinem der Endgeräte, die ich ausprobiere…

    Hallo,
    auf deiner Seite gibt es einige Fehler (404) im Zusammenhang mit den Schriften, die du siehst, wenn du in die developer console schaust (bei Chrome mit der Taste F12).
    Schau mal bitte in den folgenden Beitrag, da wird das Thema ausführlich behandelt.
    Viele Grüße
    Hans-Gerd

    Moderator espiat

    (@espiat)

    Mir fällt gerade auf, dass der local Parameter keinen Wert besitzt.

    https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src

    Hallo zusammen,

    relativer Pfad ohne Slash /
    ist die richtige Variante.

    Nicht /fonts/amatic
    sondern fonts/amatic

    Mit Slash wird vom Chrome-Browser sogar noch akzeptiert und er zeigt die Schrift dennoch an, aber in Mozilla und IE (ja alt, ich weiß) ist die Schriftfamilie nicht korrekt verlinkt.

    Komplett verkehrt ist ../fonts/amatic

    Siehe:
    https://webdesign-welt.de/demo/index.html
    https://webdesign-welt.de/demo/mitslash.html

    @michi91
    Wie kommst du auf nur einen Punkt bzw. Komma + Punkt?

    @sperlstyle

    Das direkt von Google einbinden, so wie du es momentan (als Lösung?) gemacht hast, ist übrigens eine denkbar schlechte Idee.

    Da solltest du lieber die Lösung aus meinem vorherigen Post einsetzen.

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    Was für ein Krimi! Ich bin ja bloß froh, dass ich so was nicht hauptberuflich mach, so wie mein Blutdruck hier in die Höhe schießt und mir im nächsten Moment das Herz wieder in die Hose rutscht.

    Ich danke euch allen ganz herzlich für eure Tipps und eure Hilfe!!!

    Ich glaub, jetzt hab ichs geschafft.

    Zuerst konnte ich gar nix mit den Fehlercodes von @hage anfangen, aber am Ende haben sie mir gezeigt, wo ich meine Dateien hinspeichern muss. In dem von dir verlinkten Artikel war es richtig beschrieben, dankeschön dafür!

    @espiat Das war wohl tatsächlich das Problem, dass die Dateien in einem anderen Ordner lagen als im Code angegeben..

    @la-geek In meinem CSS ist jetzt trotzdem '../fonts/amatic. Ich hoffe, das ist einfach nur eine etwas unprofessionellere Lösung als die mit relativem Pfad ohne Slash und nicht relevant für die datenschutzrechtliche Seite?!

    Irgendwie würds bestimmt noch ,,sauberer“ gehen, aber hauptsache es funktioniert jetzt so. Bei mir ist der Ordner mit den Font-Dateien jetzt noch auf verschiedenen Ebenen: einmal im WordPress-Grundordner sozusagen, einmal im Ordner, wo die Theme-Ordner liegen und einmal im Ordner des Child-Themes. Wenn ich sie an einer Stelle rauslösche, geht es wieder irgendwo nicht. Lustig, das ganze für jemand ,,Außenstehenden“ wie mich 😉

    Ich mach mir jetzt ein Bier auf und trink auf euch, dank eurer Hilfe kann ich heute Nacht wieder ruhig schlafen. Tausend Dank nochmal!

    relevant für die datenschutzrechtliche Seite?!

    Nein, du hast immer noch die Fonts von Google verlinkt:

    <link rel=“preconnect“ consent-by=“cookies“ consent-id=“592″ href=“//fonts.googleapis.com“ consent-transaction-complete=“1″>

    <link rel=“preconnect“ consent-original-href-_=“//fonts.googleapis.com“ consent-required=“591″ consent-by=“cookies“ consent-id=“592″><link rel=“preconnect“ crossorigin consent-original-href-_=“https://fonts.gstatic.com&#8220; consent-required=“591″ consent-by=“cookies“ consent-id=“592″>

    <link rel=“preconnect“ crossorigin=““ consent-by=“cookies“ consent-id=“592″ href=“https://fonts.gstatic.com&#8220; consent-transaction-complete=“1″>

    <link rel=“stylesheet“ id=“botiga-google-fonts-css“ media=“all“ consent-original-href-_=“//fonts.googleapis.com/css?family=System+default%3Aregular%7CAmatic+SC%3Aregular&subset=latin&display=swap&ver=1.1.0″ consent-required=“591″ consent-by=“cookies“ consent-id=“592″/>

    Lies dazu mal das Urteil, das ich bereits oben verlinkt hatte:
    https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/

    In meinem CSS ist jetzt trotzdem ../fonts/amatic.

    Deswegen klappt es nicht, sondern weil die Schrift von der Google-Website übertragen wird.

    Thread-Ersteller sperlstyle

    (@sperlstyle)

    @la-geek Ich hätte es so verstanden, dass ich die Google Fonts schon benutzen darf, aber eben nicht über den Google-Server abrufen darf. Daher hab ich wie in der Anleitung unter @hage s Link erklärt, die Verwendung von Google-Webfonts durch das Autoptimizer-Plugin deaktiviert.

    Wenn ich das hier checke, zeigt es mir auch keinen Abruf über den Google Server an:

    bild

    Mist, warum krieg ich jetzt das Bild hier nicht mehr eingefügt?! Oben hats doch auch geklappt…

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

    (@sperlstyle)

    @la-geek Das ist ja doof, ich hab mich schon so gefreut.

    Ja, die Urteile hab ich mir scho angeschaut. Ziemlich beängstigend. Deswegen möchte ichs ja auch richtig machen.
    Wo kann ich das denn kontrollieren, ob ich die Google-Webfonts verlinkt hab oder ,,meine“ hochgeladenen?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 36)