# Webfonts einbinden
**URL:** https://forum.shopware.com/t/webfonts-einbinden/26867
**Category:** Installation/Einstieg
**Created:** [4. Mai 2015 um 17:23 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867 "2015-05-04T17:23:40Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@thethe](https://forum.shopware.com/u/thethe)
#### Post date: [4. Mai 2015 um 17:23 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/1 "2015-05-04T17:23:40Z")
Hallo Zusammen, leider schaffe ich es nicht einen gekauften Webfont einzubinden. Zunächst habe ein Custom Theme auf Basis des Responsive Theme erstellt. Dann analog zum Responsive Theme einen vendors Ordner mit den Webfonts und dem dazugehörigen CSS. Ich verstehe nicht warum in der typography.less der Fonts Ordner nochmal referenziert sind : ` // Shopware font directory @font-directory: "../../webfonts/"; // Open Sans font directory @OpenSansPath: "../../fonts/open-sans-fontface";` Obwohl diese doch schon in der open-sans.less referenziert sind. ` /\* Open Sans @font-face kit \*/ @OpenSansPath: "./fonts"; /\* BEGIN Light \*/ @font-face { font-family: 'Open Sans'; src: url('@{OpenSansPath}/Light/OpenSans-Light.woff?@{shopware-revision}') format('woff'), url('@{OpenSansPath}/Light/OpenSans-Light.ttf?@{shopware-revision}') format('truetype'); font-weight: 300; font-style: normal; } /\* END Light \*/ /\* BEGIN Regular \*/ @font-face { font-family: 'Open Sans'; src: url('@{OpenSansPath}/Regular/OpenSans-Regular.woff?@{shopware-revision}') format('woff'), url('@{OpenSansPath}/Regular/OpenSans-Regular.ttf?@{shopware-revision}') format('truetype'); font-weight: normal; font-style: normal; } /\* END Regular \*/ /\* BEGIN Semibold \*/ @font-face { font-family: 'Open Sans'; src: url('@{OpenSansPath}/Semibold/OpenSans-Semibold.woff?@{shopware-revision}') format('woff'), url('@{OpenSansPath}/Semibold/OpenSans-Semibold.ttf?@{shopware-revision}') format('truetype'); font-weight: 600; font-style: normal; } /\* END Semibold \*/ /\* BEGIN Bold \*/ @font-face { font-family: 'Open Sans'; src: url('@{OpenSansPath}/Bold/OpenSans-Bold.woff?@{shopware-revision}') format('woff'), url('@{OpenSansPath}/Bold/OpenSans-Bold.ttf?@{shopware-revision}') format('truetype'); font-weight: bold; font-style: normal; } /\* END Bold \*/ /\* BEGIN Extrabold \*/ @font-face { font-family: 'Open Sans'; src: url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.woff?@{shopware-revision}') format('woff'), url('@{OpenSansPath}/ExtraBold/OpenSans-ExtraBold.ttf?@{shopware-revision}') format('truetype'); font-weight: 800; font-style: normal; } /\* END Extrabold \*/ ` Kann mir jemand erklären wie ich meine Webfonts einbinden kann. Vielen Dank P.
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [4. Mai 2015 um 17:30 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/2 "2015-05-04T17:30:00Z")
Erst einmal benötigst du keinen /vendors Ordner. Dieser wird meist verwendet, wenn du mit bower / composer etc. arbeitest. Packe deinen webfonts Ordner nach \_public/src/less Dann sollten auch die Pfade stimmen. `@font-face { ... url('../../webfonts/......`
---
### Author:  [@thethe](https://forum.shopware.com/u/thethe)
#### Post date: [4. Mai 2015 um 17:35 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/3 "2015-05-04T17:35:39Z")
Ok Danke, das probiere ich mal. Das CSS was ich zu den Webfonts bekommen habe enthält allerdings noch einen Link zu einer Kotrolldatei bei Hersteller. Ich muss dieses CSS doch in .less umbennen um es ipmortieren zu können, oder? ` @import url("//hello.myfonts.net/count/xxxxx"); @font-face {font-family: 'TradeGothicLT';src: url('webfonts/2E1491\_0\_0.eot');src: url('webfonts/2E1491\_0\_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2E1491\_0\_0.woff2') format('woff2'),url('webfonts/2E1491\_0\_0.woff') format('woff'),url('webfonts/2E1491\_0\_0.ttf') format('truetype');} @font-face {font-family: 'TradeGothicLT-CondEighteen';src: url('webfonts/2E1491\_1\_0.eot');src: url('webfonts/2E1491\_1\_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2E1491\_1\_0.woff2') format('woff2'),url('webfonts/2E1491\_1\_0.woff') format('woff'),url('webfonts/2E1491\_1\_0.ttf') format('truetype');} @font-face {font-family: 'TradeGothicLTCom-Bd2';src: url('webfonts/2E1491\_2\_0.eot');src: url('webfonts/2E1491\_2\_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2E1491\_2\_0.woff2') format('woff2'),url('webfonts/2E1491\_2\_0.woff') format('woff'),url('webfonts/2E1491\_2\_0.ttf') format('truetype');} @font-face {font-family: 'TradeGothicLTPro-BdCn20';src: url('webfonts/2E1491\_3\_0.eot');src: url('webfonts/2E1491\_3\_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2E1491\_3\_0.woff2') format('woff2'),url('webfonts/2E1491\_3\_0.woff') format('woff'),url('webfonts/2E1491\_3\_0.ttf') format('truetype');} ` Viele Gruesse P.
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [4. Mai 2015 um 17:49 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/4 "2015-05-04T17:49:16Z")
Ja musst du, einfach direkt über deinen fonts. Allerdings mit (css): `@import (css) url("//hello.myfonts.net/count/xxxx");`
---
### Author:  [@thethe](https://forum.shopware.com/u/thethe)
#### Post date: [4. Mai 2015 um 18:07 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/5 "2015-05-04T18:07:45Z")
Prima. Vielen Dank - so gehts.
---
### Author:  [@kinday](https://forum.shopware.com/u/kinday)
#### Post date: [5. Mai 2015 um 15:58 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/6 "2015-05-05T15:58:53Z")
Ich habe in der header.less folgendes eingetragen: `@font-face { font-family: 'Oswald'; src: url('../fonts/Oswald.eot'); src: url('../fonts/Oswald.eot?#iefix') format('embedded-opentype'), url('../fonts/Oswald.woff2') format('woff2'), url('../fonts/Oswald.woff') format('woff'), url('../fonts/Oswald.ttf') format('truetype'); } @font-face { font-family: 'Oswald-Light'; src: url('../fonts/Oswald-Light.eot'); src: url('../fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Oswald-Light.woff2') format('woff2'), url('../fonts/Oswald-Light.woff') format('woff'), url('../fonts/Oswald-Light.ttf') format('truetype'); }` Leider funktioniert es immer noch nicht. Wo liegt da der Fehler?
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [5. Mai 2015 um 16:06 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/7 "2015-05-05T16:06:27Z")
Wo liegt denn der Fonts Ordner ? Außerdem würde ich es nicht die header.less packen, sondern besser noch in eine eigene LESS Datei, welche dann durch die all.less auch als erstes geladen wird. PS: Du musst zwei Ebenen zurück ( …/…/ ), da die Fonts ja entsprechend zwei Ebenen unterhalb deiner LESS Datei liegen. Ich habe hierzu auch einmal einen kurzen Beitrag geschrieben: [https://shopwareianer.com/tutorials/shopware-5-eigene-web-fonts-nutzen](https://shopwareianer.com/tutorials/shopware-5-eigene-web-fonts-nutzen)
---
### Author:  [@padaja](https://forum.shopware.com/u/padaja)
#### Post date: [28. Juli 2015 um 08:40 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/8 "2015-07-28T08:40:29Z")
Hi kayyy, wenn man die Webfonts von Google verwendet, gibt es immer nur .ttf Dateien. Sind andere Formate wie .woff oder .eot notwendig? Falls ja, wo bekommt man die bei Google? Und wie bindet man eine zweite Schriftartein von Google ein?
---
### Author:  [@henning](https://forum.shopware.com/u/henning)
#### Post date: [14. Dezember 2015 um 10:23 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/9 "2015-12-14T10:23:53Z")
Gibt es hier schon was neues zum Thema Google-WebFonts?
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [14. Dezember 2015 um 11:12 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/10 "2015-12-14T11:12:16Z")
Also ich sehe nur woff2 Dateien 🙂 Diese reichen in der Regel auch, da woff2 alle modernen Browser supporten. Alle anderen Dateien sind für ältere Browser. Siehe auch diesen Beitrag: [https://css-tricks.com/snippets/css/using-font-face/](https://css-tricks.com/snippets/css/using-font-face/) Ungefähr ab “Practical Level of Browser Support”. Hier auch noch ein Codepen: [http://codepen.io/team/css-tricks/pen/OPdaNB](http://codepen.io/team/css-tricks/pen/OPdaNB)
---
### Author:  [@henning](https://forum.shopware.com/u/henning)
#### Post date: [14. Dezember 2015 um 12:29 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/11 "2015-12-14T12:29:57Z")
Ich leider nicht, ich sehe bei dem Font Pacifico [https://www.google.com/fonts#ChoosePlace:select](https://www.google.com/fonts#ChoosePlace:select) auch “nur” ttf… Und wenn ich mir die dann über zB font-squirell umwandeln lasse, klappt es immer noch nicht ☹
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [14. Dezember 2015 um 12:41 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/12 "2015-12-14T12:41:56Z")
> [@henning](#):
>
> Ich leider nicht, ich sehe bei dem Font Pacifico [https://www.google.com/fonts#ChoosePlace:select](https://www.google.com/fonts#ChoosePlace:select) auch „nur“ ttf… Und wenn ich mir die dann über zB font-squirell umwandeln lasse, klappt es immer noch nicht ☹
---
### Author:  [@henning](https://forum.shopware.com/u/henning)
#### Post date: [14. Dezember 2015 um 13:47 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/13 "2015-12-14T13:47:05Z")
Ja schaueinerguck… Dann klappt es auch 🙂 Jetzt würde mich natürlich noch interessieren wie Du auf diesen Link [https://fonts.googleapis.com/css?family=Pacifico](https://fonts.googleapis.com/css?family=Pacifico) gekommen bist 😉 Oder hab ich nur gerade ein Brett vor dem Kopf?
---
### Author:  [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)
#### Post date: [14. Dezember 2015 um 13:50 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/14 "2015-12-14T13:50:13Z")
> [@henning](#):
>
> Ja schaueinerguck… Dann klappt es auch 🙂 Jetzt würde mich natürlich noch interessieren wie Du auf diesen Link [https://fonts.googleapis.com/css?family=Pacifico](https://fonts.googleapis.com/css?family=Pacifico) gekommen bist 😉 Oder hab ich nur gerade ein Brett vor dem Kopf?
---
### Author:  [@henning](https://forum.shopware.com/u/henning)
#### Post date: [14. Dezember 2015 um 14:05 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/15 "2015-12-14T14:05:58Z")
Ok, die Klatsche hat geholfen 😉 :thumbup:
---
### Author:  [@kmall](https://forum.shopware.com/u/kmall)
#### Post date: [16. Oktober 2020 um 07:26 UTC](https://forum.shopware.com/t/webfonts-einbinden/26867/16 "2020-10-16T07:26:42Z")
Hallo zusammen,
ich bin noch totaler Anfänger und bin dabei Vieles neu zu lernen. Daher wende ich mich euch mal zu.
Ich habe nun versucht Googlewebfonts einzubinden indem ich die Datei: webfonts.less
unter: MEIN\_THEME/frontend/\_public/src/less/\_modules erstellt habe.
Ich habe hier die Schrift Schrift eingetragen:
```
@font-face {
font-family: 'Sunflower';
}
```
Anschließend habe ich in der all.less in MEIN\_THEME/frontend/\_public/src/less folgendes ergänzt. `@import "_modules/webfonts";`
Danach im Theme Manager unter Theme konfigurieren in der Typografie den FONTNAME eingetragen.
Leider funktioniert das Alles nicht. Kann mir jemand sagen was ich falsch gemacht habe?
Vielen Dank.
Viele Grüße
Hann