Durch die DSGVO ist es ja nun nicht mehr die übliche Vorgehensweise, Fonts über Google einzubinden, da man andernfalls riskiert, dass Besucherdaten ohne vorherige Einwilligung gespeichert werden. Eine alternative Lösung muss her, bei der wir für einen Moment leicht technisch werden. Denn heute zeige ich dir, wie das Fonts einbinden über den eigenen Webspace funktioniert.
Du benötigst dafür:
- ca. 15 bis 20 Minuten deiner Zeit
- Ein vorheriges Backup deiner Website (Datenbanken nicht vergessen!)
- Zugang zum Editor deines Designs
- FTP plus die Zugangsdaten davon zu deiner Seite
Wenn du die Zugangsdaten nicht hast, musst du diese vorher bei deinem Hoster erfragen. In der Regel werden diese nach Anmeldung des Webspaces sofort an dich gesendet. Du hast sie also schonmal erhalten.
Brauchst du noch ein FTP Programm, dann kann ich dir FileZilla empfehlen. Das ist gratis und schnell installiert. Ich verwende schon seit Jahren nur noch das, obwohl ich zwischendurch auch kostenpflichtige Lösungen genutzt habe. Ist einfach am unkompliziertesten, finde ich.
Die Vorbereitung: Was du zum Einbinden wissen musst
Du brauchst, bevor du überhaupt loslegen kannst, zuerst die Info, welche der Google Webfonts dein Theme zuvor verwendet hat. Wenn du es nicht ganz so klug angestellt hast und auf deiner Seite nun entweder alles in Arial oder Times New Roman verfasst ist, wurden die Google Fonts entfernt, bevor du sie über deinen eigenen Webspace eingebunden hast. Blöd gelaufen, kann mal passieren. Ich zeig dir, wie du die Schrift rausbekommst, anhand vom Theme meines Blogs, auf dem du dich gerade befindest. Für diese Vorgehensweise brauchst du allerdings Firefox, denn der hat die Entwicklerwerkzeuge integriert.
So gehst du vor:
-
Such dir das Theme nochmal bei Google raus (in meinem Fall Yosemite), denn hier kannst du die ursprüngliche Font nach wie vor sehen.
- Mache einen Rechtsklick auf den Text, dessen Font du suchst und wähle den Punkt “Element untersuchen” aus.
- Es öffnet sich nun ein eigenes Fenster mit dem Quellcode der Seite. Dir wird auffallen, dass Firefox praktischerweise den Bereich markiert, den du mit deinem Mauszeiger im Quellcode berührst.
- Markiere einen Textbereich, der die betreffende Font verwendet und wirf einen Blick in die Regeln, die du im Entwicklerwerkzeug sehen kannst. Hier findest du eine Zeile, die einen Hinweis darauf gibt, welche Schriftart verwendet wird:
Du weißt also nun, welche Schriftart ursprünglich verwendet wird und musst diese nur noch auf deinen Webspace hochladen, damit nun wieder alles aussieht, wie es sein soll.
Nutze den Google Webfont Helper
Es ist nicht erst seit der DSGVO eine gefragte Vorgehensweise, Fonts vom eigenen Webspace zu laden. Daher gibt es äußerst nützliche Seiten, wie etwa den Google Webfont Helper, den ich dir in diesem Fall nahelege, zu verwenden.
Hier suchst du nun die betreffende Schriftart heraus und wählst sie aus. Dadurch gelangst du zu einer eigenen Unterseite, die mit ein paar Lesebeispielen in jedem Schriftstil (kursiv, unterstrichen, fett, …), einem Code für dein CSS und einem Download-Button ausgestattet ist.
Zunächst lädst du die Schriftart herunter, denn diese Daten transferierst du nun über FTP direkt auf deinen Webspace. Damit dann auch alles klappt, ohne dass du groß noch etwas am Code ändern musst, wählst du dafür den Ordner über demjenigen aus, in dem dein style.css liegt. Hier erstellst du einen neuen Ordner, den du fonts nennst und ziehst die Daten aus dem soeben geladenen .zip-Ordner hinein.
Moment, was?! Ich verstehe nur Bahnhof!
Wirf einen Blick auf den Code, den der Webfont Helper bereitstellt (Schritt 3: Copy CSS). Ich kopiere meinen mal kurz hier rein, damit du ein besseres Beispiel hast:
/* lora-regular - latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url('../fonts/lora-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Lora Regular'), local('Lora-Regular'),
url('../fonts/lora-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v12-latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}
Du siehst hier zwei Zeilen, die mit src: beginnen. Das ist kurz für source, also Quelle. Sprich, hier geht es um den Ort, an dem die Schriftart gespeichert wird und von wo aus sie abgerufen werden muss. Der Weg lautet in diesem Fall ../fonts/lora-v12-latin-regular.eot, wobei das ../ bedeutet, dass die styles.css aus dem eigenen Ordner raushüpfen muss und dort nach einem Ordner “fonts” suchen muss.
Die styles.css deines Designs befindet sich unter folgendem Pfad in deinem FTP-Stammverzeichnis:
wp-content → themes → Ordner deines Themes*
*der Name des Ordners variiert natürlich auch mit dem Theme, das du installiert hast. Das bedeutet, dass du den fonts-Ordner Bereits im themes-Ordner anlegen musst und nicht erst im Ordner deines Designs.
Danach nur noch den Code in style.css kopieren
Zum Schluss rufst du nun noch deine style.css auf. Das kannst du entweder über FTP machen oder auch hier in WordPress. Hier findest du die Datei links über die Sidebar unter Design → Editor. In der Regel wird hier die styles.css Datei als erstes geöffnet. Vergewissere dich allerdings, ob das auch wirklich der Fall ist, sieh dazu auf den Dateinamen ganz oben in der Überschrift:
Kopiere nun den Code aus dem Feld der Seite und füge ihn ganz unten in style.css ein. Dann noch speichern und fertig! Nutzt du ein Cache-Plugin, solltest du diesen sicherheitshalber nun noch löschen und dann ist die Schriftart wieder ganz die alte.