Neu Schriftarten dem JTL Webshop hinzufügen und als Standard setzen.

[mahmut.mavili@msd-steelde]

Hallo zusammen,

kann mir vieleicht bei dem oben genannten Theme weiterhelfen. Ich möchte eine neue Schriftart hinzufügen und diese als Standard setzen. In der suche konnte ich allerdings noch nichts finden.

Vielen Dank schonmal!

 

[ARA-Marketing]

Naja.... es gibt mehrere Möglichkeiten... die Schrift wird über den "body" implementiert....
Such dir z.B. bei Google einen Font aus, kopiere dort den gewünschten CSS-Code
und trage diesen in deine custom.css im child-Template ein.


Das heißt dann in der custom.css z.B. so:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
body {font-family: 'Noto Sans JP','Open Sans', sans-serif;}

Es gibt aber im Template oft einige Stellen, wo die Schriftart noch extra definiert ist, deshalb sollte
man die Standard-Schriften unbedingt in der css auch mitnehmen, sonst gibts hier Fehler.

VG
Eas

 

[mahmut.mavili@msd-steelde]

Vielen Dank für ihre Antwort.

Könnte sie das vielleicht konkreter beschreiben?
Als Font habe ich mir RussoOne-Regular ausgesucht.

Wo finde ich die "Custom.css" Datei?

Vielen Dank schonmal!

 

[ARA-Marketing]

Die custom.css ist in deinem Child-Template, das du anlegen solltest und dort die Änderungen einzutragen

.... wenn dir das nix sagt, dann bitte hier -> https://docs.jtl-shop.de/de/stable/shop_templates/eigenes_template.html#
nachlesen oder machen lassen....

VG
Eas

 

[bigyellowbird]

Die Frage ist ja schon etwas älter, aber da das einer der ersten Google-Treffer ist, erlaube ich mir mal eine Ergänzung.
In 2025 sollten wir keine Google-Fonts mehr auf diese Art einbinden.
Es ist besser (und erlaubt), die Google-Fonts auf dem eigenen Server abzulegen.

Lege im Template/Themes Ordner einen Unterordner "fonts" an:
/templates/Meintemplate/themes/meintheme/fonts

Lege dort die Font-Datei(en) ab, z.B.
/templates/Meintemplate/themes/meintheme/fonts/russo-one-v18-latin-regular.woff2

In Deiner custom.css:

/* Font bereit stellen */
@font-face {
  font-display: swap;
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/russo-one-v18-latin-regular.woff2') format('woff2');
}

/* Font verwenden - nach Bedarf anpassen */
h1,h2 {
  font-family: 'Russo One'; 
}

Du kannst die Fonts direkt von Google-Fonts herunterladen, dann sind die Dateinamen aber oft unübersichtlich.
Bequemer nutzbar sind die Download-Links von https://gwfh.mranftl.com/fonts/
Dort wird auch der o.g. @font-CSS Teil fertig angezeigt.
Achtung. Dort wird ../fonts/.... (zwei Punkte vorne) angegeben - für den oben angelegten Ordner ist ./fonts/.... (ein Punkt vorne) richtig.

Bzgl. "swap" siehe https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display