Google Fonts in Shopify lokal einbinden

Sie nutzen Google Fonts in Shopify und haben keine Lust auf die nächste DSGVO-Abmahnwelle? Verständlich – in dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie Google Fonts lokal in Ihren Store einbinden.

Google Fonts und die DSGVO

Sobald ein Nutzer Ihre Website öffnet, sendet dieser eine Anfrage an einen Server von Google, um die Schriftarten aus Google Fonts zu laden. Bei der Anfrage wird u. a. die IP-Adresse des Nutzers an Google-Server übermittelt. Diese stehen primär in den USA – einem Drittland mit unzureichenden Datenschutzstandards.

Folglich ist diese Form der Übermittlung personenbezogener Daten ein Verstoß gegen die DSGVO.

Google Fonts in Shopify

Viele Shopify-Themes binden Google Fonts extern, also über die Google-Server, ein. Die Lösung ist daher, Google Fonts lokal einzubinden. Somit werden keine personenbezogenen Daten an Google übermittelt.

Google Fonts in Shopify lokal einbinden

Erstellen Sie zuerst eine Kopie Ihres Themes, sollte bei der Bearbeitung des Codes ein Fehler auftreten.

Dies geht unter Onlineshop → Themes → Aktuelles Theme → Aktionen → Duplizieren.

Google Font in Shopify hochladen

Zuerst laden Sie die Schriftart Ihrer Wahl in Shopify hoch, folgen Sie dazu einfach diesen Schritten.

1. Laden Sie Ihre Schriftart von Google Fonts oder einem anderen Anbieter herunter.
2. Öffnen Sie den Theme-Code unter Onlineshop → Themes → Aktuelles Theme → Aktionen → Code bearbeiten.
3. Suchen Sie nach dem Ordner Assets und klicken Sie auf „Neue/n/s Asset hinzufügen“.
4. Laden Sie die Schriftart Ihrer Wahl hoch und klicken Sie auf „Fertig“.

Lokale Google Font im Code einbinden

Jetzt ersetzen Sie die alte Google Font(s) Einbindung im Code Ihres Onlineshops. Der Ort, an dem Schriftarten in Ihrem Theme eingebunden werden, kann jedoch variieren.

1. Erstellen Sie ein weiteres Asset, diesmal wählen Sie jedoch „Leere Datei erstellen“ aus.
2. Wählen Sie bei „Erweiterung“ jetzt „css“ aus und tragen Sie unter „Dateiname“ den Text „custom-fonts“ ein und klicken Sie auf „Fertig“.
3. Fügen Sie den folgenden Code ein:

<style>
  @font-face {
  font-family: "fontname";
  src: url('fonturl-eot') format("embedded-opentype"),
       url('fonturl-woff') format("woff"),
       url('fonturl-woff2') format("woff2"),
       url('fonturl-ttf') format("truetype"),
       url('fonturl-svg') format("svg");
   }
 </style>

Code von Custom-Fonts.css editieren

Jetzt müssen Sie nur noch ein paar Anpassungen in Ihrer neu erstellten Datei vornehmen.

1. Ersetzen Sie fontname durch den Namen Ihrer Schriftart.
2. Ersetzen Sie fonturl-eot / fonturl-woff / fonturl-woff2 / fonturl-ttf / fonturl-svg mit der/n URL/s Ihrer Schriftart, die Sie zuvor als Asset/s hochgeladen haben. Die Endungen eot, woff, woff2, ttf und svg entsprechen dabei dem Dateiformat.
3. Sollten Sie bspw. nur eine .woff-Datei Ihrer Schriftart hochgeladen haben, fügen Sie deren URL für fonturl-woff ein und löschen die anderen Formate aus Ihrem Code – ein Beispiel:

<style>
  @font-face {
  font-family: "BeispielFont";
  src: url('assets/beispielfont.woff') format("woff");
   }
 </style>