Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Anfängerfragen ›

Bottstrap-Barrio mit lokal ausgelieferten Schriften

Eingetragen von Hasenrupfer (3)
am 06.02.2021 - 04:03 Uhr in
  • Anfängerfragen
  • Drupal 8.x

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

‹ Anfängerfragen über Daten sammeln und verwalten Bottstrap-Barrio mit lokal ausgelieferten Schriften ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Zum Layoutbilder kann ich

Eingetragen von montviso (2042)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Danke

Eingetragen von Hasenrupfer (3)
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

AnhangGröße
neu-1.png 61.23 KB
  • Anmelden oder Registrieren um Kommentare zu schreiben

Super, an eigene Schrift habe

Eingetragen von montviso (2042)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hallo Regina.Du sagtest:

Eingetragen von Hasenrupfer (3)
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:

  • Der Werbetext kommt, wenn man die Library lokal installiert hat und die Graphik über "SVG mit JS" einbindet.
  • Verwendet man hingegen "CDN" und "SVG mit JS" kommt der Text nicht.
  • Verwendet man die Library lokal und bindet über "Webfonts mit CSS" kommt er ebenfalls nicht

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 :-)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hasenrupfer schrieb Ich

Eingetragen von montviso (2042)
am 08.02.2021 - 22:15 Uhr
Hasenrupfer schrieb

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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Suche Upgradeempfehlungen einer existenten Drupal7 Site auf 9/10?
  • Develop Custom Field in Views
  • Wie View mit einem Array von ids filtern?
  • Wie befülle ich den Cache automatisch? [gelöst]
  • [gelöst] "EntityMetadataWrapperException: Invalid data value given." für Datum-Feld in Webform
  • Wie kann man die Ansicht der Benutzer erweitern?
  • Paragraphs - mit drei Sprachen, die nicht immer alle übersetzt werden können.
  • Wie path/url_alias in views anzeigen?
  • Drupal 9 - PHP 8 - Modul funtkioniert nicht mehr
  • Timestamp wird in views falsch interpretiert
  • Google Fonts Drupal 7 Porto Theme
  • datetime_range Fehlermeldung bei update.php
Weiter

Neue Kommentare

  • Bei Strato kann man doch
    vor 3 Tagen 22 Stunden
  • Fehlercode: SSL_ERROR_NO_CYPHER_OVERLAP
    vor 4 Tagen 2 Stunden
  • Was ist denn
    vor 5 Tagen 8 Stunden
  • Ohne das jetzt sicher zu
    vor 5 Tagen 8 Stunden
  • Kann es sein, dass das zweite
    vor 5 Tagen 9 Stunden
  • Da gibt es ehrlich gesagt
    vor 5 Tagen 20 Stunden
  • [gelöst] "EntityMetadataWrapperException: Invalid data value giv
    vor 5 Tagen 22 Stunden
  • Wie oben geschrieben, habe
    vor 6 Tagen 19 Stunden
  • php konsole und web interface
    vor 1 Woche 3 Stunden
  • PHP unterschiedliche Version des Providers
    vor 1 Woche 5 Stunden

Statistik

Beiträge im Forum: 247931
Registrierte User: 19621

Neue User:

  • Davidenabs
  • climtarmut
  • VerifproMi

» Alle User anzeigen

User nach Punkten sortiert:
wla9218
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association