HowTo: Google Fonts und SSL

Hi, da ich zwischenzeitlich von einigen Seiten gefragt wurde, warum die SSL-Verbindung in Checkouts als unsicher im Browser angezeigt wird, schreib ich eine Kurzinfo woran es in den meisten Fällen liegt. Üblicherweise bindet man eine Webfont von Google via <link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet" type="text/css"> ein. Mag das CRT aber überhaupt nicht (Checkout, Konto & Co.), deswegen sollte man hier einfach auf die JS-Variante wechseln: <script type="text/javascript"> WebFontConfig = { google: { families: ['Ubuntu+Condensed::latin'] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> Über den entsprechenden Reiter auf der Google Font-Seite kann man diesen Code entsprechend kopieren - es reicht aber auch die Anpassung des Fontnamen. Wichtig: Falls hier Fehler auftreten, entfernt bitte einfach das “latin” hinter dem Fontnamen. Vor ca. 4 Monaten hat mich das erhebliche Nerven gekostet, bis ich in den Labs auf den Hinweis (!) gekommen bin, dass das buggy ist. Hepp und weiter.

Im Zuge der Optimierung eines Shops hier noch eine Variante für den API Loader von Google: [code][/code] Weitere API’s können bequem und vor allem nach Revision und mit optionalen Einstellungen geladen werden. Beispiel jQuery: google.load("jquery", "1.4.2"); Das Verfahren unterstützt Callbacks, was insbesondere die Shop-Performance deutlich verbessern kann. Bedeutet: die API (z. B. jQuery) wird nicht mit dem Laden der Seite initialisiert, sondern erst beim Aufruf durch einen Callback. Weitere Infos: Google Loader Viel Spaß beim Optimieren! :slight_smile:

1 Like

Hallo, wo binde ich den Code denn ein? Und welche CSS muss ich bearbeiten? Sorry, bin Einsteiger und versuche mich da nach und nach reinzufuchsen. :slight_smile: Beste Grüße

Ich würde auch gerne wissen, wie man in Shopware Google Fonts nutzen kann. Hat jemand eine Idee, wo ich die jeweiligen Google Codes hin packen muss? Eine Antwort wäre genial!! :slight_smile:

Genua: wo binde ich diesen Code nun ein? header.tpl? CSS? momentan ist es bei uns mit in der header.tpl eingebunden. Bei SSL ist es dann aber vorbei… LG, Sven

Hallo zusammen, es sollte genügen, die URLs ohne Protokoll einzutragen, zum Beispiel: <link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600"> Beste Grüße!