Local Fonts via Child Template einbinden

Hallo zusammen,

ich verzweifle derzeit ein wenig wg. der Einbindung von Local Fonts in Joomla 4 Cassiopeia, da der Fonts im Frontend nicht dargestellt wird. Kann das irgendwie mit dem Child Template zusammenhängen?

Mein Setup ist wie folgt. Ich habe vom Cassiopeia Default Template ein Child Template angelegt.

Den Fonts-Ordner habe ich dann unter media/template/site/cassiopeia_child/fonts angelegt. Die user.css liegt unter media/template/site/cassiopeia_child/css/user.css. In der user.css verweise ich mit nur einem Punkt und nicht zwei Punkten auf den runtergeladenen Fonts: src: url('./fonts/open-sans-v29-latin-regular.eot')

Trotzdem bewegt sich in der Darstellung gar nichts. Im Backend von Joomla habe ich bei cassiopeia_child immer noch unter Schriften Schema Robot (local) ausgewählt, was eigentlich nicht stören sollte, oder? Was sollte man sonst auswählen?

Unter dem Cassiopeia Template habe ich natürlich nichts integriert, da dieses bei Updates überschrieben wird und es ja deshalb die Child Templates gibt.

Was mache ich hier noch falsch bzw. was muss ich ändern, so dass das runtergeladene Local Fonts im Frontend angezeigt wird?

Vielen Dank Euch.

Chris

Zitat

2 Punkte => eins hoch und von dort aus /fonts

Danke, aber was soll eins hoch für Dich im Pfad media/template/site/cassiopeia_child/fonts exakt heisen?

Zitat

Code

src: url('../fonts/open-sans-v29-latin-regular.eot')

Diese Variante hatte ich natürlich auch schon getestet, aber trotzdem wird der Fonts im Frontent nicht angezeigt. Deshalb meine Frage, ob es ggf. einen Zusammenhang zum Child Template gibt.

Also, die "Punkte-Thematik" allein kann es nicht sein.

Anbei auch noch einmal der Code, wie ich diesen in user.css eingebunden habe:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
  color: #333333
}

Nein, habe ich lokal aufgebaut.

Eine Frage, um hier mit meiner Vermutung aufzuräumen.

Alles (user.css / fonts-Ordner) ist im Child Template zu integrieren. Das Cassiopeia Default Template spielt hier keine Rolle, richtig?

Im Backend kann ich weiterhin die Einstellung auf Schriften Schema Robot (local) belassen, korrekt?

Hi Stef,

ist das eine Frage?

Ich nehme jeden Code der funktioniert. Habe diesen Code gemäße Anleitung erzeugt und die user.css integriert.

Du hast ja zu meinem Code nichts geändert, oder?

Chris

habe jetzt statt:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
  color: #333333
}

Deinen Code:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot');
}

body {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
  color: #333333
}

in die user.css eingefügt, aber keine Änderung bzw. Effekt?!?

Also,

ich habe jetzt noch einmal den aktuellen Fonts-Satz heruntergeladen und dabei auch eine Änderung des Integrationscodes für die user.css erhalten:

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Open Sans', Arial, sans-serif, Roboto;
  color: #333333
}

So funktioniert es jetzt auch. Alles ist im Child integriert. Ich wollte dieses Thema teilen, so dass jeder einen Hinweis hat, sollte man einmal vor der dem selben Problem stehen.

Chris:

PS: Open Sans 16px funktioniert jetzt sieht wie gesagt, sieht aber für eine Website gar nicht so toll aus. Gibt es Ideen für ein Fonts, welche sich für eine Website gut eignet, wenig Ressourcen verschlingt und auch noch gut aussieht? Danke für Eure Vorschläge.

Zitat

Roboto Fonts

...na toll, dann kann ich mir das lokale integrieren von Fonts gleich sparen