Einsatz von Google Fonts bei Landing Pages

[Angi]

Hallo Community, 

seit kurzem darf man ja aus Datenschutz Gründen keine Google Fonts mehr verwenden. 

Wir haben bei unseren Landing Pages fast durchgehend Google Fonts verwendet - und müssen jetzt alles ändern.

Gibt es von HubSpot Seite hier evtl. eine Lösung oder Optionen?

Wir sind ja sicher nicht die  einzigen, die Google Fonts verwenden. 

Wie geht ihr damit um?

Viele Grüße

Angi

[Anton]

Hallo zusammen, 

das wohl wichtigste HubSpot Update der letzten Tage ist nun live bzw. wird gerade ausgerollt. 

Google Fonts werden absofort über HubSpot statt Google geladen, wenn man die Fonts Funktion in der theme fields.json Datei verwendet(in 99,9% aller Themes der Fall).

Hier der Link zum Changelog Artikel

https://developers.hubspot.com/changelog/google-fonts-loaded-using-fields-now-served-from-your-domai... 

Was man aber noch beachten/testen muss sind Youtube Videos im Standard Video Modul oder als ein normaler Embed code. Bei normale Youtube embed code werden Standardgemäß nämlich Google Fonts('Roboto') über Google geladen. 

Falls das Standard Video Modul von HubSpot auch Google Fonts laden sollte - Ich arbeite gerade an einer DSGVO konformen Lösung. 

viele Grüße

Anton

[MiaSrebrnjak]

Super, vielen Dank fürs Teilen @Anton! 

@Angi es wird einige Tage dauern, bis das CMS-Update Self-Hosted-Google-Fonts in allen Accounts verfügbar ist. Unser Produktteam wird dieses Feature-Request aktualisieren, wenn sie soweit sind. 

Beste Grüße

Mia, Community Team

[Angi]

Vielen Dank für die vielen und ausführlichen Antworten. Damit kommen wir auf jeden Fall weiter.

Viele Grüße

Angi

[Anton · Accepted solution]

Hi @Angi, 

um es korrekt zu formulieren: Man darf beim die Fonts - bei Seitenaufruf - von Google nicht mehr laden.

Gegen die verwendung von Google Fonts spricht nichts, solange sie selber gehosted werden. 

Aktuell gibt es nur die möglichkeit Fonts entweder im Datei-Manager oder externen Server(nicht empfohlen) hochzuladen und mittels HTML/CSS einzubinden. Wird etwas technisch

Meine persönliche Empfehlung:

• Lade die Google Font Schriften und -schnitte, die ihr verwendet, herunter
• Uploade diese in den Datei-Manager. Ich empfehle einen seperaten Ordner dafür zu erstellen
• Öffne die theme.css oder theme-override.css deines themes (am besten in einem neuen Tab)
• Copy/paste den ersten Code-block der font-face Regel ganz oben in die theme.css
•  Ändere den namen nach deinem belieben
• Kopiere die URL des jeweiligen Schriftschnittes in die src Zeile
• Falls dein theme Umschreibungen wie {% set ... %} verwendet, müssen diese angepasst werden
• Speichern
• Testen
• Fertig

HubSpot arbeitet gerade an einer "leichteren" Implementierung (Stichwort: lokale fonts beta ). Diese muss durch einen Developer im Theme vorgenommen werden. 

Hier ein beispiel der font-face Regel:

• Schriftart: Roboto in Regular, Italic und Bold
• Ordnername: /custom-fonts

@font-face {
  font-family: 'Roboto-Regular';
  src:  url('https://antonbujanowski.de/custom-fonts/RobotoRegular.otf') format('opentype'),
font-weight:400;
}

@font-face {
  font-family: 'Roboto-Italic';
  src:  url('https://antonbujanowski.de/custom-fonts/RobotoItalic.otf') format('opentype'),
font-weight:400;
font-style:italic
}

@font-face {
  font-family: 'Roboto-Bold';
  src:  url('https://antonbujanowski.de/custom-fonts/RobotoBold.otf') format('opentype'),
font-weight:800;
}

Etwas, was ich empfehle ist anschließend folgendes zu schreiben:

{% set headline_font = "Roboto-Bold, Arial, sans-serif" %}
{% set body_font = "Roboto-Regular, Arial, sans-serif" %}
{% set link_font = "Roboto-Italic, Arial, sans-serif" %}

Weiter unten in der CSS müsste sich so etwas in der Art befinden. Vorsicht: ggf. musst du den unten stehenden Code mit dem Vorhandenen mischen.

body,
p{
font-family:{{ body_family }};
font-weight:400;
}

h1, 
h2,
h3,
h4,
h5,
h6{
font-family:{{ headline_font }};
font-weight:800;
}

a{
font-family:{{ link_font }};
font-weight:400;
font-style:italic;
}

Ich kann dir heute Abend oder morgen gerne noch detailiertere Beispiele nennen, wenn du magst. 

@MiaSrebrnjak, der Einsatz des @import-links ist bei Google Fonts nicht DSGVO Konform.

Gruß

Anton

[SEdmands]

Hallo @Anton,

wenn ich das richtig verstehe werden mit dieser Lösung dann die Fonts/Schriftarten von HubSpot gehostet, anstelle von Google, ist das richtig?

Soweit ich weiß, wird HubSpot ebenfalls in den USA gehostet, so wie Google auch. Der Grund, warum man nach DSGVO die Fonts vor Zustimmung des Kunden nicht laden darf, ist weil der Kunde dem Hosting in den USA (einem Drittland mit dem kein Datenschutzabkommen besteht seit das Privacy Shield nicht mehr anerkannt ist) nicht zugestimmt hat und Google beim Laden der Fonts die IP Adresse des Kunden/Webseite-Besuchers speichert. 

Wenn HubSpot beim Laden der Fonts ebenfalls die IP Adresse speichert, würde das Hosting der Fonts auf einem anderen Server in den USA das Problem der Nichtkonformität mit DSGVO nicht lösen. Es verringert vielleicht das Problem mit den Abmahnungen etwas, weil die Abmahner explizit nach dem Google Server screenen, aber grundsätzlich bleibt die Thematik weiterhin bestehen. 

Kannst Du bestätigen, dass bei Speicherung der Fonts im File Manager keine Speicherung der IP Adresse des Webseitenbesuchers auf Servern in den USA stattfindet?

Viele Grüße

Sylvia

[Anton]

Hi @SEdmands, 

korrekt. Die Fonts werden von HubSpot und nicht von Google bereitgestellt. Genauer gesagt werden bei der @font-face Regel die Fonts über die in HubSpot hinterlegte Domain geladen.

Das bedeutet, dass die Domain über welche die Fonts geladen werden nicht mehr fonts.googleapis.com lautet sondern DEINEDOMAIN.de. Somit übernehmt ihr - aus rechtlicher Sicht - das Hosting. Seit meinem ursprünglichen Beitrag gab es ein HubSpot Update, bei dem HubSpot das hosting der Google Fonts übernimmt. Somit ist die @font-face Regel für Google Fonts mittlerweile nicht mehr nötig.

Genaueres findest du im Developer Changelog

Das HubSpot in der USA gehostet wird, stimmt nur teilweise.

Wenn euer Portal vor 07/21 erstellt/gekauft wurde, dann wird es auf einem US-Server gehostet, allerdings besteht seit dem genannten Datum die Möglichkeit euer Portal mithilfe eures CSM(Customer Success Manager) auf einen europäischen Server zu übertragen. Falls dir dieser nicht bekannt sein sollte, sollte der Support dir weiterhelfen können. 

Wenn euer Portal nach 07/21 erstellt/gekauft wurde, ist es automatisch auf einem EU Server gehostet. Wo genau in der EU kann ich leider nicht sagen.

Mehr informationen zum Hosting Thema findest du auf der offiziellen EU-Server Informationsseite.

Aus dem "Achtung Abmahnung: Prüfen Sie jetzt die Einbindung von Google Fonts" Artikel vom 06.12.2022 von eRecht24 geht hervor, dass man sich auf der sicheren Seite befindet, wenn man die Fonts lokal hostet. Zudem wird auf der Seite auch ein kostenloser Google Font Tester angeboten. Wenn eure Seite den Test besteht, behaupte ich, braucht man sich keine Gedanken bezüglich einer möglichen Abmahnung machen zu müssen. Ob die IPs geloggt und an die USA weitergegeben werden, kann ich nicht sagen. Ich würde jedoch behaupten, dass keine IPs geloggt werden. Dies kann aber nur von HubSpot selbst bestätigt/verneint werden. 

