Externen Font lokal einbinden (im Theme Designer nicht angezeigt)

[Andi]

Hallo,

ich würde gerne den Google Font IBM ('IBM Plex Sans‘) einbinden, der nicht im Theme Designer verfügbar ist.

Meine Versionen:
Contao 4.13.4 / Eclipse 4.0.17

Meine bisherige Vorgehensweise (lt. Doku https://help.premium-contao-themes.c...e-fonts.html):

1.1 ThemeDesigner PRO
System > Einstellungen > Premium Contao Themes - ThemeDesigner - Einstellungen: Schriftarten nicht automatisch laden
Erledigt

1.2 Contao Seitenlayouts
Seitenlayouts > Webfonts > Google-Webfonts > Alle Schriften hier entfernen
Habe ich nicht gefunden
Dazu die Antwort auf den Forumsbeitrag „Webfonts nicht mehr im Seitenlayout?“ (https://forum.premium-contao-themes....m-seitenlayout) hat mir letztlich leider nicht geholfen.

2. Google Fonts & CSS Code einbinden
Erledigt
Übrigens: der Pfad in meiner customize.css lautet

`url('../fonts/ibm-plex-sans-v14-latin-regular.woff2‘)`

Ich hoffe, das ist korrekt.

Trotzdem wird die Schrift nicht verwendet / angezeigt.
Es fehlt wohl die Zuweisung des Fonts in der css-Datei des Theme Designers, oder? Dort aber ist der IBM-Font nicht aufgeführt.

Wie kann ich das Problem lösen?

Vielen Dank im Voraus für Tipps und Hilfe.
Andi

[Tim]

Hallo Andi,
Punkt 1.2 gibt es seit Contao 4.13 nicht mehr.

Gehen wir davon aus, dass alle Schriften via @font-face korrekt geladen werden, musst du noch die Elemente umstylen, die die neue Schriftart nutzen sollen. Die Schrift art IBM Plex Sans ist keine Standard-Schrift, die das System vorgestylt ausliefert.

[Andi]

Hallo Tim,

wie bzw. wo kann ich diese Elemente – es sind komplett alle – denn umstylen?

Bei meinem verwendeten Theme Business Coach finde ich beispielsweise in keiner css-Datei die vom Theme festgelegten Fonts "Spartan" und "Nunito Sans". Deshalb weiß ich leider nicht, wo ich umstylen könnte.

[tschero]

Moin,

wie Tim oben schon erwähnt hat: vorausgesetzt,die Schriften werden korrekt geladen, müsste doch ein einfaches Stylen per CSS möglich sein.

Ungeachtet der Spezifität auf Deiner Seite also ungefähr so:

body, h1, h2, h3, h4, h5, h6 {
font-family: "Dein-Fontname", Arial, Helvetica, sans-serif;
}

https://www.w3schools.com/w3css/w3css_fonts.asp

Funktioniert das bei Dir nicht?

Grüße
tschero

[Andi]

Hallo,

css kann ich, aber ich frage mich, wo genau (in welcher css auf dem Server) die Styles meines Themes festgelegt sind, beispielsweise dass h1 oder p einen bestimmten Font haben.

Zur Verdeutlichung:
Im Theme Business Coach sind vom Anbieter Seamedia Themes für

• die Headlines der Font "Spartan" und
• für den Fließtext der Font "Nunito Sans"

vorab eingestellt.

Ich würde gerne nachsehen, wie der css-code aussieht bzw. was genau alles gestylt wurde. So kann ich auch alles sauber ändern – und ggf. geändert in die customize schreiben.

In der styles.css sind die (per Theme festgelegten Fonts) aber nicht eingetragen. Und auch in allen anderen css-Dateien habe ich auch weder die "Spartan" noch die "Nunito Sans" gefunden. Trotzdem werden genau diese Schriften im Browser ausgeliefert.

Deshalb meine Frage: in welcher css und in welchen Verzeichnis finde ich bitte die beschriebenen styles?
Danke im Voraus.

Viele Grüße
Andi

[tschero]

Ich würde gerne nachsehen, wie der css-code aussieht

Was ist mit den Entwicklerwerkzeugen des Browsers?

Grüße,
tschero

[tschero]

Wenn noch nicht gemacht, speichere mal im Themedesigner Deine Einstellungen so ab, dass auch die gewünschten Fonts ausgewählt sind.
Dann findest Du im folgenden Verzeichnis die von Themedesigner erstellten *.css Dateien.

files/cto_layout/themedesigner/css/

Darin sind dann auch die Styles für den Font enthalten.

Grüße,
tschero