Schriftarten lokal einbinden

desis4ume · January 30, 2021, 3:31pm

Hallo zusammen,
teste gerade den Shop 6.2 in einem eigenen wave Themeplate, die fonts sollen lokal im Child-Theme abgelegt bzw. geladen werden. Nicht so wie aktuell hier / /.

Wie gehe ich da vor, hat das schon jemand realisiert?
Danke d4u

indianer3c · January 30, 2021, 5:04pm

Du müsstest in Deinem Child Theme die styles.css den exteren Import von Google Fonts

github.com

OXID-eSales/wave-theme/blob/master/out/wave/src/css/styles.css#L1


      
          @import url("https://fonts.googleapis.com/css?family=Raleway:200,400,600,700");/* Scss Document
          Insert your custom values for the scss-variables here to overwrite the defaults.
          Look in the '_variables.scss' for the variable you want to assign a custom value.
          For example, assign the $brand-primary - color another color:
          
          $brand-primary:  #030333;
          *//**
           * This file is part of OXID eSales Wave theme.
           *
           * OXID eSales Wave theme is free software: you can redistribute it and/or modify
           * it under the terms of the GNU General Public License as published by

entfernen. Könntest zusätzlich noch prüfen ob irgendwo noch weitere externe Fonts eingebunden sind und diese auch entfernen.

Dann gehst auf Google Fonts Browse Fonts - Google Fonts und suchst nach Deiner bevorzugten Fonts und lädst diese herunter.
Deine heruntergeladenen Fonts Dateien speicherst in dem Font Verzeichnis von Deinem Child Wave Theme https://github.com/OXID-eSales/wave-theme/tree/master/out/wave/src/fonts
Dann musst noch sicherstellen, dass Du über die Deine Child Theme styles.css die gespeicherten Fonts referenzierst. Als Beispiel kannst Dich an https://github.com/OXID-eSales/wave-theme/blob/master/out/wave/src/css/styles.css#L108 orientieren.

windes · January 30, 2021, 6:25pm

Weil Wochenende ist hier noch ein Link zum Thema!
https://google-webfonts-helper.herokuapp.com/fonts

desis4ume · January 31, 2021, 11:44am

Hallo indianer & windes,
besten Dank fürs schnelle Feedback. Ok, für mich nicht so einfach und will nicht zu viele Fragen auf einmal stellen. Folgendes ist umzusetzen:
.lokale Fonts generell laden, nutzen will ich sie NUR für meine Artikelbeschreibungen. Drei Font-Familien, für alle Überschriften ‘Montserrat+Alternates’ und für Texte ‘Alegreya sans & Open sans’.
Ich lade die direkt von Google Fonts und kopier den Inhalt in src/fonts und verweise in der css so:
*/@font-face { font-family: Montserrat+Alternates; src: url(…/fonts//???) und hier ??? wird es schwierig, wie werden die Details definiert. Im /src/fonts liegen diese Schriften siehe Ausdruck.

Zweiter Punkt ist: Im style.css sind im weiteren Verlauf eine Menge weiterer Fonts definiert, wie sind diese fonts erreichbar ohne den externen Link? Alle lokal abzulegen?
Gruß d4m

vanilla_thunder · January 31, 2021, 12:50pm

Der einfachste und sicherste Trick ist:
Font ungeachtet des richtigen Pfades in der CSS einbauen und dann einfach die Seite mit eingeschalteten DevTools neuladen, dann solltest du im Netzwerk-Tab einen Request zum Laden des Fonts sehen. Ist die Datei wo anders, ist der Request fehlgeschlagen, aber du siehst aufjeden Fall wo die Datei bei dem gegebenen relativen Pfad liegen sollte.
Jetzt weißt du wie der relative Pfad aufgelöst wird und
kannst du entweder die Datei verschieben oder den Pfad anpassen.

system · January 31, 2022, 12:51pm

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.