Hi Leute! Ich hätte gern eine andere Schrift in meinem Shop, und zwar für alles. Für die Shopseiten, für die HTML Elemente, für die Artikelbeschreibungen… Wie geht das und wo stelle ich was um? Welche Schriftarten stehen mir zur Auswahl damit diese auch wirklich auf jedem Rechner angezeigt werden können? Mir persönlich gefällt z.B. die Schriftart von Google+ Besonders die Schriftart die bei den HTML Elementen verwendet wird entspricht absolut nicht meinen Vorstellungen. Jemand eine Idee?
Es könnte so funktionieren: body { font-style: normal; } Das müsste eigentlich für alle Schriften im body-Bereich gelten. google web fonts Schrift auswählen,den Link dazu im headbereich einfügen und dann im css die Schriftart über body einfügen.
Ok, ich habs bei mir versucht und es funktioniert für alles, im Header wie im Footer wie in den html-Elementen. Das wirkt sich aber negativ auf die Ladezeit aus. lg
Jo Danke! Ich probiere es gleich mal und gebe dann Feedback! :thumbup: Edit: Ok ich weiß gerade nicht wie ich das alles anstellen soll ^^ Meinst du die index.tpl im emtotion Ordner, dort den Head Bereich? Dort einfach einen Link zu dem Google Web Font einfügen? Und wie genau spreche ich nun in CSS die Schriftart an?
Hallo, in Shopware wird die Schrift im HTML-Tag definiert. In der emotion.css findest du gleich am Anfang die folgende Zeile: html {font: 12px/1.3em Arial,“Helvetica Neue”,Helvetica,sans-serif; padding-top: 0px;} Hier ist also “Arial” die Hauptschriftart und wenn diese nicht vorhanden ist, dann wird “Helvetica Neue” verwendet. Dann geht dann immer so weiter. 
In deiner CSS-Datei müsstest du dann einfach folgendes einfügen: html {font-family: gewünschte Schrift, 2. Schrift, 3. Schrift} Besteht die Schriftart aus 2 Wörtern, diese bitte in Anführungszeichen setzen. Ansonsten wie Markus schon vorgeschlagen hat, Webfonts. Da solltest du mit Sicherheit was finden. Gruß Manuel
1 „Gefällt mir“
ha ha geht mir genau so Ich wurschtel mich hier auch mehr oder weniger durch [quote]Ok ich weiß gerade nicht wie ich das alles anstellen soll ^^ Meinst du die index.tpl im emtotion Ordner, dort den Head Bereich? Dort einfach einen Link zu dem Google Web Font einfügen? Und wie genau spreche ich nun in CSS die Schriftart an?[/quote] Du musst die Änderungen in deinem eigenen Template vornehmen. Also so wie hier: Template Tutorial Erstelle deine css-Datei und eine eigene header.tpl wie im Tutorial beschrieben. fonts einfügen: Jetzt musst du den Link den du von der google fonts seite bekommst in deiner erstellten header.tpl einfügen, so wie ich es hier gemacht habe: {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen" append}<link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/emotion_KG.css'%7D"><link href="http://fonts.googleapis.com/css?family=Port+Lligat+Slab" rel="stylesheet" type="text/css">{/block} und jetzt musst du zum Schluss noch die Schriftart in deiner erstellten CSS-Datei einfügen so wie ich es hier auch gemacht habe: body{ font-family: 'Port Lligat Slab', serif; } Das wars !
1 „Gefällt mir“
Ok ich versuch mich da mal jetzt ^^ Ich meine ich hab das komplette Emotion auf meinen Shop umgestellt und so Sachen wie Schrift ändern habe ich noch nicht gemacht weswegen ich auch nicht weiß wie es funktioniert ^^ Bin halt kein Web Coder Aber Danke! Ich probiere es jetzt mal aus 
Funktioniert! Thema Gelöst! Vielen Dank an alle! 
:thumbup: Edit: Nur die Artikelbeschreibung ist davon nicht betroffen
Edit: Also leider ist die Schrift auf den Shopseiten(AGB, Impressum, usw…) und bei den Artikelbeschreibungen leider unverändert. Jemand noch einen Tipp? Danke und Gruß Gazu :thumbup:
mahlzeit, das war bei mir auch noch unverändert habe ich gesehen. Füge diesen code noch in deine css ein dann funktioniert es, ich habe zwar noch keine Artikel drinn aber die AGBs haben sich auf jeden Fall verändert: div.ajax\_login\_form .new\_customer p, div.ajax\_login\_form .existing\_customer p, #detail #detailinfo #description p, #content .custom p, #content .cat\_text p { font-family: deine fontfamily } ps: kannst du mir vielleicht hierweiterhelfen? Ich würde gerne wissen wie ich in einem html-Element der Einkaufswelten selbst html code eingeben kann damit ich einen Bereich selbst gestallten kann.
1 „Gefällt mir“
Hallo, das wird gesondert definiert. In der emotion.css gibt es folgenden Eintrag (Zeile 587): div.ajax_login_form .new_customer p, div.ajax_login_form .existing_customer p, #detail #detailinfo #description p, #content .custom p, #content .cat_text p { font: 13px/21px Arial,„Helvetica Neue“,Helvetica,sans-serif; } Du müsstest diesen Abschnitt nur in deine CSS einfügen und anpassen. TIP: Falls du Firefox verwendest, installiere dir mal das Addon „Firebug“ oder wenn du Chrome verwendest gibt es dort die Entwicklertools. Damit kannst du die passenden Stellen in den CSS-Dateien prima erkennen und auch verändern. Gruß Manuel
1 „Gefällt mir“
Hallo Luhner, kannst du mir vielleicht hier weiterhelfen? Ich würde gerne wissen wie ich in einem html-Element der Einkaufswelten selbst html code eingeben kann damit ich einen Bereich selbst gestallten kann.
Klappt alles! Danke :thumbup:
Zu früh gefreut. Nach ca. 10 Minuten wenn man den header und die emotion angepasst hat, fängt an der zu Shop zu laggen, er will nicht mehr laden bis man die Codes wieder rauswirft… Total komisch das er erst nach ca. 10 Minuten so reagiert. Chrome will die neuen Schriften garnicht anzeigen. Funktioniert für 10 Minuten also nur in Firefox … -_______-" … Trotzdem danke an alle ^^
Hallo, was haste denn genau geändert? Gruß Manuel
Ich habe die Header Datei in meinem Template ergänzt: {extends file="parent:frontend/index/header.tpl"} {block name="frontend\_index\_header\_css\_screen" append} <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/emotion_meinemotion.css'%7D"><link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">{/block} Wird eventuell nicht meine emotion angegeben?Sondern die Master emotion? Desweiteren habe ich in meiner CSS folgenden Code, ganz unten eingefügt: } div.ajax\_login\_form .new\_customer p, div.ajax\_login\_form .existing\_customer p, #detail #detailinfo #description p, #content .custom p, #content .cat\_text p { font-family: 'Roboto', sans-serif; body{ font-family: 'Roboto', sans-serif; } Ich wusste auch nicht ob der Rest auch in BODY reinsoll. Jedenfalls klappts so net 
Das sieht soweit ganz gut aus. Sollte so normalerweise auch funktionieren. Hast du nen Link zum Shop oder nur eine Testumgebung? Gruß Manuel
[color=red]}[/color] div.ajax_login_form .new_customer p, div.ajax_login_form .existing_customer p, #detail #detailinfo #description p, #content .custom p, #content .cat_text p [color=red]{[/color] font-family: ‚Roboto‘, sans-serif; body[color=red]{[/color] font-family: ‚Roboto‘, sans-serif; [color=red]}[/color] vielleicht wenn du die Klammersetzung überprüfst? So wie ich das sehe machst du erst eine zu die vorher nicht aufgemacht wurde und dann wieder zwei auf aber nur eine davon wieder zu: } { { } Es müsste doch eigentlich so aussehen: div.ajax\_login\_form .new\_customer p, div.ajax\_login\_form .existing\_customer p, #detail #detailinfo #description p, #content .custom p, #content .cat\_text p { font-family: 'Roboto', sans-serif; } body { font-family: 'Roboto', sans-serif; } versuche es einfach mal Die webfonts werden sich aber immer auf die Ladezeit auswirken! auch wenn es nur minimal ist wenn man nur eine oder zwei verwendet
Ich habe es jetzt nochmal so gemacht wie du es gepostet hast. Mal schauen wie es in 10 Minuten aussieht. Danke und Gruß Gazu
Ja ok, aber um ehrlich zu sein kann ich mir nicht so recht vorstellen dass dies dein Problem auslöst weil die ganzen Browser sind doch alle mittlerweile so Fehlerresistent da dürften ein paar Klammern keine Probleme bereiten. Naja aber vielleicht klappts ja doch