Sehr geehrte Kunden,
TIPP zwischendurch: Eigentlich schon immer von Vorteil (da es Punkte im Google Speedtest bringt) wird nun auch die DSGVO für extern geladene Schriften zu einer Hürde. Denn in den Datenschutzbestimmungen muss man dann auch darauf hinweisen.
Google bietet dafür auch eine Hilfeseite an. Über https://google-webfonts-helper.herokuapp.com/fonts kann man auf der linken Seite die Lieblingsschriftart auswählen, dann als ZIP herunterladen und bekommt ein vorgefertigtes CSS angeboten, was über Layout > Schriften/CSS > Root eingebunden werden kann. Zuvor packt man die ZIP aus und lädt diese Dateien in das IMG-Verzeichnis.
Am von Google vorgeschlagenen CSS muss man dann nur noch die Verzeichnisse ersetzen. Aus:
@font-face {
font-family: 'Aldrich';
font-style: normal;
font-weight: 400;
src: url('fonts/aldrich-v8-latin-regular.eot');
src: local('Aldrich Regular'), local('Aldrich-Regular'),
url('fonts/aldrich-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
url('fonts/aldrich-v8-latin-regular.woff2') format('woff2'),
url('fonts/aldrich-v8-latin-regular.woff') format('woff'),
url('fonts/aldrich-v8-latin-regular.ttf') format('truetype'),
url('fonts/aldrich-v8-latin-regular.svg#Aldrich') format('svg');
}
wird dann:
@font-face {
font-family: 'Aldrich';
font-style: normal;
font-weight: 400;
src: url('img/aldrich-v8-latin-regular.eot');
src: local('Aldrich Regular'), local('Aldrich-Regular'),
url('img/aldrich-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
url('img/aldrich-v8-latin-regular.woff2') format('woff2'),
url('img/aldrich-v8-latin-regular.woff') format('woff'),
url('img/aldrich-v8-latin-regular.ttf') format('truetype'),
url('img/aldrich-v8-latin-regular.svg#Aldrich') format('svg');
}
Sprich die Referenzierung wird auf das img/ Verzeichnis geändert.
Am Ende darf man nicht vergessen die alte Einbindung der Google-Font zu entfernen.
Am besten vor dieser Änderung den Google Speedtest durchführen und mit dem nach der Änderung vergleichen. In der Regel kann man damit auch ein paar Punkte Speed rausholen.
Natürlich hat das auch einen positiven Effekt auf die Ladegeschwindigkeit der Seite. Habe das z.B. gestern auf powergap.de alles gemacht und wir sind sowohl auf Mobile und auf Desktop bei 93 Punkten.
TIPP zwischendurch: Eigentlich schon immer von Vorteil (da es Punkte im Google Speedtest bringt) wird nun auch die DSGVO für extern geladene Schriften zu einer Hürde. Denn in den Datenschutzbestimmungen muss man dann auch darauf hinweisen.
Google bietet dafür auch eine Hilfeseite an. Über https://google-webfonts-helper.herokuapp.com/fonts kann man auf der linken Seite die Lieblingsschriftart auswählen, dann als ZIP herunterladen und bekommt ein vorgefertigtes CSS angeboten, was über Layout > Schriften/CSS > Root eingebunden werden kann. Zuvor packt man die ZIP aus und lädt diese Dateien in das IMG-Verzeichnis.
Am von Google vorgeschlagenen CSS muss man dann nur noch die Verzeichnisse ersetzen. Aus:
@font-face {
font-family: 'Aldrich';
font-style: normal;
font-weight: 400;
src: url('fonts/aldrich-v8-latin-regular.eot');
src: local('Aldrich Regular'), local('Aldrich-Regular'),
url('fonts/aldrich-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
url('fonts/aldrich-v8-latin-regular.woff2') format('woff2'),
url('fonts/aldrich-v8-latin-regular.woff') format('woff'),
url('fonts/aldrich-v8-latin-regular.ttf') format('truetype'),
url('fonts/aldrich-v8-latin-regular.svg#Aldrich') format('svg');
}
wird dann:
@font-face {
font-family: 'Aldrich';
font-style: normal;
font-weight: 400;
src: url('img/aldrich-v8-latin-regular.eot');
src: local('Aldrich Regular'), local('Aldrich-Regular'),
url('img/aldrich-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
url('img/aldrich-v8-latin-regular.woff2') format('woff2'),
url('img/aldrich-v8-latin-regular.woff') format('woff'),
url('img/aldrich-v8-latin-regular.ttf') format('truetype'),
url('img/aldrich-v8-latin-regular.svg#Aldrich') format('svg');
}
Sprich die Referenzierung wird auf das img/ Verzeichnis geändert.
Am Ende darf man nicht vergessen die alte Einbindung der Google-Font zu entfernen.
Am besten vor dieser Änderung den Google Speedtest durchführen und mit dem nach der Änderung vergleichen. In der Regel kann man damit auch ein paar Punkte Speed rausholen.
Natürlich hat das auch einen positiven Effekt auf die Ladegeschwindigkeit der Seite. Habe das z.B. gestern auf powergap.de alles gemacht und wir sind sowohl auf Mobile und auf Desktop bei 93 Punkten.