Neu Schriftarten/ Fonts auf der kompletten Webseite anpassen

[katercarlosix7even]

GuMo,

ich komme gerade nicht weiter mit unserer individuellen Template-Anpassung.
Wir versuchen, die Schriftart in unserem Shop vollständig zu aktualisieren. Hierfür haben wir ein Google Font "Jost" heruntergeladen und an der folgenden Stelle abgelegt:

/public_html/templates/NOVA/themes/base/fonts/jost/Jost-Italic-VariableFont_wght.ttf
/public_html/templates/NOVA/themes/base/fonts/jost/Jost-VariableFont_wght.ttf

Und in meinem NOVAChild in der my-nova_crit.scss habe ich folgende Variable hinzugefügt:

body {
    font-family: 'Jost','Open Sans', sans-serif !important;
}

.text-accent, .productbox-price, .tab-navigation .nav-link {
    font-family: 'Jost','Open Sans', sans-serif !important;
}

Und wenn ich mit Google Chrome dann die Webseite untersuche, erscheint im Quellcode auch das richtige "meiner Meinung nach".:

body {
    font-family: "Jost", "Open Sans", sans-serif !important;
}

Kann mir jmd. sagen wo ich den Fehler gemacht habe?

VG
Micha

 

[css-umsetzung]

SO ziemlich alles,

da gehört weitaus mehr dazu als nur zu sagen das du einen Font hast.

dazu solltest du in der header.tpl den font vorladen, dann solltest du diesen in der variables im child, über die font Variablen angeben und auch noch ein fontface erstellen.

Das wirst du, vermutlich nicht selbst hinbekommen.

 

[katercarlosix7even]

SO ziemlich alles,

da gehört weitaus mehr dazu als nur zu sagen das du einen Font hast.

dazu solltest du in der header.tpl den font vorladen, dann solltest du diesen in der variables im child, über die font Variablen angeben und auch noch ein fontface erstellen.

Das wirst du, vermutlich nicht selbst hinbekommen.

Ich habe jetzt in die header.tpl folgendes in Zeile 298/299 folgendes eingefügt:

                <link rel="preload" href="{$ShopURL}/{$templateDir}themes/base/fonts/jost/Jost-VariableFont_wght.ttf" as="font" crossorigin/>
                <link rel="preload" href="{$ShopURL}/{$templateDir}themes/base/fonts/jost/Jost-Italic-VariableFont_wght.ttf" as="font" crossorigin/>

In der _variables.scss vom CHILD dann dies angehängt:

$font-family-sans-serif:            'Jost', sans-serif !default;
$font-accent:                       'Jost', sans-serif !default;
$font-family:                       'Jost';

Und in die my-nove_crit.scss:

@font-face {
  font-family: 'Jost';
  font-weight: normal;
  font-style: normal;
  src: url(fonts.googleapis.com/css?family=Jost) format('truetype');
}

Wobei ich denke das ich bei der URL den Path von den Fonts aus dem /fonts/ Verzeichnis packen soll. Oder? Jedenfalls läuft es noch nicht so wie ich es möchte 🙁

 

[Sergej Stroh]

Am Besten die Schriftart in .woff2 konvertieren, ist um einiges kleiner von der Dateigröße.
Schneller geht mit dem Font Manager.

 

[johnsmith543]

An interesting discussion about customizing fonts on a website. The right font can make a big difference to readability and the visual style of a page. Those who want to try a more striking style can also experiment with the Carattere Gotico font .