Neu Font "baloo" in Shop einbinden

[Schulfreund]

Hallo,
nach längerer Recherche und stundenlangem rumprobieren habe ich es leider noch nicht geschafft das Font "baloo" in den Shop einzubinden.
Ich habe die verschiedenen Herangehensweisen ausprobiert, von Änderung der Dateien im Ordner "fonts" und deren Einbindung, hin zu der Integration via custom.css oder variables.css …
Laut mehreren Anleitungen sei die letzte Version also das umschreiben der variables.css bzw. custom.css richtig und würde funktionieren. Bei mir haben custom.css Änderungen bisher noch nicht funktioniert, aber ich wüsste nicht woran das liegen könnte.
Also, wie binde ich ein Font ein, das kein Google-Font ist ? Die entsprechenden Dateien würden mir vorliegen.
Vielen Dank für eure Hilfe!

 

[M.Stickel]

Hi Schulfreund,

schau mal bitte in dieses Tutorial: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face
Wenn du die Schrift eingebunden hast, kann es durchaus sein, das dein Browser die custom.css gecached hat und du deswegen keine Änderung siehst.
Dazu einfach die Seite mit Shift+F5 neuladen oder in privaten / Inkognito Fenster öffnen.

 

[Schulfreund]

Hi,
vielen Dank für die schnelle Antwort. Ich habe das Tutorial verinnerlicht und verstehe es. Was ich leider nicht verstehe ist folgendes:

1. Wo genau speichere ich die Dateien ab, also z.B. die .woff oder .ttf ? In den Font-Ordner oder in den Ordner der jeweiligen Datei die ich bearbeite?
2. Wo genau füge ich den @font-face Code ein? In die custom.css oder jeweils in die Datei? Wenn es die custom.css sein sollte, welche verändere ich? Die im Ordner meines Themes oder die im Ordner base?
3. Fontsquirrel schreibt bei der Integration der Fonts, dass man eine Stylesheet.css einfügen soll. Diese beinhaltet den gleichen Code, wie die custom.css. Muss ich die Stylesheet.css dann trotzdem noch integrieren oder ist sie einfach das gleiche wie die custom.css?
4. Wenn ich nun ein Font eingebunden habe, nutze ich zum Gestalten eines Bestandteils die style="font-family: …;" oder die p{font-family: …;} ?

Sorry für die Umstände, bin aber leider etwas ahnungslos. Vielen Dank für deine Hilfe!!!