Theme: Malibu Hallo, ich habe mir einen Googlefont lokal eingebunden. So weit, so gut - funktioniert auch. Wie habe ich das gemacht? In meinem Child-Verzeichnis /gambio/themes/MyChild/ habe ich ein Unterverzeichnis /font angelegt, und die beiden Font-Dateien .ttf und .woff2 dort abgelegt. Die beiden Schriftdateien liegen also im Verzeichnis /gambio/themes/MyChild/fonts/ Wie schon geschrieben, es funktioniert, ist aber wohl so nicht richtig. Meine Frage, in welches Verzeichnis gehören die beiden Schriftdateien richtigerweise rein kopiert? Kann mir da jemand einen Tipp geben? Ich habe die Schrift nicht über StylEdit eingebunden, sondern über meine eigene .css-Datei: Code: @font-face { //font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Alex Brush'; font-style: normal; font-weight: 400; src: local('Alex Brush'), url('http://127.0.0.1/gambio/themes/malibu_lokal_test/fonts/alex-brush-v22-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('http://127.0.0.1/gambio/themes/malibu_lokal_test/fonts/alex-brush-v22-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ }
Nachtrag: Ich habe schon gelesen, dass die Dateien ins Root-Verzeichnis gehören, nur gibt es das im Root-Verzeichnis nicht. Ich habe auch den Thread (Link nur für registrierte Nutzer sichtbar.) gelesen, aber die Fonts in die public zu setzen ist auch nicht richtig - diese wird ja erst generiert und nicht dauerhaft, Dominik Späte sagte es ja auch. Ich werde das mal wie Peter im Beitrag geschrieben hat probieren, ein Font Verzeichnis im Root anlegen - erscheint mir aber nicht die optimale Lösung. Wichtig ist, dass die Dateien, wenn man sie dann an richtiger Stelle abgelegt hat, im Verzeichnis /publiv/fonts/ erscheinen. In meinem Fall erscheinen sie dort nicht. Sorry, hätte kein neues Thema aufmachen sollen, hätte mich an das Thema (Link nur für registrierte Nutzer sichtbar.) drabhängen solle.
Ich habe das mal getestet. Ich habe im Rootverzeichnis das Unterverzeichnis /fonts angelegt, und dort die beiden Dateien (.ttf/.woff2) abgelegt, mit Linkadresse in der .css Datei. Fazit: Das ist auch nicht richtig. Die Schriften müssten jetzt im Verzeichnis /publiv/fonts/ erscheinen - tun sie aber nicht. Also, die Frage ist weiterhin, wo müssen die Schrift-Dateien hingeschoben werden, damit sie im public/font-Verzeichnis erscheinen. Natürlich alle Caches ordnungsgemäß gelöscht. Nachtrag: Die Schrift wird im Shop wie gewollt angezeigt, auch die Fallback-Lösung funktioniert prima. Aber es ist nicht sinnig, das die Schrift via. Link-Adresse geladen wird, sie sollte aus der /public/fonts geholt werde, wo sie eben nicht ist. Das Thema Schriften ist ein beliebtes Thema, oft thematisiert, aber auf meine Frage habe ich keine Lösung gefunden - vielleicht kann Gambio ja mal was dazu sagen.
hey, ich hatte hier mal beschrieben wie es geht: Frage zu google Fonts Beachte aber auch: Frage zu google Fonts
Peter - ich habe das gelesen. Dann schau doch bitte mal, ob Deine Fonts auch in der /public/fonts stehen, ich bezweifel das. Zudem frage ich mich auch, warum stehen darin nur die .ttf Dateien, und nicht die .woff Dateien, oder gibt's die nicht, sollte mich schwer wundern. Meine Frage ist also nicht, wie binde ich lokal Fonts ein, das funktioniert, sondern wo lege ich die Font-Dateien ab, damit sie im Verzeichnis /public/fonts/ generiert werden. Ob man die Fonts ins Root-Verzeichnis legt, wie Du es gemacht hast, oder unter sein eigenes Child-Verzeichnis, spielt keine Rolle - solange der Link in der .css-Datei stimmt. Aber wie gesagt - sie erscheinen nicht in der public.
755 Siehst Du deine eigenen Schriften (.ttf/.woff) im Ordner /puclic/fonts? Mal auf jede Datei im Ordner doppelklicken, dann siehst Du die Schrift. Man kann auch in der log Datei des Hosters sehen, woher die Fonts geladen werden.
Peter, es wird wohl keinen Ordner geben, in den man die Schriften reinkopieren kann, wo sie dann auch in den /puclic/fonts erscheinen. Die bessere Möglichkeit ist es, zusätzliche Schriften im SE einzufügen. Das kann man entwerder in "Grundlagen - Typografie - Google-Webfonts-Url" machen, oder in "Bereiche - Allgemein - Schrift - Google-Webfonts-Url"; das ist egal, beide Eingabefelder korrespondieren miteinander. In Deinem Fall sähe die EIngabe so aus: Code: "https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700,900|Baloo+2:500,600,700,800" In der .css-Datei (/puclic/fonts/) siehst Du dann Deine Fonts mit den Links auf das /font-Verzeichnis aufgelistet, Code: @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500; src: url(http://127.0.0.1/gambio/public/fonts/wXK0E3kTposypRydzVT08TS3JnAmtdgozZpo_lI.ttf) format('truetype'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 600; src: url(http://127.0.0.1/gambio/public/fonts/wXK0E3kTposypRydzVT08TS3JnAmtdjEyppo_lI.ttf) format('truetype'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; src: url(http://127.0.0.1/gambio/public/fonts/wXK0E3kTposypRydzVT08TS3JnAmtdj9yppo_lI.ttf) format('truetype'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; src: url(http://127.0.0.1/gambio/public/fonts/wXK0E3kTposypRydzVT08TS3JnAmtdiayppo_lI.ttf) format('truetype'); } @font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 300; src: url(http://127.0.0.1/gambio/public/fonts/va9B4kDNxMZdWfMOD5VnPKreRhf_.ttf) format('truetype'); } ... usw. die .ttf Dateien sieht man in dem Verzeichnis selbstverständlich auch, mit den verschiedenen Schriftdicken. Wenn man nicht alle Schriftstyles benötigt, nimmt man nur die, die man verwenden möchte, zum Beispiel 500. In dem Beispiel "Baloo+2:500,600,700,800" wären das aber 4 .ttf Dateien. In den eigenen Styles benötigt man dann logischerweise nicht mehr den Link auf die Schriftdatei: Code: @font-face { . . font-weight: 400; src: local('Alex Brush'), url('http://127.0.0.1/gambio/themes/malibu_lokal_test/fonts/alex-brush-v22-latin-regular.woff2') format('woff2') . ... } der ist überflüssig. Die Schriftdateien werden zwar mit "(Link nur für registrierte Nutzer sichtbar.)" vom Gambio-Shop von Google herunter geladen, dass passiert zum Beispiel nach dem Löschen des Caches automatisch, aber danach ist Ruhe, sie liegen ab jetzt im /public/font/ Verzeichnis. Das heißt, bei einem Aufruf des Shops gibt es keine Verbindung mehr zu Google, es werden also keine Shopbesucher-Daten übermittelt. In "Grundlagen - Typografie - Schriftart" kann man dann auch die eigenen hinzugefügten Schriften sehen. Prinzipeill kann man sagen, Schriften selber in irgend ein beliebiges Verzeichnis zu kopieren und in der eigenen .css-Datei den Link darauf zu machen ist nicht falsch. Die Schriften werden dann aus dem Verzeichnis geladen, egal wo es liegt, oder wie es heißt, nur der Link darauf muss stimmen. Das Problem was ich aber noch sehe, wie läd man die .woff Datei, damit sie in das /public/font/ - Verzeichnis geschubst werden, denn bei der obigen Vorgehensweise werden nur .ttf Dateien eingebunden. Hm?
ok... bei all meinem Bestrebungen geht es mir vorrangig um eins: Funktionalität. Mir erschließt sich immer noch nicht ganz wieso Du unbedingt die gambio Ordnerstruktur beibehalten willst. Da ist seitens gambio noch Nachbesserungsbedarf. Hast Du in meinem Beitrag im anderen Topic gesehen, dass ich eine eigene .css Datei erstellt habe, worüber ich die woff Dateien einbinde? https://diekleinegeschenkidee.de/fontbase/baloo-2.css Im SE brauchst Du dann nur Code: @import url('https://diekleinegeschenkidee.de/fontbase/baloo-2.css'); Da kann es doch in Pusemuckl liegen - Hauptsache Datenschutz gewährleistet (kein google Server) und funktioniert. LG
Vielen Dank für Deine Antwort. Ja, genauso hatte ich es auch gemacht, mit .ttf und .woff (mein Code steht oben in meinem Eingangsthread). Ich wollte aber weg davon und das SE nutzen, um die Fontdateien in die /public zu bekommen, funktioniert über den SE aber nur mit den ttf-Dateien. Vielleicht splitte ich das ja, ttf über den SE Code: "https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700,900|Alex+Brush", und die .woff Datei via. .css-Datei mit Code: ... ... "src: local('Alex Brush'), url('http://127.0.0.1/gambio/themes/malibu_lokal_test/fonts/alex-brush-v22-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */". Die Schriftdatei .woff liegt dann in "/gambio/themes/malibu_lokal_test/fonts/, sieht man ja oben. Viele Grüße Bernd