...
Beachte auch hier, dass Du die neuen Schriftarten erst im Frontend siehst, wenn die Preview-Styledatei und/oder die Styledatei aktualisiert wurde.
Google-Webfonts lokal ablegen
Wenn Du nicht willst, dass die Webfonts "remote" von den Google-Servern eingebunden werden, kannst du wie folgt vorgehen.
Achtung - diese Schritte erfordern Plugin-Version 1.4.0 oder höher!
Automatische Einbindung deaktivieren
- Im Schriftarten-Bereich den Schalter für "Automatische Webfonts-Einbindung (Remote)" ausschalten.
- Bereichseinstellungen speichern.
- "Style-Datei aktualisieren" ausführen. (Hintergrund: die Remote-URLs werden im ET360v1 per CSS-Styles importiert. Daher ist eine Re-Kompilierung der Style-Dateien notwendig. Sonst greift die Änderung der Einstellung "Automatische Webfonts-Einbindung (Remote)" nicht.)
→ Dein Shop nutzt nun keine Remote-Webfonts mehr und im Frontend sollten nur Standard-Schriftarten des Browser zu sehen sein. Damit du trotzdem Google-Fonts im Frontend anzeigen kannst, musst du die nachfolgenden Schritte ausführen.
Manuelle Einbindung von lokalem Server einrichten
Hierzu nutzt du am besten das Tool Google Webfonts Helper, welches du unter folgender URL erreichst: https://google-webfonts-helper.herokuapp.com/
Dieses Tool erzeugt automatisch die benötigten Schriftarten-Dateien und CSS-Anweisungen.
Für jede Schriftart, die du einbinden willst, musst du folgende Schritte ausführen:
- Rufe den Google Webfonts Helper auf → https://google-webfonts-helper.herokuapp.com/
- 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 4 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> - Speichere die Einstellungen ab.
→ Dein Shop sollte jetzt die Schriftarten lokal vom Server laden und sie sollten im Frontend sichtbar sein.
| Info | ||
|---|---|---|
| ||
Falls die manuell eingebundenen Schriftarten nicht im Frontend sichtbar sein sollten, stelle vor allem sicher, dass die manuell eingebundenen Schriftarten den Einstellungen im Plugin-Backend im Bereich "Schriftarten" entsprechen. (Das CSS muss schließlich auch auf die richtigen Schriftarten-Namen verweisen.) Stelle außerdem bitte sicher, dass du den Eintrag im <head> für jede Sprache im Shop gesetzt hast! |
| Info | ||
|---|---|---|
| ||
Wenn du die Schriftarten lokal einbindest, kann es sein, dass du auch die entsprechende Lizenz der Schriftart erwerben musst oder einen Hinweistext zur Lizenz einbinden musst. Genaue Informationen dazu findest du im Google Webfonts Helper. |