Bottstrap-Barrio mit lokal ausgelieferten Schriften
Eingetragen von Hasenrupfer (3)am 06.02.2021 - 04:03 Uhr in
Hallo Drupalgemeinde,
mein erster Post in diesem Forum. Erstmal DANKE, dass Ihr alle da seid :-) Seit ca. 5 Wochen arbeite ich mich Schritt für Schritt in Drupal ein. D.h.: ich versuche es. Ist wirklich mächtig und erschlägt einen Newbie wie mich erstmal. Aber mit eisernem Willen :-) und genügend LockDown-Zeit (Gastronomie) bleib ich am Ball.
Nachdem ich mehr und mehr verstehe, wie was zusammenhängt und auch schon erste Erfolge verzeichnen konnte, wollte ich, bevor ich an Entitäten, Taxonomien und Inhalte gehe mein Theme so aufstellen, dass ich es zusammen mit dem Layoutbuilder zum Erstellen nutzen kann. Ich habe mich für Bootstrap-Barrio ohne Sass entschieden. Subtheme-Erstellung, die styles.css und colors.css hab ich soweit verstanden und ziemlich im Griff.
Woran ich jetzt hänge ist, dass ich die Schriften und die Awesome-Librarie gerne aus DSGVO-Gründen lokal ausliefern möchte. Ich habe viel gelesen und Anleitungen gefunden, wie ich bei Barrio eine neue Schrift hinzufüge (via googleapis), wie ich in Drupal eine neue Schrift hinzufüge (via @Font.....) kriege es aber nicht hin, Barrio durch Einstellungen in den YML-Dateien zu veranlassen meine lokale Schrift zu nehmen.
Meine Frage(n) nun:
- Hat das jemand schonmal gemacht
- Macht das überhaupt so Sinn, oder soll ich die Themesettings einfach auf "Keine" stellen und irgendwie versuchen eine Fonts.css zu basteln und die dann Barrio nahebringen
Eigentlich reicht mir für unsere Restaurant-Seite die Schrift Arial, müsste aber dennoch eine Schrift (für unseren Firmennamen) als Fontpack erstellen und mitliefern. Ansonsten bräuchte ich nur noch FontAwesome, was aber auch über das Modul und den CKEditor gelöst werden könnte.
Beim Stöbern bin ich darüber gestolpert, dass Barrio eventuell eine Inkompatibiltät mit dem Layoutbuilder hat oder vielmehr hatte.
- Weiss jemand ob das schon gelöst ist. Habe zwar viele Issues dazu auf Drupal.org gelesen, konnte aber den aktuellen Stand nicht herausfinden.
Möchte ungern wenn ich da ankomme wieder von Vorne anfangen müssen.
Bin für jeden Tip dankbar, vielleicht kann mich ja jemand mit Erfahrung aufs richtige Pferd setzen.
Drupal 8.9.12 und Bootstrap-barrio-5.1.4
- Anmelden oder Registrieren um Kommentare zu schreiben
Zum Layoutbilder kann ich
am 06.02.2021 - 17:50 Uhr
Zum Layoutbilder kann ich nichts sagen, ich nutze Barrio mit Paragraphs ohne Probleme und sehr gerne.
Das mit den Schriften ist eigentlich ganz einfach und funktioniert bei jedem Theme und bei Drupal und Wordpress ect. immer gleich.
1. Du gehst auf die Seite https://google-webfonts-helper.herokuapp.com/fonts und suchst die Google Web Font Deiner Wahl, z.B. Lato:
https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin
2. Du hakst an, welche Schriftstärken, bzw. Auszeichnungen Du benötigst:
Dann wird automatisch das CSS erstellt, dass Du in Deine style.css packst.
Hier z.B. regular, 300, 700:
/* lato-300 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url('../fonts/lato-v17-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lato-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v17-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v17-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato-v17-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v17-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url('../fonts/lato-v17-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lato-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v17-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v17-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
3. Auf der Seite unter Punkt 4. Download files: wird Dir die entsprechende ZIPP Datei mit den nötigen Schrift-Dateien generiert:
In unserem Beispiel https://google-webfonts-helper.herokuapp.com/api/fonts/lato?download=zip...
Das enzippte schiebst Du in Dein Custom Barrio Subtheme in einen Ordner namens fonts, den Du Dir erstellst.
Dann musst Du evt. in der style.css die relativen Pfade so anpassen, dass sie stimmen.
4. jetzt kannst Du in der style.css z.B. schreiben
body{font-family:'Lato';
}
Ich teste dann immer noch mal mit den Entwicklertools von FireFox oder Chrome im Punkt Netzwerk, ob da Fehlermeldungen bezüglich nicht gefundener Schrift erscheinen.
Und natürlich siehst Du schon mit geübtem Auge, ob die richtige Schrift verwendet wird.
Andernfalls noch mal die Pfade kontrolleiren.
LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de
Danke
am 06.02.2021 - 22:23 Uhr
Hallo Regina,
vielen lieben Dank für deine rasche und sehr ausführliche Antwort.
Genau so werd ich es sobald als möglich versuchen und in Angriff nehmen. Ich war mir nur nicht ganz so sicher, ob dann nicht die Navbar des Barrio rumzickt. Für die spezielle Schrift werd ich wohl ein Font-Pack selbst erstellen müssen. Sie ist zwar lizenzfrei, aber halt nicht bei Google. Hab beim Stöbern gelesen, dass man sowas machen kann.
Hab heute das andere CDN Thema von Barrio lösen wollen und dann die Font Awesome Library nach dieser Anleitung heruntergeladen, lokal aufgespielt und dann mit dem CKEditor verbunden.
Hat super funktioniert, aber halt nur so lange, bis ich festgestellt haben, dass es mir dann bei jedem Speichern im Editor die Werbezeile "Font Awesome fontawesome.com" dahinterschreibt. Wenn ich das nicht loswerde, muss Font Awesome sterben.
Den Rest des Tages hab ich damit zugebracht den CKEditor zu tunen, hab ebenfalls beim Stöbern entdeckt, dass der ja noch ganz viel mehr kann (siehe Bild).
Danke Dir
Super, an eigene Schrift habe
am 07.02.2021 - 00:32 Uhr
Super, an eigene Schrift habe ich mich noch nicht getraut.
Zu Font Awesome: Das habe ich so gut wie in jedem projekt im Einsatz.
Ich verwende das Modul https://www.drupal.org/project/fontawesome, das zusätzlich die Library erfordert.
Meinst Du das?
Die Installation mache ich nur noch mit Composer.
Es ist jedes Mal Fummelei bis, es klappt.
Ich hatte mit der Verwendung von SVG totale Performance-Probleme im Backend bis hin zur totalen Unbedienbarkeit.
Die Einstellung "Webfonts mit CSS" funktioniert aber.
Ich habe Haken gesetzt bei "CSS-Pseudoelemente zulassen?", weil ich oft Icons in Kombi mit CSS:bevor / after verwende.
Natürlich nehme ich den Haken hier weg " Externe Datei (CDN) / lokale Datei verwenden?"
Beim Einbinden der icons via CSS habe ich nur so Erfolg:
font-family: "Font Awesome 5 Free";
font-weight: 600;
Ich habe auch mal Font Awesom im CKEditor verwendet auf diese Weise:
https://www.drupal.org/docs/8/modules/font-awesome-icons/using-font-awes...
Die von Dir genannten Probleme, dass der Werbesatz dahinter steht, kann ich nicht bestätigen. Das geht natürlich nicht.
LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de
Hallo Regina.Du sagtest:
am 08.02.2021 - 21:05 Uhr
Hallo Regina.
Du sagtest: "weil ich oft Icons in Kombi mit CSS:bevor / after verwende" :-) Klingt erstmal für mich nach einer guten Idee, da muss ich aber noch ein bisschen lernen damit ich es in Gänze verstehe. Font-Awesome habe ich auf die gleiche Art eingebunden wie Du und auch die Library lokal gehalten.
Hab jetzt für den CKEditor herausgefunden:
Hab versucht das Java-Script aufzudröseln, welches den Werbetext anfügt, hab die Zeichenfolge auch gefunden und testweise durch was Anderes ersetzt, hat aber nicht wirklich geklappt. Ich bleib jetzt bei Library lokal und "Webfonts mit CSS" und gut ist.
Das Einbinden der Schriften hat nach Deinem Tipp super geklappt. Hab nun eine neue fonts.css gebastelt und diese über themename.libraries.yml eingebunden. Da stehen die Links zu den font-Dateien und die Zuordnungen drin, klappt hervorprima, VIELEN DANK.
Für die Schriften musste ich ein Weilchen suchen, bis ich eine (hoffentlich) lizenzfreie gefunden habe, die der die ich brauche am meisten ähnelt. Das hab ich online hierüber gemacht (FontFinder)
Wenn man die hat, kann man sich hier bei FontSquirrel ein Webfontkint basteln, indem man die ttf-Datei(en) hochlädt. Es erstellt unter "Advanced" die .eot, .svg, .woff und die woff2. Danach muss man die einzelnen Bestandteile in die eigene fonts.css reinklöppeln, anpassen und die entsprechenden Dateien wie bei googlefonts ins entsprechende font-Verzeichnis kopieren.
Danke nochmal für Deine Hilfe :-)
Hasenrupfer schrieb Ich
am 08.02.2021 - 22:15 Uhr
Ich bleib jetzt bei Library lokal und "Webfonts mit CSS" und gut ist.
Ja, wie geschrieben, mit SVG war bei mir sowieso eine Performance-Katastrophe.
Da hatte ich wohl Glück, dass ich das vor der Einbindung im CKEDitor so eingestellt hatte, sonst wäre ich vermutlich auch über dieses Werbe-Problem gestolpert. ;-)
Aber insgesamt schon sehr geniale Sache mit Font Awesome.
LG Regina Oswald
-------------------------
Montviso - Internetdienstleistungen
http://www.montviso.de