Frage zu google Fonts

Thema wurde von DKG - Die Kleine Geschenkidee (Peter), 16. August 2023 erstellt.

  1. DKG - Die Kleine Geschenkidee (Peter)

    Registriert seit:
    2. Oktober 2017
    Beiträge:
    323
    Danke erhalten:
    164
    Danke vergeben:
    107
    Hallo,

    ich habe eine Frage zu google Fonts.
    Wie ich im Forum schon nachlesen konnte,
    werden google Fonts heruntergeladen und lokal verwendet,
    so dass man keine Sorgen bezgl. Datenschutz hat.

    Ist ja schon einmal eine prima Sache.

    Allerdings ist mir etwas aufgefallen.
    Ich verwende in unserem Shop die Schriftart Baloo 2.
    Allerdings wird von dieser Schriftart nur die .ttf Datei in den public/fonts Ordner heruntergeladen,
    nicht aber die eigentlich notwendigen 4 x .woff2 Dateien.

    Zudem werden nur google Fonts Urls akzeptiert (sieht man nur im Quelltext),
    eigene Links werden nicht unterstützt.

    Fakt ist, die Schriftart wird nicht angezeigt, es wird immer die Fallback-Lösung (swap)
    angezeigt.

    Bitte um Lösung / Unterstützung, danke.

    Gruß
    Peter
     
  2. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.170
    Danke erhalten:
    1.043
    Danke vergeben:
    365
    Hallo Peter,

    keine Ahnung, ob's Best Practice ist, aber Du kannst die woff2-Dateien herunterladen (ich mag dieses Tool: https://gwfh.mranftl.com/fonts/baloo-2?subsets=latin) und ins font-Verzeichnis Deines Themes packen. Ich habe es eben getestet mit themes/Malibu/fonts/baloo-2-v16-latin/. Nach Leeren der Caches (bzw. Neuaufbau) liegen die Dateien dann in public/theme/fonts/, also z.B. public/theme/fonts/baloo-2-v16-latin/baloo-2-v16-latin-regular.woff2 etc.

    Dorthin könnten dann die @font-face Referenzen lauten, z.B. im eigenen CSS.
     
  3. DKG - Die Kleine Geschenkidee (Peter)

    Registriert seit:
    2. Oktober 2017
    Beiträge:
    323
    Danke erhalten:
    164
    Danke vergeben:
    107
    Hi Dominik,

    hab es nun letztendlich hinbekommen,
    allerdings ein wenig anders als Du.
    Hab alle 4 originalen woff2 Dateien von google in public/fonts/baloo-2/ hochgeladen,
    dann im public/fonts Ordner eine CSS Datei erstellt baloo-2.css

    Diese hab ich mit dem Original CSS von google befüllt und die Verlinkungen geändert:
    Code:
    /* devanagari */
    @font-face {
      font-family: 'Baloo 2';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://diekleinegeschenkidee.de/public/fonts/baloo-2/wXK0E3kTposypRydzVT08TS3JnAmtdgazZpp_led7Q.woff2) format('woff2');
      unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
    }
    /* vietnamese */
    @font-face {
      font-family: 'Baloo 2';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://diekleinegeschenkidee.de/public/fonts/baloo-2/wXK0E3kTposypRydzVT08TS3JnAmtdgazZpn_led7Q.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Baloo 2';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://diekleinegeschenkidee.de/public/fonts/baloo-2/wXK0E3kTposypRydzVT08TS3JnAmtdgazZpm_led7Q.woff2) format('woff2');
      unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Baloo 2';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://diekleinegeschenkidee.de/public/fonts/baloo-2/wXK0E3kTposypRydzVT08TS3JnAmtdgazZpo_lc.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    Dann im eigenen CSS noch:
    Code:
    @import url('https://diekleinegeschenkidee.de/public/fonts/baloo-2.css');
    
    body, html {
      font-family: 'Baloo 2', cursive !important;
      }
    ...und dann lief es.

    LG
    Peter
     
  4. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.170
    Danke erhalten:
    1.043
    Danke vergeben:
    365
    Hi Peter,

    wenn's funktioniert, ist's gut :)

    Da bin ich mir halt nicht sicher, ob's dauerhaft läuft. Denn die Sachen im public-Verzeichnis werden ja i.d.R. mit Leeren des Caches für die Seitenausgabe gelöscht. Deshalb hätte ich gemeint, musst Du die CSS-Datei und die Font-Dateien in andere Verzeichnis (themes oder GXModules) laden, damit sie nach Leeren des Caches für die Seitenausgabe wieder im public-Verzeichnis landen.
     
  5. DKG - Die Kleine Geschenkidee (Peter)

    Registriert seit:
    2. Oktober 2017
    Beiträge:
    323
    Danke erhalten:
    164
    Danke vergeben:
    107
    danke für den Hinweis.
    kaum das ich wieder in den Ordner schaue, war schon die .css Datei weg :rolleyes:

    Ich hab es so gelöst:
    Im Root Verzeichnis des Shops einen neuen Ordner angelegt "fontbase",
    die Dateien dorthin verfrachtet und entsprechend alles verlinkt - läuft.
     
  6. DKG - Die Kleine Geschenkidee (Peter)

    Registriert seit:
    2. Oktober 2017
    Beiträge:
    323
    Danke erhalten:
    164
    Danke vergeben:
    107
    Abschließend nochmal an gambio:
    Wenn man im StyleEdit den Link zur Google Font eingibt,
    läuft es ja nicht wie es soll - daher betrachtet das bitte als Bug Meldung, danke.
    @Wilken (Gambio) @Till (Gambio)