Neu NOVA > Wie eigene Fonts im Child-Theme einbinden

[Ralf Römling]

Moin Zusammen,
wir möchten die Fonts im Shop ändern und updatesicher speichern. Die Dateien liegen jetzt in /NOVAChild/fonts/sub/font.woff und ich kann sie per css einbinden.

Ich hab' aber gerade gesehen, das es für die shop-weite Definition auch Variablen im Parent-Theme "Clear" gibt.

Wie wäre der korrekte Weg, die neuen Schriften darüber zum implementieren?

Viele Grüße,
Ralf

 

[mastertango]

ich habe es in der my-nova so gemacht

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html, body, h1, h2, h3, h4, h5, h6, table, td, tr, div {  font-family: 'Roboto','Open Sans','sans-serif' !important }

 

[Ralf Römling]

Danke, aber das meinte ich mit "kann ich per css einbinden".

Ich würd' gern wissen, ob und wie man die in einem Child über Variablen nutzt (vgl. Anhang)

 

[mastertango]

Benutzt du das Plugin JTL-Theme Editor? Dort würde ich das dann einfach in die _variables.scss einbinden

 

[Ralf Römling]

So sieht's aus. Aber wie? Das ist ja genau meine Frage.

Update: Hab's rausgefunden: Einfach das Code-Snippet nehmen und die im Child hinterlegten Schriften eintragen. Done.

 

[mastertango]

das leben kann so einfach sein 🙂

 

[AMP-Agentur]

Also im CSS wird wir die Schriftart jertzt als Accent angezeigt, aber anscheinend nicht geladen.
Muss ich das nochmal separat laden?

Ich habe folgende Anweisung in der my-nova.scss eingebunden. Geht nicht.

@include font-face('Oswald', $nova-theme-path: + '/base/fonts/oswald/oswald-v40-latin-400', 'Oswald' 'Oswald', normal, 400,'',woff2 ttf);

Fehler gefunden. Es gibt Oswald nicht in der Stärke 400. Ausgerechnet 400 wird ausgelassen.

 

[holzpuppe]

Hallo in die Runde:
Ich habe da auch so ein Problemchen mit Schriften.
Ich möchte vom Theme-Stil her es so angehen und ablegen wie das NOVA-Theme angelegt ist.
Für die Schrift bedeutet es, ich möchte diese nicht in die my-nova.scss ablegen, sondern in die fonts.scss

Bis jetzt habe ich folgendes erledigt:

my-nova.scss
$h1-font-size:                      rem(30px) !default;
$h2-font-size:                      rem(24px) !default;
$h3-font-size:                      rem(16px) !default;
$h4-font-size:                      $font-size-base !default;
$h5-font-size:                      $font-size-base !default;
$h6-font-size:                      rem(16px) !default;

variables.scss
// -------------------Beginn eigene Variablen----------------------------------
$fa-font-path:                      "../../base/fonts" !default;
$font-family-serif:                 'IMFellPrimer', serif !default;
$font-family-sans-serif:            'GrenzeGotisch', sans-serif !default; (die ist grottig und fliegt wieder raus. xD)
$font-accent:                       'FellPrimerSC', Palatino, Georgia, Times, serif !default;

// -------------------Ende eigene Variablen----------------------------------

// Lädt clear-Variablen
@import '../../../../NOVA/themes/clear/sass/variables';

// passt die Pfade an
$child-theme-path:                  "../../../SpiritusSanktus/themes";
$nova-theme-path:                   "../../../NOVA/themes";
$fa-font-path:                      "../../../NOVA/themes/base/fontawesome/webfonts";

und nun die Krux (hier habe ich es auch mit einer Schrift die 1:1 aus der fonts.scss des Clear-Themes genommen wurde getestet)

fonts.scss
//fonts
@include font-face('IM Fell Primer', $child-theme-path + '/base/fonts/IMFELLPrimer/im-fell-great-primer-v12-latin-regular', 'im-fell-great-primer-sc-v12-latin-regular',woff2 ttf);
@include font-face('IM Fell Primer Italic', $child-theme-path + '/base/fonts/IMFELLPrimer/im-fell-great-primer-v12-latin-italic', 'im-fell-great-primer-v12-latin-italic',woff2 ttf);
@include font-face('IM Fell Primer SC', $child-theme-path + '/base/fonts/IMFELLPrimer/im-fell-great-primer-sc-v12-latin-regular', 'im-fell-great-primer-sc-v12-latin-regular',woff2 ttf);

@include font-face('Open Sans', $nova-theme-path + '/base/fonts/opensans/open-sans-regular', 'OpenSans-Regular' 'OpenSans-Regular', normal, 400);

Das funktioniert in der fonts.scss nicht.
Ich erhalte die Fehlermeldung:
Undefined mixin font-face: line: 2, column: 1

Ich werde da nicht schlau draus, theoretisch hätte das doch funzen müssen.
Kann mich da jemand erleuchten?🙈