Warum OXID und Google Fonts – Abmahngefahr und die passende Lösung!

Der OXID Shop verwendet z.B. im Flow Template die Schriftart Raleway aus dem Google Fonts Katalog. Diese Seite wird aus den USA nachgeladen, und die IP des Besuchers an Google übermittelt.

Nun sind einige Abmahnung diesbezüglich unterwegs und wir haben uns entschlossen, die entsprechende Font lokal zu hosten und dem Shop die geänderte Lokation bekannt zu machen.

Was ist nun zu tun:

Über einen Dienst wie z.B. von sicher3.de kann jeder seinen OXID Shop nach Google Fonts absuchen lassen. Hier wurde in unserem Fall beim Flow Template die RALEWAY Schriftart gefunden.

Nun war der erste Blick in die CSS Dateien des Shops, welche sich unter source/out/flow/src/css befinden. Hier war kein Google Eintrag zu finden.

Die Google Schriftarten werden im Flow Template (oder in einem Child dessen) in der Datei source/Applikation/views/flow/tpl/layout/base.tpl geladen:

Die Zeile mit dem “link href” wurde von uns auskommentiert und die zweite Zeile

[{oxstyle include="css/gfont.css"}]

hinzugefügt. Diese lädt nun eine CSS Datei nach, die wir wie folgt erstellt haben:

Zuerst wurde die Font festgestellt, welche wir verwendet haben. Diese kann dann als ZIP Archiv unter Google Webfont Helper herunter geladen werden. Dort bekommt man dann passend zur Webfont auch ein CSS Schnipsel, den wir uns in die Zwischenablage kopieren und dann als neue Datei ablegen, in der wir eben schon in der TPL verwiesen haben:

source/out/flow/src/css/gfont.css

/* raleway-regular - latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

(Dies gilt natürlich nur für das Flow Theme, und von dessen Ableitungen und ChildThemes)

Fonts lokal speichern

In der OXID Verzeichnisstruktur besteht nun schon ein Ordner für Schriftarten, in dessen wir dann auch unsere entpackten RALEWAY Dateien kopieren. Hierfür verwenden wir gern das Tool WINscp.
Der Ordner ist: source/out/flow/src/fonts/

Jetzt muss noch der TMP Ordner des Shops geleert werden. Entweder über das Backend oder per Konsole mit dem rm -r * Kommando. Hier bitte bitte drauf achten, das ich Euch im Ordner source/tmp befindet.

Als Ergebnis seht ihr dann in den Entwicklertools: