Einbinden einer Schrift über protected $javascript

Shopware 5 Programmierung
1

Hallo!

Ich versuche gerade eine Schrift von MyFonts.com als 30-Tage Testversion in Shopware 5.2 einzubinden.

Ich ging wie folgt vor:
Javascriptdatei “myFontTestschriften.js” anlegen

    (function() {
        var path = '//easy.myfonts.net/v2/js?sid=206566(font-family=FF+DIN+Round+Pro+Medium)&sid=206567(font-family=FF+DIN+Round+Pro+Bold)&sid=206569(font-family=FF+DIN+Round+Pro+Light)&sid=236049(font-family=FF+DIN+Round+OT+Regular)&key=ejWa5E49CI',
            protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
            trial = document.createElement('script');
        trial.type = 'text/javascript';
        trial.async = true;
        trial.src = protocol + path;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(trial);
    })();

Diese habe ich abgelegt unter:
themes/Frontend/meinTemplate/frontend/_public/src/js

dann habe ich im Theme “meinTemplate” diese JavaScript-Datei als Variable eingebunden

protected $javascript = array(
    'themes/Frontend/meinTemplate/frontend/_public/src/js/myFontTestschriften.js'
);

 

Danach habe ich in der CSS-Datei

@font-base-stack:"'FF DIN Round Pro Medium'";

 

 

Leider findet man nun nach dem Kopmilieren des Thems weder auf der Seite im Quellcode  der Scriptsource noch wird die Schrift auf der Seite verwendet. 

Was mache ich hier falsch?

 

Danke für alle Tipps!

Viele Grüße

Wilhelm Walker

2

Innerhalb einer .js Datei benötigst du kein < script type=„text/javascript“ > & script >.

Der Pfad zu der Datei ist auch verkehrt, dieser müsste sein  src/js/myFontTestschriften.js

In welcher CSS Datei? @font-base-stack Ist eine Less Variabel. Dazu auch folgender Artikel: Getting started with LESS

3

Hallo,

ich habe alles so gemacht wie angegeben:

Java Script:

    (function() {
        var path = '//easy.myfonts.net/v2/js?sid=206566(font-family=FF+DIN+Round+Pro+Medium)&sid=206567(font-family=FF+DIN+Round+Pro+Bold)&sid=206569(font-family=FF+DIN+Round+Pro+Light)&sid=236049(font-family=FF+DIN+Round+OT+Regular)&key=ejWa5E49CI',
            protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'),
            trial = document.createElement('script');
        trial.type = 'text/javascript';
        trial.async = true;
        trial.src = protocol + path;
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(trial);
    })();

Im Theme unter weitere Java Script Dateien: :

protected $javascript = array('src/js/myFontTestschriften.js');

 

In der Less-Datei (hatte ich irrtümlich CSS-Datei geschrieben, meinte natürlich Less-Datei…)

@font-base-stack:"'FF DIN Round Pro Medium'";

 

Theme compiliert…

 

Leider findet man nun nach wie vor, nach dem Kopmilieren des Thems, weder auf der Seite im Quellcode den Scriptsource noch wird die Schrift auf der Seite verwendet. 

An was könnte es noch liegen?

 

Danke im Voraus für weitere Hilfe. Viele Grüße
Wilhelm

4

Den JS Code siehst du auch nicht direkt im Quelltext, da dieser ja zusammen mit den anderen JS Dateien kompiliert wird. Der JS Code sollte daher ziemlich am Ende der gecachten JS Datei auftauchen.

Anstatt die Variable in deiner Less zu verwenden, setze die Schriftart mal im Theme Manager ein unter dem Tab Farb-Konfiguration und dann Typografie.

Dort dann bei der Variable @font-base-stack die Schrit vorsetzen. Das sähe dann in etwa so aus:

 "FF DIN Round Pro Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;