Neu Fonts, Fonts und Fonts: ttf, woff, woff2 und Co. less, css hu?

[holzpuppe]

Moin,

Ich bin gerade dabei meine Fonts für den Shop anzupassen und (ver-)zweifele ein wenig an der Handhabung.
Bis jetzt hab ich die Fonts via Link von Googlefonts geladen, also über die "header.tpl".
Und ich möchte das Ganze nun doch lieber vom Server laden lassen, oder lokal, falls der Besucher diese Fonts installiert haben sollte. (Riesiger Aufwand, da für jede "dicke" des Fonts eine separate Datei besteht.)

Ich hab hier mehrfach gelesen, dass die Fonts in die variable.less eingebunden werden sollen. (Also mit dem Theme-Editor arbeiten. Was ich bis heute noch nie nicht gemacht habe.)
Die variable.less habe ich mir angeschaut und, ok, es sieht nicht anders aus als in einer css und die Fonts werden auch nicht anders angesprochen.
1.Nur was ich gar nicht finden konnte: die "src". Wo wird den der Pfad zu den Fonts definiert?
2.Muss ich die Fonts selbst durch einen Fontsgenerator laufen lassen um eot, woff, woff2 und co haben zu wollen, oder wird es vom Shop selbst generiert?
3.Kann ich die Fonts im Zweifel auch über die template.xml einbinden? (Ich denke fast nicht.)
4.Welchen Vorteil habe ich wenn ich die Schriften in der "variable.less" einbinde, statt in meiner *.css?

Zusatzfrage: Gibt es eigentlich ne simple Lösung, ala: Da ist der Font-Ordner such selber!?

Danke schön.

 

[M.Stickel]

Hi Holzpuppe,
die Schrift wird in der "variables.less" definiert, aber importiert wird sie in der "theme.less". Du kannst dir das beispielsweise in der "templates\Evo\themes\evo\less\theme.less" anschauen.
Die Schrift liegt im Ordner "fonts" des Templates und wird von dort geladen (die Variable "icon-font-path" ist hier sicher etwas verwirrend).

Die Fonts werden von uns im Format .ttf eingebunden und liegen auch in diesem Format im genannten Ordner. Wenn du das auch so machen möchtest musst du selbst dafür sorgen, dass das Format stimmt. Der Shop übernimmt das nicht.

 

[holzpuppe]

Hallo und danke für die Info.
Ich hab es mir mal angeschaut und etwas ausprobiert. In der theme.less konnte ich nur "*.ttf" sehen. Also werden keine "woffs" bereitgestellt?

Der JTL-Guide für die eigene Theme-Erstellung hat mich eher verwirrt und verunsichert. Vielleicht ist es aber auch nicht mehr ganz "up to date".

Als Beispiel:
Das "backgroundimage.jpg liegt in im Ordner "img" des "Themplates/meintemplate/theme/img/Background.jpg" und wird auch in der Beispiel-XML verknüpft.
Wenn ich mich aber nicht irre, dann ist per Default Einstellung des Shops, auch bei einem eigenen Template, das backgroundimage.jpg einfach nur im "Themplates/meintemplate/theme/Background.jpg" Verzeichnis.
Und wird im Backend des Shops/Template als Auswahl angeboten.

Hier stell ich mir die Frage, welchen "Mehr-Nutzen" das für mich bzw. für den Shop darstellt.

Ein anderes Beispiel:
In der "Templates/meintemplate/css/ blabla.css" und in "Templates/meintemplate/theme/meintheme/ gibtesnochne.css"

Soweit erstmal klar, die "blabla.css" im CSS-Ordner ist die "CSS" mit der ich, falls ich unterschiedliche CSS erstellt habe, schnell mal das Aussehen des Shops ändern kann. Oder wenn ich faul bin, die CSS für das permanente Aussehen verwende und alles vom Standardaussehen anders sein soll.
Nun, die andere CSS im "meintheme"-Ordner, welchen Zweck hat diese? (Meine Vermutung: Das wäre die "Grundeinstellungs.css"? Also da stehen all die Sachen drin auf die die Shopgestaltung überhaupt aufbaut?)

