Neu Google Schriftart in NovaChild einbinden

[mike139]

Hallo zusammen,

ich möchte gerne die Schriftart "Anton" in meinen Testshop einbinden nur leider komme ich nicht drauf was ich genau falsch mache.

Ich habe mir die anton-v25-latin-regular.woff2 Datei runtergeladen und hier abgelegt:
SHOP/templates/NovaChild/themes/base/fonts/anton-v25-latin/anton-v25-latin-regular.woff2

Dann habe ich folgendes:
/* anton-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: 'Anton'; font-style: normal; font-weight: 400; src: url('../../../NOVAChild/themes/base/fonts/anton-v25-latin/anton-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }

in diese Datei gespeichert:
SHOP/templates/NOVAChild/themes/my-nova/my-nova.css

Leider wird mir die Schriftart nicht angeboten. Was mache ich falsch?

Vielen lieben Dank schon mal

Schöne Grüße

 

[css-umsetzung]

Da gehört das nicht rein, die css Dateien werden ja durch das compilen der scss Dateien erstellt.

Das machst du in der _critical.scss Datei damit es schnellstmöglich da ist und musst darauf achten das die Pfade dann auch stimmen, vermutlich könntest du das auch in der Template Konfiguration im Backend eintragen, das nutze ich aber nicht, daher hier der Weg über die scss Dateien.

Dann musst du das Theme auch compilen, ich hab vorhin zwar gelesen das es nicht mehr nötig ist, aber das glaube ich erst wenn ich es gesehen habe.

Zusätzlich solltest du das auch in der header.tpl einbinden damit der font direkt geladen wird.

header.tpl:

{block name='layout-header-head-resources-preload' append}
        <link rel="preload" href="{$ShopURL}/{$currentTemplateDir}themes/base/fonts/anton-v25-latin/anton-v25-latin-regular.woff2" as="font" crossorigin/>
{/block}

 

[mike139]

Hallo zusammen,

ich habe es jetzt endlich lösen können

Vielen Dank an alle die mir geholfen haben.

Voraussetzung: Die Font-Dateien an der richtigen Stelle ablegen!

In der mynova.scss

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('../../../NOVAChild/themes/base/fonts/anton-v25-latin/anton-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  src: local(''),
    url('../../../NOVAChild/themes/base/fonts/anton-v25-latin/anton-v25-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

In der variables.scss

$font-family-sans-serif:            Anton !default;
$font-accent:                       Anton !default;
$product-titel:                     Anton !default;

Und in der header.tpl den Eintrag hinzufügen wie oben von css-umsetzung geschrieben.

Dankeschön

 

[froot]

Ich versuche gerade ein ähnliches Problem zu lösen.
Ich sehe aber keine _critical.css, nur

/themes/my-nova/my-nova_crit.css
/themes/my-nova/sass/my-nova_crit.scss
/themes/normal/normal_crit.css
/themes/normal/sass/normal_crit.scss
/themes/xmas/xmas_crit.css
/themes/xmas/sass/xmas_crit.scss

Ich hab bisschen ein Durcheinander, weil ich folgende Ordner habe, ein bisschen Erklärung würde mir hier sehr helfen.
Es gibt den NOVA/ und den NOVAChild/ Ordner, in den ich nur die Dateien verschiebe, die vom Original abweichen, richtig?
Und im NOVAChild/ Order hab ich einen themes/ Ordner, und in diesem befinden sich…

/themes/base/
/themes/my-nova/
/themes/normal/
/themes/xmas/

"xmas" hatte ich selbst erstellt, 3x dürft ihr raten wofür…
Was wird jetzt für den Rest des Jahres verwendet? base/? oder ist das eine Basis für alle anderen themes und Ganzjahr ist "normal"? oder "my-nova"? Es kann auch sein, dass ich "my-nova" irgendwie zum Testen damals erstellt hatte und dann aber mit normal weitergefahren bin.

Ich glaube meine Frage lautet hier konkret: Was überschreibt hier was? Welche Dateien werden quasi nur eventuell/optional und welche werden immer geladen?

Danke!

 

[froot]

Ich werde hier noch wahnsinnig… Hab alles versucht, die Fonts lassen sich einfach nicht im Frontend anzeigen in FireFox und Safari.
Komischerweise in Chrome funktioniert es immer, auch wenn ich was Neues probiere und etwas ändere.

Hier die Fehlermeldung von Safari:

The resource https://www.arslibri.lu/templates/N...nts/Josefin_Sans/woff2/JosefinSans-Bold.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

Kann mir jemand helfen?