Google Fonts datenschutzsicher einbinden

Google Fonts auf dem eigenen Server hosten, so geht es.

Vor einiger Zeit gab es mal wieder ein Urteil, welches bei einigen Webmastern Unbehagen ausgelöst haben dürfte. So urteilte das Landgericht München, dass die Verwendung der Google Fonts nicht datenschutzkonform sei, sofern der Benutzer vorher nicht explizit zustimmt.

Deswegen schauen wir uns an, wie wir die Schriftarten lokal auf unserem Server hosten können. Fangen wir an!

Schrift herunterladen

Zuerst laden wir die Schriftart von Google Fonts herunter. Praktischerweise bietet Google direkt einen Download an, welcher die Schriftart(en) als ZIP-Archiv herunterlädt.

TTF oder Woff Format

Standardmäßig werden die Schriftarten im TTF (True Type Font) Format bereitgestellt. Dieses kommt z.B. auch in Windows zum Einsatz. Unsere Empfehlung ist, dieses Format zu verwenden, da dieses bereits von allen verbreiteten Browsern unterstützt wird.

Wer ältere Browser unterstützen will, kann die Schriftart auch in das WOFF-Format konvertieren. WOFF steht in diesem Fall für das Web Open Font Format.

Einbinden

Die Schriftart laden wir nun auf unserem Server, anschließend können wir diese verwenden:

<style>
    @font-face {
        font-family: "Macando Regular";
        font-display: swap;
        src: url("/temp/Macondo-Regular.ttf");
    }

    body { background-color:#ffffff;}
    h1 { color:#2196f3; font-family:"Macando Regular"; font-size:30pt; }
    p { color:#000000; font-family:"Macando Regular"; font-size:12pt; }
</style>

In diesem Beispiel haben wir die Schriftart in den Ordner “temp” unserer Domain verfrachtet. Mit dem “font-face”-Befehl legen wir den Namen fest, welchen wir anschließend im weiteren CSS verwenden können. Als Ergebnis wird nun die neue Schriftart verwendet.

Nutzung in DA-FormMaker

Auch in Anwendungssoftware, z.B. für Software zur HTML-Formularerstellung, wie unserem DA-FormMaker lässt sich diese Variante umsetzen.

Zuerst binden wir die Schriftart ein:

Anschließend können wir die Schriftart in den Einstellungen verwenden.