Hey zusammen, ich bekomme es einfach nicht hin, den google font "material icons" funktional einzubinden und benötige Hilfe. Aktuelle Meldungen in der Console: Failed to decode downloaded font: <URL> parsing error: invalid sfntVersion: 168430090 Font-Dateien wurde binär per ftp hochgeladen und die CSS enthält keinerlei Kommentare. Im Child Theme habe ich einen Ordner Fonts erstellt mit folgenden Inhalt: materialicons / material-icons.woff materialicons / material-icons.woff2 materialicons.css Meine materialicons.css hat diesen Inhalt: Code: @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/materialicons/material-icons.woff2') format('woff2'), url('../fonts/materialicons/material-icons.woff') format('woff'); } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; } Über die layout_head.html im Child Theme binde ich das ganze ein: Code: {block name="layout_head_head_css_include" append} <link id="materialicons" type="text/css" rel="stylesheet" href="public/theme/fonts/materialicons.css" /> <link id="accordion-css" type="text/css" rel="stylesheet" href="public/theme/styles/system/accordion.css" /> {/block} Nachdem der Cache geleert wurde, habe ich den public Ordner geprüft und die fonts sowie die css dort vorgefunden. Die Console wirft auch keinen 403/404. Hat jemand eine Idee?
Ich habe nun nochmal die Font Dateien geprüft und neu heruntergeladen und siehe da, es funktioniert Für alle die im Git auch nicht fündig wurden: woff: https://fonts.gstatic.com/s/materialicons/v113/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff woff2: https://fonts.gstatic.com/s/materialicons/v113/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2
Hey Barbara, einer der Gründe ist das verhindern wollte das die Schriftart in main.css eingebunden wird. Wenn ich eine Schriftart selbst hoste, möchte ich so flexibel sein das ich es selbst in der Hand habe wo ich diese Schriftart einbinde. Es gibt Szenarien da macht es kein Sinn den Font global einzubinden. Hinzu kommt das Material Icon kein klassischer Google Web Font ist, den man unter https://fonts.google.com findet. Womit ich im StyleEditor unter Google Web Font Urls zwei Urls aus verschiedenen Quellen einbinden müsste. Grüße Frank
@frank_machnick oder sonstwen, der das vielleicht auch geschafft hat: Ich scheitere gerade an einem entsprechenden Vorhaben, im Theme selbst liegende Fonts korrekt einzubinden, so dass der Shop sie auch findet. Folgende Situation: - Meine Fonts liegen im Pfad "/themes/<meinTheme>/fonts" - Gambio legt sie dann in den cache-Pfad "public/theme/fonts", passt - Ich mache die Schriftart in css-Dateien bekannt, die im Pfad "themes/<meinTheme>/styles/custom" liegen ...und da gehen die Probleme los. Egal, was, ich dort als url eintrage, das wird immer wieder zerschossen. Konkret: wenn ich Code: @font-face { font-family: '<meineSchriftart>'; src: url('public/theme/fonts/<meinFontFile> eintrage und den Shop-Cache leere und die Seite neu lade, klappt es. Der Font wird korrekt referenziert, gefunden und dargestellt. Wenn ich dann nochmals via F5 die Shop-Seite neu lade, wird der Font plötzlich im Pfad "public/theme/styles/system/public/theme/fonts/<meinFontFile>" gesucht und natürlich nicht gefunden. Selbes Spiel, wenn ich Code: @font-face { font-family: '<meineSchriftart>'; src: url('./<meinFontFile> eintrage, wird beim ersten Neuladen direkt unterhalb der Shop-URL im Pfad "shopURL\<meinFontFile>" gesucht und beim zweiten Laden dann im Pfad "public/theme/styles/system/<meinFontFile>" Es gibt weitere Varianten, aber immer es kommt immer beim zweiten Laden der URL-Part "public/theme/styles/system/" mit dazu" und das schlägt natürlich fehl. Gibt's da einen Weg, das korrekt zu machen? Mach ich da was falsch? Oder ist das ein Bug? (Shop-Version ist Stand heute die aktuelle 4.5.2.2) Und um der Diskussion vorzugreifen, Webfonts kommen hier nicht in Frage, ich benötige Custom-Fonts, die nicht im Web erhältlich sind.
public/theme ist ein Cache - Verzeichnis. Wenn der Shop die Schrift in ,,,,/styles/system/ sucht, würde ich die einfach mal da ablegen. Also in themes/meinTheme/styles/system/ Wenn Du mal im Honeygrid schaust, dann gibt es in dem Verzeichnis z.B. /fontello/font/ - und hier die Schrift-Dateien mit den unterschiedlichen Endungen Es gibt aber auch noch eine .../fontello/fontello.scss Vielleicht hilft es, sich dieses genauer anzusehen.
Danke Barbara, sieht auf jeden Fall interessant aus. In der fontello.scss wird der Pfad aus einer Theme-Base-Variablen plus absoluten Pfaden eben nach /styles/system/ zusammengebaut: Code: src: url($theme-base-path + '/styles/system/.. Im Fall fontawesome erfolgt das ähnlich in der regular.scss sogar mit einer expliziten fontawesome-Variablen: Code: src: url('#{$fa-font-path}/fa-regular-400.eot'); Auch das ist alles andere als straight forward, aber vielleicht klappt's ja damit. Ich werd's mal versuchen...
Also für alle, die was Ähnliches machen wollen: Ich hab jetzt meine font-faces in der _usermod.scss deklariert und hab für die Pfadangaben die $theme-base-path-Variable verwendet und das diese dann (anders als in dem Beispiel oben) in den Pfad 'themes/<meinTheme>/fonts' gemappt, wo ich meine fonts hingelegt hab. Auch nach mehreren Cache-Leerungen und Neuladen im Browser blieb das stabil. Soll heißen, die $theme-base-path ist gegenüber dem Build von Gambio stabil und kann als Wurzelpfad verwendet werden und alles, was danach kommt, ist dann auch OK, d.h. wo und wie die Fonts dann in Ordnern unterhalb genau gespeichert werden können, bleibt Euch überlassen. Nachmal ein Komplettbeispiel dazu, wie gesagt in der _usermod.scss hinterlegt und meine Fonts liegen im Pfad 'themes/<meinTheme>/fonts': Code: @font-face { font-family: 'MeineFont'; src: url($theme-base-path + '/fonts/MeinFontFile.eot'); src: url($theme-base-path + '/fonts/MeinFontFile.eot?#iefix') format('embedded-opentype'), url($theme-base-path + '/fonts/MeinFontFile.woff') format('woff'), url($theme-base-path + '/fonts/MeinFontFile.ttf') format('truetype'), url($theme-base-path + '/fonts/MeinFontFile.svg#MeinFont_regular') format('svg'); font-weight: normal; font-style: normal; }