Font in Theme ändern

Shopware 5 Themes & Design
1

Hallo zusammen,

ich habe ein Problem…

Ich habe ein Theme erstellt, welches sich vom Responsive Thme ableitet, jetzt habe ich meinen eigenen Font eingebunden.Mein Problem ist jetzt, dass der Standard-Font Open Sans immernoch geladen wird, da dieser ja im Responsive Theme in all.less über @import importiert wird. Muss ich jetzt diesen @import in der all.less des Responsive Themes raus nehmen oder kann ich diesen Import irgendwie in meinem abgeleiteten Theme verhindern?

Danke im voraus

Gruß Gegerino
 

2

Hi Gegerino,

habe gerade auch mal nachgeschaut, bekomme es aber leider auch nicht hin. Kann nur bestätigen, dass bei mir die Open Sans auch weiterhin geladen wird und würde mich auch über eine Lösung freuen.

Sorry, aber das hilft wahrscheinlich auch nicht weiter :frowning:

Schöne Grüße,

Björn

3

Ja klar.

Die Google Fonts muss natürlich noch aus der all.less: shopware/all.less at 5.1 · shopware/shopware · GitHub

Und natürlich entsprechend die font-family in deinen Theme Einstellungen ändern, sodass Open-Sans nicht als font-family geladen wird, sondern deine.

4

OK, also muss ich dann doch das Resposive Theme ändern.

5

Ich frage mich aber gerade ehrlich gesagt, wie man die font-datei raus bekommen soll, ohne das Core Responsive Theme zu bearbeiten  Angry-Face

6

Dachte auch das wäre BÖSE  Wearing-Sunglasses

7

Wenn ich es richtig verstehe, dann so

Backend- Einstellungen - Theme Manager  

Theme auswählen und unten rechts auf Theme konfigurieren, oben rechts auf Farbkonfiguration und auf Typografie. Speichern und Theme kompilieren.

8

Ich möchte gerne dieses Thema nochmals ansprechen. Gerne würde ich zwei fonts in meinen Shop einbinden. Die eine wäre die Montserrat und die andere die SignPainter.

Beide habe ich als .tiff datei hochgeladen.

Habe nun extra in meinem Theme folgender Ordner erstellt /httpdocs/themes/Frontend/meinTheme/frontend/_public/vendors/open-sans-fontface und dort die Schriften in Ordnern abgelegt.

919×248 5.64 KB

Und danach in der all.less der Code eingefügt aus der Anleitung

988×409 18.3 KB

Natürlich sucht das System beim kompilieren nach einer .less datei und die Fehlermeldung kommt? Was ist mein Ueberlegungsfehler?

Danke euch für die Unterstützung. Wir sollten diese Schrift verwenden da unser New Brand diese im Logo hat.

Merci vielmal für die Hilfe

Chris

9

Moin Chris,

ohne genau im Thema wieder drin zu sein:
Ist die Pfadangabe richtig? Dort steht „…vendors/LESS/…“, aber „less“ ist auf deinem Screenshot nicht zu sehen…

Vielleicht hilft das ja auch schon.

Viele Grüße
Björn

10

Hi Björn

Danke für Deine Antwort. Ich werde es nachher nochmals versuchen. Nur kann ich in der all.less diesen Befehl eingeben? Beim kompilieren sucht der Shop ja nach einer .less Datei und die gibt es ja nicht, sondern es sind 2 .tiff Dateien? Irgendwie stehe ich auf dem bekannten Schlauch…

 

11

Nachtrag: Ich lade meine zwei Font.tiff in einen Ordner auf den Server und danach gebe ich in der all.less den Pfad an und Shopware erkennt danach meine hinzugefügten Schriften? Bin euch wirklich über Hilfe dankbar.

Chris

12

Abgesehen von allem anderen sind .tiff-Dateien Graphikdateien und keine Schriftdateien. Verwechselst Du das mit .ttf? Damit das in allen möglichen Browsern funktioniert, musst Du aber sicher noch mehr als nur die TTF-Dateien einbinden.

Schriftarten müssen in der all.less oder einer der anderen eingebunden LESS-Datei so wie folgt eingebunden werden (aber dafür gibt es hunderte von Anleitungen im Netz):

/* ubuntu-300 - latin-ext_latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('../../fonts/ubuntu-v11-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Ubuntu Light'), local('Ubuntu-Light'),
       url('../../fonts/ubuntu-v11-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/ubuntu-v11-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/ubuntu-v11-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/ubuntu-v11-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/ubuntu-v11-latin-ext_latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

 

2 „Gefällt mir“
13

@drakon schrieb:

Abgesehen von allem anderen sind .tiff-Dateien Graphikdateien und keine Schriftdateien. […]

ROFL!  Grin 

14

@drakon‍ ja ich meinte natürlich ttf.dateien. Grin Und Hunterte von Anleitungen habe ich def. nicht gefunden. Da ich dieses wirklich noch nie gemacht habe wende ich mich ja im Forum an Euch. Und wie gesagt bin ich auf jeden hinweis sehr dankbar.

@Murmeltier‍ Danke für deine Antwort

15

@darkon Dir für die Hilfe hat geklappt. Super:-)

Eine kleine Frage zu diesem Feld in der EW

806×211 5.45 KB

Ich möchte gerne für bsw. einen Textfeld eine Schrift hinzufügen. Jedoch bringe ich das nicht hin? Ich sollte doch irgendwie mit einem CSS Code Shopware sagen mache mir bitte in diesem Feld die Schrift in diesem Style? Leider ist bei mir immer eine rote Linie unten (Fehlermeldung) 

bsw. 

757×130 6.64 KB

Danke vielmals und Grüsse 

Chris

16

Die rote Linie kommt wohl von der Rechtschreibkorrektur des Browsers.

In dem Feld können nur Klassennamen eingetragen werden. Trage Deine Font-Anweisung in eine neue Klasse in eine Deiner LESS-Dateien ein und den Klassennamen in das gewünschte Feld:

.meineNeueKlasse {
    font-family: meinFont;
}