Diese 2 Beispiele und das Folgende haben mich dazu bewegt es lieber wieder aus meinem Template zu entfernen und meine Schriften erstmal wieder über die XML via Schriften.css zu laden. (Keine Ahnung ob das gut ist, elegant ist es sicherlich nicht.)

Es wäre schön, wenn irgendwie ersichtlich werden würde, welche Dateien man aus dem "EVO" oder "Base" in sein eigenes Template mindestens kopieren muss, um mit den "*.less" arbeiten zu können.
(Ich hab im Backend mit dem Less-Plugin nach der 3. Fehlermeldung, dass irgendeine Datei fehlt kapituliert und alles kopiert was ging. xD)
Und da war dann der Punkt wo ich mir Gedanken über zukünftige Shopupdates gemacht habe. Leider fehlt im Guide die Info, oder ich hab es nicht gesehen, wie es mit der Veränderung der EVO-BASE etc *.less und *.css Dateien aussieht.
Bin ich bei einem Shopupdate gezwungen, wie bei den *.tpl-Dateien, die *.less und co in meinem Theme-Ordner genauso abzugleichen?

Was mir noch einfällt: Es steht im Guide, dass eine *.less nicht in die XML eingetragen werden muss. Heißt das, dass generell keine *.less in XML verknüpft werden darf, oder dass man das nicht braucht? Wie sieht es mit selbst erstellten *.less aus?

Hach, Fragen über Fragen. Sorry

Gruß

 

[FMoche]

In der "Templates/meintemplate/css/ blabla.css" und in "Templates/meintemplate/theme/meintheme/ gibtesnochne.css"

Das ist nicht das Standard-Verhalten des EVO. Es gibt keinen Ordner templates/<TemplateName>/css - alles CSS-Dateien liegen in Unterordnern von templates/<TemplateName>/themes/.

Es wäre schön, wenn irgendwie ersichtlich werden würde, welche Dateien man aus dem "EVO" oder "Base" in sein eigenes Template mindestens kopieren muss, um mit den "*.less" arbeiten zu können.

Es *MUSS* nichts kopiert werden. Aber sinnvoll ist es, sich in einem ChildTemplate ein eigenes Theme zu erstellen und in dessen theme.less zumindest die base.less aus dem EVO zu importieren.

(AT)import "../../../../Evo/themes/base/less/base";

(Das Forum erlaubt mir nicht, dort ein "@" zu schreiben...)
Anschließend kann man dann z.B. auch noch auf Basis eines beliebigen Themes eine variables.less erstellen und diese ebenfalls importieren und anschließend noch eigene Änderungen vornehmen.

Was mir noch einfällt: Es steht im Guide, dass eine *.less nicht in die XML eingetragen werden muss. Heißt das, dass generell keine *.less in XML verknüpft werden darf, oder dass man das nicht braucht? Wie sieht es mit selbst erstellten *.less aus?

Die XML-Datei definiert Resourcen, die vom Browser geladen werden. Mit less kann ein Browser aber wenig anfangen, daher wäre es sinnlos, sie hier zu definieren.
Sie dienen einzig und allein der Erzeugung von CSS-Code - beispielsweise durch den EVO-Editor.

 

[Xantiva]

Was mir noch einfällt: Es steht im Guide, dass eine *.less nicht in die XML eingetragen werden muss. Heißt das, dass generell keine *.less in XML verknüpft werden darf, oder dass man das nicht braucht? Wie sieht es mit selbst erstellten *.less aus?

Du weist aber schon, was es mit den .less Dateien auf sich hat, oder? https://de.wikipedia.org/wiki/Less_(Stylesheet-Sprache)

Statt direkt .css Dateien zu erstellen und z. B. zig Mal die Hauptfarbe direkt einzutragen, bietet Dir Less die Möglichkeit mit Variablen zu arbeiten. Du definierst an einer Stelle die Variable mainColor mit der Farbe #xxx (variables.less) und verwendest dann bei der Definition des Layouts überall nur noch die Variable mainColor (theme.less). Der Kompiler (lokal z. B. Winless, auf dem Server das Evo-Theme-Plugin) sorgt dann dafür, dass aus dem beiden .less Dateien (oder mehr) eine neue .css generiert wird. Die verwendest Du und gibst sie z. B. in der template.xml an.