Hoffe, das Hilft dir weiter

Gruß Anton

[TRoecklin]

So haben wir es auch gelöst. Allerdings wird weiterhin das Google Fonts-Skript im Hintergrund geladen, auch wenn die Schriftarten bereits ersetzt wurden. Gibt es hier eine Herangehensweise zum aktiven Blocken des Google Font-Skripts?

[Anton]

Hi @TRoecklin, 

es gibt einige technische Wege, wie du das Laden von Google Fonts unterbinden kannst. 

1. Mittels Modifikation der fields.json Datei im Theme

Funktioniert nur, wenn du uneingeschränkten Zugriff auf diese Datei habt. Bei Marketplace Themes ist dies nicht möglich. 

Falls du uneingeschränkten Zugriff hast, suche in der Datei nach den Font-fields. Diese sehen so aus:

{
  "name" : "font",
  "label" : "Font",
  "required" : false,
  "locked" : false,
  "load_external_fonts" : true,
  "type" : "font",
  "default" : {
    "size" : 12,
    "font":"Merriweather",
    "font_set":"GOOGLE",
    "size_unit" : "px",
    "color" : "#000",
    "styles" : { }
  },
  "visibility" : {
    "hidden_subfields" : {
      "font": true,
      "size": true
    }
  }
}

Die Zeile "load_external_fonts" ist für das Laden zuständig. Wenn sie vorhanden ist, ersetze "true" durch "false". Falls sie nicht vorhanden ist, füge sie hinzu.

Dadurch wird die jeweilige Font nicht mehr geladen. 

2. Modifikation der layout/base.html

Ich habe es zwar schon sehr lange nicht mehr gesehen, aber manche Themes können die Font im <head>-tag der layout/base.html verankert haben. Dies funktioniert bei eigens geschriebenen Themes als auch bei Child Themes. Die Datei befindet sich in den meisten Fällen im Templates/layout Ordner des Themes. 

Der Standard Embed Code schaut so aus(die dritte Zeile läd deine Fonts):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Lösche die 3 Zeilen aus der layout/base Datei um das Laden zu unterbinden

3. Mittels CSS

Man kann Google Fonts auch mittels CSS laden lassen. Um dies zu überprüfen, überprüfe die main.css und theme.css(kann auch theme-override.css heißen). 

Der Code schaut hierbei so aus:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

und sollte sich im Optimalfall ganz oben in den Dateien befinden. Falls du in den Dateien nicht fündig werden solltest, überprüfe auch die anderen CSS Dateien. 

4. HubSpot Einstellungen

Es kann sein, dass jemand die Fonts global im HubSpot Header eingebunden hat. Um dies zu überprüfen, schau hier nach

HubSpot Einstellungen -> Website -> Seiten -> Seiten HTML Header

Wenn du dort einen Code wie bei 2. oder 3. findest, kannst du ihn löschen.

Aber Vorsicht! Im Header sind meistens auch weitere Scripts wie Google, Cookiebanner, Hotjar und was ihr noch an externen Tools nutzt, verbaut. Lösche hierbei wirklich nur die entsprechenden Zeilen und mache sicherheitshalber ein Backup. Für ein Backup öffne den Editor/Notepad und füge alles aus dem Head dort ein. So kannst du es im Zweifelsfall wiederherstellen. 

5. Seiten Einstellungen

Falls die oben genannten Möglichkeiten noch kein positives Resultat erbracht haben, ist eine weitere Möglichkeit, dass die Fonts auf Seitenebene verbaut wurden. Das wäre die Vorgehensweise die am meisten Arbeit verursacht und absolut nicht empfohlen wird, da es zu einer enormen inkonsitenz führt bzw. führen kann.

Um dies zu überprüfen überprüfe eine der betroffenen Seiten im Bearbeitungs-Modus. Bei Einstellungen unter "Erweiterte Optionen" ist auch ein Head-HTML Feld vorhanden.

wenn dort ein Code wie bei 2. oder 3. steht, musst du ihn dort entfernen. Das wird, wie schon geschrieben, am meisten Areit mitsich bringen, da du dann jede Seite individuell bearbeiten musst.

Hoffe das Hilft, 

