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.
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/......
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.
Ja musst du, einfach direkt über deinen fonts. Allerdings mit (css): @import (css) url("//hello.myfonts.net/count/xxxx");
Prima. Vielen Dank - so gehts.
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?
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
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?
Gibt es hier schon was neues zum Thema Google-WebFonts?
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/ Ungefähr ab “Practical Level of Browser Support”. Hier auch noch ein Codepen: http://codepen.io/team/css-tricks/pen/OPdaNB
Ich leider nicht, ich sehe bei dem Font Pacifico 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 
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 gekommen bist 
Oder hab ich nur gerade ein Brett vor dem Kopf?
Ok, die Klatsche hat geholfen :thumbup:
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