Also: .less ist nur was für die Vereinfachung der Erstellung von .css Dateien und wird nicht "live" in einer Webseite verwendet.

 

[FPrüfer]

Es wäre schön, wenn irgendwie ersichtlich werden würde, welche Dateien man aus dem "EVO" oder "Base" in sein eigenes Template mindestens kopieren muss, um mit den "*.less" arbeiten zu können.

In diesem Thread (https://forum.jtl-software.de/threa...hinter-das-system-steigen.103212/#post-572003) fidest du in dem Anhang eine Evo-Child-Vorlage, die nur die Dateien enthält, die man mindestens in ein eigenes Theme übernehmen muß. Diese Vorlage erbt ansonsten einfach nur vom Evo-Theme Evo.

 

[holzpuppe]

Klasse! Danke schön. So sind die schlimmsten Befürchtungen beiseite geräumt. Und ich sehe nun, dass mein damaliger " Guide" eine "Dirty"-Lösung ist.
Hab es in einer Testumgebung probiert und es läuft super. Nun muss ich weniger mit Notepad++ arbeiten. xD

Ein paar Fragen habe ich dennoch:
1. Welche Less-Version ist im Shop implementiert? (Lazy Evaluation / Properties as Variables) Da meckert der Kompiler.
2. Fonts werden im Shop standartmäßig also nur im ttf-Format ausgegeben. Theoretisch reicht es wenn ich woff und woff2 einbinde und die ttf weglasse, oder?
3. Sinnhaftigkeit von "hinted Fonts", braucht man das heutzutage eigentlich?
4. In den Developertools konnte ich eine von Googlefonts geladene Schrift, die "Roboto" entdecken. Geh ich recht in der Annahme, dass die im Zusammenhang mit dem Re-Captcha steht? Den eigentlich wird standardmäßig eh alles "lokal", oder vom Shop geladen. (Von Googlefont zu laden bin/möchte ich ab.)

 

[FMoche]

1. https://github.com/oyejorge/less.php
2. Der Browser sucht sich auf ttf/woff/woff2 i.A. selbständig die für ihn beste Version heraus. TTF stört also nicht. woff/woff2 alleine reicht aber aus: https://caniuse.com/#search=woff
4. Nein, hat nichts mit reCaptcha zu tun, sondern wird ganz normal als font-family genutzt.

 

[j0e]

Oh noch eine Version und Erklärung zum Child Theme. Das ist nun schon die dritte.
Warum passt ihr das denn nicht mal in den Docs an?

 

[Groundhog]

Hi Holzpuppe,
die Schrift wird in der "variables.less" definiert, aber importiert wird sie in der "theme.less". Du kannst dir das beispielsweise in der "templates\Evo\themes\evo\less\theme.less" anschauen.
Die Schrift liegt im Ordner "fonts" des Templates und wird von dort geladen (die Variable "icon-font-path" ist hier sicher etwas verwirrend).

Die Fonts werden von uns im Format .ttf eingebunden und liegen auch in diesem Format im genannten Ordner. Wenn du das auch so machen möchtest musst du selbst dafür sorgen, dass das Format stimmt. Der Shop übernimmt das nicht.

Hey Martin, ich muss da kurz einhaken:

Ich benötige eigentlich nur die Open Sans sowie die font-awesome für mein Evo Child. Nun liegt ja die Open Sans im Fonts Ordner und wird aber trotzdem über die Theme.css via Google Fonts Link geladen:

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

Wie erreiche ich dass kein Laden direkt von Google nötig ist, da auch Google Page Speed Insights eine CSS Optimierung der Ressource (google-fonts...blabla Link) vorschlägt. Mir wäre lieber ich könnte die Schriften die ich benötige direkt vom Server aus laden, ohne dabei einen externen Link einbinden zu müssen.

Sorry, falls ich mich blöd anstelle...ich ich check das grad so gar nicht.