Oveleon Contao-Cookiebar und Adobe TypeKit

[charleen]

Gibt es eine Möglichkeit Adobe Typekit über die Cookie-Bar zu blockieren und eine Einwilligung einzuholen? Google Fonts kann man ja problemlos lokal einbinden, aber bei den Adobe Schriften geht das je leider nicht. Einige Consent-Tools bieten die Blockierung an, bei der Contao-Cookiebar habe ich keine Idee.

Eingebunden wurde Typekit über das Seitenlayout.

<script src="https://use.typekit.net/spr4wor.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>

[Spooky]

Über "Benutzerdefiniert (Skript)".

[charleen]

Über "Benutzerdefiniert (Skript)".

Stimmt, das werde ich nachher gleich probieren. Danke!!

[charleen]

Also ich habe jetzt die Einbindung probiert, der Code wird zwar im Head geladen (beide Zeilen), aber es werden keine Style-Anweisungen geladen. Binde ich die beiden Scripte wieder wie gehabt im fe_page - Template ein, dann werden die Schriften dargestellt und die Style-Anweisungen auch geladen. Wo mache ich noch einen Fehler? Muss ich etwas an der config.yml ändern?

cookie.png

[zoglo]

TypeKit ist noch nicht geladen, bevor du deine try-catch ausführst, da die Font asynchron geladen wird.

Sehr alt aber funktioniert. Ansonsten mit await arbeiten.
https://blog.typekit.com/2011/05/25/...synchronously/

Die Quell-URL kannst du löschen, folgendes Script kannst du einfügen in Skript (Bestätigt):

(function() {
    var config = {
      kitId: 'spr4wor'
    };
    var d = false;
    var tk = document.createElement('script');
    tk.src = '//use.typekit.net/' + config.kitId + '.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (d || rs && rs != 'complete' && rs != 'loaded') return;
      d = true;
      try { Typekit.load(config); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();

Edit:
Ansonsten einfach sofort die css laden mit diesem Einzeiler in "Benutzerdefiniert (Skript)"

(()=>{const typekit=document.createElement('link');typekit.rel='stylesheet';typekit.href='https://use.typekit.net/spr4wor.css';document.head.appendChild(typekit);})();

^ Übrigens auch möglich mit Google Fonts, wobei ich hier immer empfehle, dass diese lokal eingebunden werden sollen

[charleen]

Vielen Dank für den Tipp und die tolle Anleitung! Habe es gerade probiert und hat wunderbar funktioniert. Durch den Blogbeitrag konnte ich auch gleich noch ein paar zusätzliche Anpassungen machen.