...
Hierzu nutzt du am besten das Tool Google Webfonts Helper, welches du unter folgender URL erreichst: https://google-webfonts-helper.herokuappgwfh.mranftl.com/fonts
Dieses Tool erzeugt automatisch die benötigten Schriftarten-Dateien und CSS-Anweisungen.
...
- Rufe den Google Webfonts Helper auf → https://google-webfonts-helper.herokuappgwfh.mranftl.com/fonts
- Suche die Schriftart im Google Webfonts Helper und klicke sie an.
- Wähle, falls vorhanden, die Charsets "latin" und "latin-ext" aus.
- Wähle alle verfügbaren Styles aus.
- Ändere den "Folder-Prefix" auf /fonts/ (Wichtig: führendes / und ohne führende Punkte; wenn du die Font-Dateien woanders ablegen willst, kannst du den Pfad hier entsprechend anpassen)
- Lade die ZIP-Datei über den Button unten herunter.
- Entpacke die ZIP-Datei.
- Lade die dort enthaltenen Dateien ohne sie umzubenennen in deinen Shop hoch in den Ordner fonts/ (der Ordner existiert vermutlich noch nicht - lege ihn einfach an, alternativ kannst du die Dateien auch irgendwo hin hochladen und musst dann aber den Pfad entsprechend in Schritt 5 anpassen)
- Kopiere das vom Google Webfonts Helper angezeigte CSS.
- Gehe im ET360v1-Backend in den Bereich Global und füge bei "Eigener <head>-Content" das CSS in einem Style-Tag ein.
Beispiel: <style> ... kopiertes CSS ... </style>Hinweis: Für eine optimale Einbindung solltest du in jedem @font-face Block die Anweisung font-display: swap; manuell hinzufügen, falls der Webfont-Helper diese nicht selbst erzeugt hat.
- Speichere die Einstellungen ab.
...