DSGVO: Google Fonts selber hosten

Einleitung

In vielen Themes für Web-Seiten werden Google Fonts verwendet. Vor allem seit dem die DSGVO in Kraft getreten ist, sollten möglichst alle externen Ressourcen verwendet werden, damit nicht jeder Besuchder Webseite auch gleich Google mitgeteilt wird.

Am einfachsten ist das in den Entwicklertools des Browsers zu prüfen. Tauch dort eine Verbindung zu fonts.gstatic.com und/oder fonts.googleapis.com auf, so werden die jeweiligen Schriften von Google nachgeladen. Im Sourcecode der Web-Seite sollten dann auch ungefähr ähnliche einträge im Header auftauchen:

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

Am einfachsten kann die Auslieferung der entsprechenden Schriften folgendermaßen auf den eigenen Server umgestellt werden:

Hinweis: Es sollte auf jeden Fall die Copyright-Hinweise zu der jeweils verwendeten Schirft überprüft werden ob, diese auf dem eigenen Server gehostet werden darf bevor die im folgenden genannten Schritte umgesetzt werden. Außerdem wären angemessene Credits (z.B. im Impressum) angebracht.

CSS und Schriften herunterladen

Da das von Google generierte CSS alle nötigen Informationen enthält, kann es unter der im HTML-Header angegebene URL die mit https://fonts.googleapis.com beginnt mit dem Browser der Wahl heruntergeladen und als Datei fonts.css gespeichert werden.

In der Datei sind in der Regel für unterschiedliche Zeichensätze unterschiedliche Schriftschnitte angegeben. In dem obigen Beispiel für die Schrift Roboto sind dabei Einträge nach folgendem Schema zu finden:

[...] 
/* latin */ 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    font-display: swap; 
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} 

/* cyrillic-ext */ 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 500; 
    font-display: swap; 
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2'); 
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; 
} 
[...]

Mit ein paar Zeilen kleinem Bash-Script lassen sich diese unterschiedlichen Schrift-Dateien (WOFF2) schnell runterladen:

for i in $(grep -o "https://[^)]*" fonts.css); do 
    wget $i
done

CSS Datei anpassen

Als nächstes werden die URLs zu den Schriftdateien der heruntergeladenen fonts.css angepasst und von https://fonts.gstatic.com/s/roboto/v20/ auf die entsprechende URL auf dem eigenen Server abgeändert (bei z.B. https://nerdig.es/assets/fonts). Das funktioniert am einfachsten per sed oder durch suchen und ersetzen im Editor der Wahl:

sed -i "s/https:\/\/fonts.gstatic.com.*v20/https:\/\/nerdig.es\/assets\/fonts/" fonts.css

Danach können die CSS und die WOFF2 Dateien auf den Server hochgeladen werden.

HTML Header anpassen

Jetzt muss nur noch das Theme angepasst werden. Je nach eingesetzter CMS-Software und Theme muss das an unterschiedlicher Stelle erfolgen. Es hilft aber in der Regel im entsprechenden Verzeichnis nach fonts.googleapis.com und fonts.gstatic.com zu suchen.  Wurden die Dateien gefunden muss nur noch der Link zu Google im HTML-Header auf die gerade hochgeladene CSS-Datei auf der eigenen Seite verwiesen werden- 

Hinweis: Damit die Änderungen bei dem nächsten Update des Themes nicht überschrieben werden, sollten die Änderungen idealerweise in einem Child-Theme (Wordpress) oder per Idealerweise wird nicht das Theme direkt überschrieben, sondern eine Theme-Override (Publii) 

Quellen

[1] https://fonts.google.com/