# Fontawesome einbinden (WOFF Dateien) **URL:** \ **Category:** Themes & Design\ **Created:** [18. März 2024 um 12:53 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353 "2024-03-18T12:53:21Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\ **Post date:** [18. März 2024 um 12:53 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/1 "2024-03-18T12:53:21Z")
Ich habe mal eine kurze Frage: Die SCSS Daten werden richtig über die theme.json eingebunden und sind in der all.css vorhanden. Leider zeigt er mir nur die Fehlericons an und nicht die FontAweSome Icons. In der Konsole zeigt er mir an das er die WOFF Daten nicht laden kann. Ich habe dies in der theme.json ```auto "views": [ "@Storefront", "@Plugins", "@SM2024" ], "style": [ "app/storefront/src/scss/overrides.scss", "@Storefront", "app/storefront/src/scss/base.scss", "app/storefront/src/assets/fonts/fontawesome/scss/fontawesome.scss", "app/storefront/src/assets/fonts/fontawesome/scss/brands.scss", "app/storefront/src/assets/fonts/fontawesome/scss/solid.scss" ], "script": [ "@Storefront", "app/storefront/dist/storefront/js/SM2024.js" ], "asset": [ "@Storefront", "app/storefront/src/assets", "app/storefront/src/assets/fonts/fontawesome/webfonts" ] ``` Wer kann mir sagen wo gerade noch mein Fehler ist? ---
**Author:** ![chamaw](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@chamaw](https://forum.shopware.com/u/chamaw)\ **Post date:** [18. März 2024 um 13:00 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/2 "2024-03-18T13:00:49Z")
die FA-css verweist ja intern auf die Font-Dateien, normalerweise relative. Wenn Du die Css (in einer HTML gebunden) im Browser lädt sollten dann die 404-Fehler kommen. für den ersten Test dann die Datei wo gewünscht platzieren … ---
**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\ **Post date:** [18. März 2024 um 13:24 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/3 "2024-03-18T13:24:09Z")
ja die verweisen relativ. Aber dennoch bekomme ich die fehlerhaften Icons weil er nicht die Dateien freigibt vom Pfad her. Habe es jetzt mal in die meta.html.twig rein genommen: ```auto {% block layout_head_stylesheet %} {{ parent() }} {% endblock %} ``` Aber auch hier sind die Daten nicht verfügbar. Bin gerade ein wenig überfragt. ---
**Author:** ![chamaw](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@chamaw](https://forum.shopware.com/u/chamaw)\ **Post date:** [18. März 2024 um 13:38 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/4 "2024-03-18T13:38:35Z")
Was wird denn nu NICHT geladen ? Die einzelnen css, die gemergte css oder die Font-Dateien ? Notfalls im Browser in den dev-tools schauen wo es einen Fehler gibt … ---
**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\ **Post date:** [18. März 2024 um 14:02 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/5 "2024-03-18T14:02:17Z")
wenn ich diese per SCSS einbinde in der theme.json dann werden die Font Dateien nicht geladen. Wenn ich diese wie im 2ten über die meta.html.twig einbinde dann werden diese nicht geladen bzw nicht gefunden. Ich würde es gerne per SCSS über die theme.json einbinden aber dann findet er ja die Font Dateien nicht. ---
**Author:** ![area-net-gmbh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/area-net-gmbh/32/21995_2.png) [@area-net-gmbh](https://forum.shopware.com/u/area-net-gmbh)\ **Post date:** [18. März 2024 um 14:20 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/6 "2024-03-18T14:20:08Z")
Wir haben in unserem Theme Font Awesome wie folgt per SCSS eingebunden - als Beispiel ```auto @font-face { font-family: 'Font Awesome 6 Brands'; font-style: normal; font-weight: 400; font-display: block; src: url("#{$asset-path}/fontawesome64/fa-brands-400.woff2") format("woff2"), ...; } ``` ---
**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\ **Post date:** [18. März 2024 um 14:34 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/7 "2024-03-18T14:34:56Z")
das werde ich auch gleich mal probieren. Das sollte auf jedenfall klappen. Habe gerade versucht die \_variables.scss von FontAwesome in der Zeile 49 anzupassen: ```auto $fa-font-path : "#{$asset-path}/fonts/fontawesome/webfonts" !default; ``` klappte aber nicht. Weil er mit den # davor nicht klar kommt. Wenn ich den rausnehme dann läuft es zwar durch aber im Quelltext steht dann: [https://example.de/theme/26074a4038c72ef2201df80d1effa364/css/{$asset-path}/fonts/fontawesome/webfonts//fa-brands-400.woff2](https://example.de/theme/26074a4038c72ef2201df80d1effa364/css/%7B$asset-path%7D/fonts/fontawesome/webfonts//fa-brands-400.woff2) erstens wird die Variable nicht ersetzt und dann startet er aber dennoch im Verzeichniss css und nicht im assets ---
**Author:** ![area-net-gmbh](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/area-net-gmbh/32/21995_2.png) [@area-net-gmbh](https://forum.shopware.com/u/area-net-gmbh)\ **Post date:** [18. März 2024 um 19:36 UTC](https://forum.shopware.com/t/fontawesome-einbinden-woff-dateien/103353/8 "2024-03-18T19:36:21Z")
Versuche mal das hier ```auto $fa-font-path : "#{$app-css-relative-asset-path}/fonts/fontawesome/webfonts" !default; ```