GOOGLE FONTS DSGVO-KONFORM AUF DEM EIGENEN WEBSERVER NUTZEN

Somit reicht es nicht einen entsprechenden Eintrag mit Hinweis auf Widerruf in die Datenschutzerklärung einzubinden.

GOOGLE WEBFONTS DSGVO-KONFORM EINBINDEN

Da die Einbindung, wie oben erklärt nicht zweifelsfrei rechtskonform ist, müssen die Schriften auf dem Webserver der Webseite gehostet werden, damit die Daten DSGVO-konform genutzt werden können.

Bisher wurden Schriftarten ungefähr wie folgt eingebunden:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Dieser CSS-Stylesheet hat hier in der Regel einen zusätzlichen Stylesheet für die einzelnen Schriftarten eingebunden, der wie folgt aussah:

@font-face {<br> font-family: 'Raleway';<br> font-style: normal;<br> font-weight: 400;<br> src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');<br> 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;<br> }

Es werden an zwei Datenquellen informationen gesendet, bei denen man nicht sagen, kann, was mit den Daten passiert:

• fonts.googleapis.com
• fonts.gstatic.com

Um dies zu vermeiden bindet man die Schriftarten lokal auf dem Server ein.  Dazu sind folgende Schritte notwendig:

1. Template kontrollieren, welche Schriften werden verwendet.
2. GoogleWebFonts Schriftart auswählen und natürlich die Schrifttypen (regular, bold, italic)
3. Wenn die Schriften als TTF heruntergeladen wurden, bitte in die entsprechenden Formate konvertieren (eot, svg usw.), da diese sonst nicht in allen Browsern angezeigt werden.
4. CSS-Code auf dem Server anpassen
5. Schriften in ein Verzeichnis auf dem Server laden.
6. Aufruf per @font-face in der index.php

Das Ganze sieht dann so aus am Beispiel der Schrift Raleway für alle Browser kompatibel:

@font-face {
font-family: 'Raleway';
src: url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.eot'); /* IE9 Compat Modes */
src: url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/templates/shaper_helixultimate/localfonts/Raleway-Regular.svg#svgRaleway-Regular') format('svg'); /* Legacy iOS */
}

Dies muss natürlich auch für die verschiedenen Schrifttypen bold, kursiv, semibold etc. je nachdem welche Schriftypen ihre Seite verwendet angepasst werden.

Danach muss noch die Schriftgröße definiert werden, das sieht dann in etwa so aus (Auszug):

body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
}

h1 {
font-family: 'Raleway-SemiBold', sans-serif;
font-size: 14px;
font-weight: 700;
font-style: normal;
}

Wenn Sie noch Fragen haben, oder Hilfe bei der Umsetzung benötigen, nehmen Sie Kontakt mit uns auf.