Google Fonts Lokal einbinden

Shopware 5 Programmierung
, , , , , ,
1

Guten Morgen,
ich versuche die Google-Fonts auf unserer Seite lokal einzubinden doch scheitere leider immer wieder.
Ich habe mir einige Leitfäden im Netzt angesehen, demnach habe ich auch die Schritte bearbeitet, doch es klappt leider dennoch nicht, hat gerade wer zufällig Zeit und kann es mir erklären ?

Bei der einbindung habe ich 3 verschiedene Methoden versucht (@import usw.) glaube da liegt der Fehler

2

Keine Ahnung was du genau versuchst hast, aber im Prinzip geht es so:

Nur ein Beispiel für Weight 400 (normal)!

@font-face {
  font-family: "kama";
  font-style: normal;
  font-weight: 400;
  src: url("/...Pfad_zum_Fontfile.../kama-v16-latin-regular.ttf") format("truetype");
}
2 „Gefällt mir“
3

Also erstmal vielen Dank vorab für die Hilfe @R4M. :blush:
Einen unterscheid zu deinem Code sehe ich, du hast format („truetype“) ich hingegeben format(‚svg‘); liegts daran?
Ich hab den Code hier raus kopiert:

grafik
grafik1005×342 9.27 KB

Also ich habe den Code im Header eingefügt:

/* karma-regular - latin /
@font-face {
font-family: ‚Karma‘;
font-style: normal;
font-weight: 400;
src: url(‚…/fonts/karma-v16-latin-regular.eot‘); / IE9 Compat Modes /
src: local(‚‘),
url(‚…/fonts/karma-v16-latin-regular.eot?#iefix‘) format(‚embedded-opentype‘), / IE6-IE8 /
url(‚…/fonts/karma-v16-latin-regular.woff2‘) format(‚woff2‘), / Super Modern Browsers /
url(‚…/fonts/karma-v16-latin-regular.woff‘) format(‚woff‘), / Modern Browsers /
url(‚…/fonts/karma-v16-latin-regular.ttf‘) format(‚truetype‘), / Safari, Android, iOS /
url(‚…/fonts/karma-v16-latin-regular.svg#Karma‘) format(‚svg‘); / Legacy iOS */
}

Der Pfad zum Fontfile ist auch korrekt, wenn ich mich nicht irre, du siehst ja meine Ordnerstruktur :sweat_smile: :sweat_smile:

Oder was mir noch einfällt ist, dass ich den ganzen Pfad kopieren muss, aber das war in den Videos meist nicht der Fall, also sprich: /Themes/Frontend/Mein_Theme/frontend/_Puplic/src/fonts

4

Ja logisch, weil ich im Beispiel ein *ttf Format, also TrueType, verwendet habe. Die Angabe „format“ bezieht sich auf die jeweilige Angabe von „url“.

1 „Gefällt mir“
5

Kannst du mir bitte einmal sagen, wo der Fehler bei meinem Format und meiner URL liegt, sodass ich die einbindung nicht hinbekomme?
Habe so ziemlich alles nach dem Leitfaden von verschiedenen Seiten gemacht

6

Guten Morgen @R4M,
Ich habe mal deinen Code, den du oben reingeschrieben hast verwendet klappt trotzdem nicht, was mache ich bloß falsch?
Hab den Code in die Header.topl eingefügt
grafik

7

Ich muss dazu sagen, dass die Schriftart, sowie Open Sans beide via Link per backend eingebunden wurden, aber selbst wenn ich den Link lösche, deinen oder meinen Code nutze ist die Schriftart nicht die gleiche.
Falls du nicht weißt was ich meine:

grafik
grafik1023×476 33.5 KB

8

Das ist CSS und gehört auch in die jeweilige CSS-Datei von deinem Theme. Nicht einfach in die TPL-Datei packen, so geht das nicht. Da wird es ja in deinem Theme irgendwo noch eine CSS-Datei geben.

1 „Gefällt mir“
9

Hab mal eine Textstelle untersucht, bin dann in die navigation.less gegagen und habe dann den Code eingefügt, die CSS im Backend habe ich zuvor entfernt.

grafik
grafik875×171 5.97 KB

grafik
grafik945×363 8.36 KB

Entschuldige, wenn meine Frage doch aufwendiger zu beantworten ist, als du gedacht hast, aber kenne mich mit der Programmierung leider nicht wirklich aus

10

oder gibt es eine andere CSS wonach ich ausschau halten könnte?

11

In der ALL.less ist meist die Schriftart miteingebunden habe ich gelesen aber in meiner all.less datei ist gefühlt nichts drin:

grafik
grafik710×489 17.1 KB

12

@R4M, diesen Ordner habe ich ebenfalls, aber den hatte ich angelegt, als ich verscuht habe die Schriftarten Lokal einzubinden
grafik

13

Nun, ich kenne deine CSS-Dateien nicht und sehe auch nicht wie diese bei dir angelegt wurden. Versuche es doch in die „all.less“ zu packen. Danach natürlich Cache leeren und das Theme neu kompilieren nicht vergessen.

Aber! GGf.muss der Pfad zur Font neu angepasst werden!!!

1 „Gefällt mir“
14

Ich habs soweit denke ich geschafft muss nur noch eine Schriftart ändern, aber die finde ich nicht bzw die ersetzt sich auch nicht automatisch, weißt du evtl wo die sein könnte?

grafik
grafik734×554 26.9 KB

15

@R4M? :confused: Ich habe bereits in der Header.tpl sowie in der less-Datei geschaut und einige potentielle less-Dateien durchsucht

16

@Gok
Du verwendest laut deinem Code reCaptcha, Google-Maps oder Youtube im Template? Dann wird das alles von Google nachgeladen. Das erkennt man auch an dem „unicode-range“.

Bei uns war es ein eingebettetes Video. Wir haben es dann nativ mit einem Script eingebunden um das umgehen zu können.

Fall noch nicht geschehen hilft diese Info ggf. noch :upside_down_face:

1 „Gefällt mir“
17

Ich danke dir, jedoch hab ichs geschafft mit ein wenig Hilfe.