Wie kann ich Googel Fonts für meinen Shop einbinden?

Hallo Liebe Shopware Mitnutzer,

ich weiß leider nicht mehr weiter!

Ich würde für unseren Shop ganz gerne eine andere Schrift Einbinden und die auch fürs Digital Publishing nutzen.

Leider weiß ich auch nach gelesen Beiträgen nicht wie ich dieses überhaupt angehen kann.

Ich hoffe auf Hilfe!

Lenja

Das sind 2 Fragen. Schaue erstmal wie Du Google Fonts einbinden kannst.

In Digital Publishing kannst du einfach den Fontnamen eintragen. Dieser wird dann zugewiesen.

@NextMike schrieb:

Das sind 2 Fragen. Schaue erstmal wie Du Google Fonts einbinden kannst.

In Digital Publishing kannst du einfach den Fontnamen eintragen. Dieser wird dann zugewiesen.

 

Hi,

gut dann erstmal die wichtigere Frage, wie binde ich Google Fons ein.

Na ganz einfach: Geh auf die Google Fonts Seite, such Dir einen Font aus und dann sagt Dir Google schon, wie Du den einbauen musst, also z.B so:

Das heißt…, Du musst diesen Code in Dein Theme bekommen! Und wie macht man das:

Thememanager > Dein Theme auswählen >Theme konfigurieren > (Reiter) Konfiguration > Weitere CSS-Dateien.

Dort hinterlegst Du den Code, speicherst das Ganze und dann leerst Du Dein Cache und kompilierst das Theme neu.

Voila, dat wars! Font wird geladen und der Rest muss dann eben via CSS erledigt werden… auch das sagt Dir Google:

font-family: 'Roboto', sans-serif;

 

@Murmeltier schrieb:

Na ganz einfach: Geh auf die Google Fonts Seite, such Dir einen Font aus und dann sagt Dir Google schon, wie Du den einbauen musst, also z.B so:

https://fonts.googleapis.com/css?family=Roboto"; rel=“stylesheet”>

Das heißt…, Du musst diesen Code in Dein Theme bekommen! Und wie macht man das:

Thememanager > Dein Theme auswählen >Theme konfigurieren > (Reiter) Konfiguration > Weitere CSS-Dateien.

Dort hinterlegst Du den Code, speicherst das Ganze und dann leerst Du Dein Cache und kompilierst das Theme neu.

Voila, dat wars! Font wird geladen und der Rest muss dann eben via CSS erledigt werden… auch das sagt Dir Google:

font-family: ‘Roboto’, sans-serif;

 

Danke für die schnelle Antwort!

Soweit so gut, Link ist eingefügt und nun, CSS? rest erledigt es von alleine oder was ist jetzt meine Aufgabe?

Kontrolliere erst mal, ob der Link auch wirklich im Quelltext Deiner Seite auftaucht!?

Dafür im Browser STRG+ U drücken und im Quelltext im Header schauen, ob Du den Code siehst!?

Wenn ja, dann musst Du eben ein wenig CSS schreiben, also da wo Du den Font haben möchtest!

Dafür würde ich mir am besten mal eine neue CSS Datei anlegen und genau so einbinden, wie Du das jetzt mit dem Font gemacht hast.

Dort überschreibst Du dann die CSS Regeln von Shopware!

Wenn Du jedoch noch nie was von CSS gehört hast, dann lass lieber die Finger weg!

Beispiel:

body {
 font-family: 'Roboto', sans-serif;
}

 

@Murmeltier schrieb:

Kontrolliere erst mal, ob der Link auch wirklich im Quelltext Deiner Seite auftaucht!?

Dafür im Browser STRG+ U drücken und im Quelltext im Header schauen, ob Du den Code siehst!?

Wenn ja, dann musst Du eben ein wenig CSS schreiben, also da wo Du den Font haben möchtest!

Dafür würde ich mir am besten mal eine neue CSS Datei anlegen und genau so einbinden, wie Du das jetzt mit dem Font gemacht hast.

Dort überschreibst Du dann die CSS Regeln von Shopware!

Wenn Du jedoch noch nie was von CSS gehört hast, dann lass lieber die Finger weg!

Von HTML und CSS, habe ich schon mal gehört. Ich verstehe auch wie du das meinst aber wenn ich eine neue CSS anlege, z.B. über das Programm Brackets, wie kann ich dann auf meine Seite (HTML) zugreifen? denn ich muss ja im HTML ein Stylesheet hinterlegen.

Ja, ganz genau, Du musst nun Deine Stylesheet Datei in den Shop einbinden und das machst Du ganz genau so, wie Du das mit dem Font gemacht hast, also auch über den Thememanager. Dort kannst Du Dein Stylesheet z.B so einbinden:

Danach leerst Du bitte den Cache. Dann musst Du nur noch mit Brackets eine leere Datei mit dem Namen my-awesome-stylesheet.css in den Rootfolder von Shopware hochladen. Wenn Du alles richtig gemacht hast, dann kannst Du die Datei auch ebenfalls im Header Deiner Seite finden und anklicken:

Wenn dann eine leere Datei aufgeht, dann hast Du alles richtig gemacht. Dort packst Du alle Regeln rein, die Dir wichtig sind und bindest dann so z.B. auch Deinen Font dort ein, wo Du meinst, das Du Ihn gebrauchen kannst… Wink

 

1 Like