Grüße Anton

[Angi]

Hallo Anton, wir sind bei diesem Thema auf ein paar Schwierigkeiten gestoßen: 

• Wir arbeiten mit der Starter Version
• Wir verwenden Google Fonts auf unseren Landing Pages
• Diese Landing Pages haben wir ohne Vorlage erstellt

Beim Umsetzen deiner o.g. Tipps ist nun aufgefallen, dass wir nichts ändern können, wenn wir keine Vorlage verwendet haben. Im Code der Landing Pages ist keine Änderung möglich, da diese wahrscheinlich nicht zu bearbeitendes HubSpot Design sind. 

Unsere Landing Pages erscheinen auch nicht im Design Manager.

Wir finden also keine Bearbeitungsmöglichkeiten für deine Anleitung, weil wir gar nicht bis zum Code gelangen.

Uns stellt sich die Frage

• welche Möglichkeiten wir bei unseren akutellen Landing Pages tatsächlich haben, wenn wir weiterhin die Google Fonts verwenden wollen.  Umstellung auf Systemschrift? Erneute Erstellung der Landing Pages auf Basis einer Vorlage? Erneute Erstellung der Landing Pages als Website und unter Verwendung einer Website Vorlage?

Vielleicht kann uns hier jemand weiterhelfen..

Viele Grüße

Angela

[TRoecklin]

Aktuell gibt es für uns keine Möglichkeit. Alle genannten Möglichkeiten lassen sich mit Marketplace-Designs nicht umsetzen. Ich habe auch bereits mit dem Entwickler unseres Designs geschrieben und er meinte, dass Hubspot an einer Lösung hierfür arbeitet, die dieses Jahr noch kommen sollte.

Wir können demnach nur abwarten.

[Angi]

Hallo zusammen, ich verstehe nicht, dass HubSpot hier keine Möglichkeiten anbietet. Es muss doch hier rechtssichere Lösungen geben, ohne dass man gleich wieder auf die Systemschriftarten umstellen muss, oder?

Wie lösen das andere??

VG Angela

[MiaSrebrnjak]

Hi @Angi,

ich habe unser Produkt-Team für Feedback zu dieser Produktidee gebeten, in der sich auch andere Nutzer*innen eine Lösung für Starter-Accounts wünschen. Ich melde mich, sobald ich neue Informationen habe! 

Ich wollte hier auch diesen Community-Beitrag teilen, in dem @MatthiasWeber relevante Informationen geteilt hat. 

Beste Grüße

Mia, Community Team 

[Angi]

Hallo Mia, danke für dein Engagement.. in der Starter Version haben wir hier echte Grenzen :/.. momentan bleibt uns ja nur, auf Systemschriftart umzustellen, was keine befriedigende Lösung ist..

Viele Grüße

Angi

[MiaSrebrnjak]

Vielen Dank für deine Hilfe @Anton! 👍 🙂 

[karstenkoehler]

Ausführliche, klar verständliche, kompetente Antworten sind etwas Feines! 😄 @Anton 

[MiaSrebrnjak]

Hi @Angi,

danke für deinen Beitrag! 

Die meisten Nutzer*innen, die Google Fonts verwenden, bauen sie mithilfe der Import-URL bzw. des Links ein, so wie in diesem Knowledge Base Artikel beschrieben. Wenn das auch bei euch der Fall ist, wird das eigene Hosting von Google Fonts verwendet - die Daten werden also aus den USA gesendet/herausgezogen, was tatsächlich Auswirkungen auf die DSGVO/Datenschutz haben könnte. 

Einige Nutzer*innen haben das so gelöst, dass sie die Fonts lokal hosten - hier der Link zum Community-Artikel mit weiteren Informationen & einer Anleitung (Englisch).

Diese Lösung ist, wenn ich mich nicht irre, aber nur in Professional- & Enterprise-Versionen umsetzbar. Ein Nutzer hat hier schon eine Produkt-Idee erstellt, wo über rechtliche Konsequenzen diskutiert wird. @SThalhammer hat in den Kommentaren einen interessanten Artikel dazu geteilt. 

@Anton, @Chriso-mwx, @Oezcan, @mtruss, habt ihr vielleicht mehr Informationen zu diesem Thema? Danke!   

Beste Grüße

Mia, Community Team