# HowTo: Google Fonts und SSL

**URL:** https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483
**Category:** Shopware 3.5
**Tags:** templates--design
**Created:** [12. März 2012 um 15:15 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483 "2012-03-12T15:15:36Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![formateins](https://avatars.discourse-cdn.com/v4/letter/f/958977/32.png) [@formateins](https://forum.shopware.com/u/formateins)
#### Post date: [12. März 2012 um 15:15 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/1 "2012-03-12T15:15:36Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![formateins](https://avatars.discourse-cdn.com/v4/letter/f/958977/32.png) [@formateins](https://forum.shopware.com/u/formateins)
#### Post date: [13. März 2012 um 15:42 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/2 "2012-03-13T15:42:42Z")

</div>

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](https://developers.google.com/loader/) Viel Spaß beim Optimieren! 🙂

---

<div class="post-metadata">

### Author: ![derwerbemarkt](https://avatars.discourse-cdn.com/v4/letter/d/f17d59/32.png) [@derwerbemarkt](https://forum.shopware.com/u/derwerbemarkt)
#### Post date: [5. Oktober 2012 um 08:56 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/3 "2012-10-05T08:56:31Z")

</div>

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. 🙂 Beste Grüße

---

<div class="post-metadata">

### Author: ![daskn](https://avatars.discourse-cdn.com/v4/letter/d/ecccb3/32.png) [@daskn](https://forum.shopware.com/u/daskn)
#### Post date: [26. Februar 2013 um 18:24 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/4 "2013-02-26T18:24:51Z")

</div>

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!! 🙂

---

<div class="post-metadata">

### Author: ![Jammy04](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@Jammy04](https://forum.shopware.com/u/Jammy04)
#### Post date: [16. Oktober 2013 um 09:10 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/5 "2013-10-16T09:10:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Martin\_Schindler](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Martin\_Schindler](https://forum.shopware.com/u/Martin_Schindler)
#### Post date: [11. Januar 2014 um 12:49 UTC](https://forum.shopware.com/t/howto-google-fonts-und-ssl/6483/6 "2014-01-11T12:49:14Z")

</div>

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!