WordPress 4 Grundkurs

Google Fonts erkennen und ändern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Google Webfonts sind eine komfortable Sache. Aber dabei wird auch die IP-Adresse Ihrer Websitebesucher an Googles Server weitergeleitet. Datensparsamer ist es, wenn Sie Schriftarten selbst hosten. Dafür müssen Sie sich die Webfonts auf Ihren Server laden.
05:34

Transkript

Google Webfonts sind schön und bequem zugleich. Eine Zeile Code und Sie haben schöne Schriften auf Ihrer Webseite. Aus Datenschutzgründen haben Sie jetzt allerdings ein Problem, denn bei jedem Seitenaufruf wird ja auch eine externe Quelle von Google Fonts API geladen und dann werden eben dort auch Nutzerdaten übertragen, wie beispielsweise die IP-Adresse. Ich zeige Ihnen jetzt also einen Weg, wie Sie die Google Webfonts herunterladen und auf Ihren eigenen Webserver übertragen können und sie dort dann hosten. Drei Dinge sind dafür notwendig. Erstens: Sie müssen die Schriftdateien von Google herunterladen und auf Ihren Server wieder hochladen. Zweitens: Sie müssen in der CSS-Datei auf Ihre neuen Schriftarten, die Sie selber hosten, hinweisen. Und drittens: Sie müssen den Serveraufruf der Google Fonts API unterbinden. Schauen wir uns mal an, welche externen Schriftarten denn eigentlich eingebunden werden. Ich gehe auf meine Website, mit Strg+Shift+I gehe ich auf die Entwicklerkonsole und dann wähle ich hier Sources aus Und hier sehen Sie, fonts.googleapis.com wird abgefragt. Wenn ich hier auf das Pfeilchen klicke, dann sehe ich hier, die Schriftart Libre Franklin wird verwendet und dann in der Breite oder Dicke 300, 300i für Italics, 400, 600, 800 und das Ganze im Subset Latin und Latin Extended. Diese Schriftarten muss ich zunächst einmal herunterladen und auf meinen Server kopieren. Ich mache die Entwicklerkonsole wieder zu und suche jetzt mal nach "google fonts helper". Dann komme ich auf eine Seite, die heißt google-webfonts-helper.herokuapp.com. Da suche ich jetzt mal nach Libre Franklin. Da habe ich es schon. Und als Nächstes muss ich erst mal auswählen, welchen Schriftschnitt ich denn haben möchte, also Latin Extended hatten wir. Und dann habe ich hier 300italic, 300, 600, 800, 800italic. Und als Nächstes werde ich hier zwar aufgefordert, erst mal den CSS-Code zu kopieren. Ich mache es aber lieber andersrum; ich lade zuerst die Schriftarten herunter und binde sie später ein, denn wenn ich sie erst in der CSS-Datei einbinde und sie aber noch nicht hochgeladen habe, dann kommt es zu einer Fehlermeldung. Also lade ich jetzt erst einmal diese ganzen Schriftarten herunter, diese Schrift-Files. Jetzt habe ich sie hier auf meiner lokalen Maschine. Die kann ich mir jetzt hier anzeigen lassen, gehe hier rein, markiere alle, gehe auf Kopieren und jetzt wechsle ich in mein WordPress-Verzeichnis wp-content themes. Und in diesem themes-Ordner, also nicht direkt im Theme, sondern in diesem übergeordneten themes-Ordner, mache ich ein neues Verzeichnis auf. Das nenne ich fonts. Der Vorteil ist, dass wenn Sie später Ihr Theme wechseln, dass andere Themes auch auf diese Schriftarten zugreifen können. Gehe hier nach fonts rein und füge diese Schriftarten jetzt hier ein. Jetzt sind sie zunächst einmal auf meinem System vorrätig. Jetzt muss ich sie von der CSS-Datei noch referenzieren, also dem WordPress sagen, dass er eben diese Schriftart nehmen soll und nicht die von Google. Dazu gehe ich wieder zurück zum Google Webfonts Helper und hier kann ich jetzt entscheiden, ob ich den bestmöglichen Support haben möchte oder ob ich mich nur auf moderne Browser spezialisieren möchte. Das bleibt Ihnen überlassen. Einmal reinklicken und diesen ganzen Text in die Zwischenablage nehmen. Jetzt gehe ich wieder zurück in meinen WordPress-Ordner wp-content themes und jetzt wähle ich das tatsächliche Theme aus, das ich ändern möchte, also hier zum Beispiel twentyseventeen. Und entweder lege ich jetzt ein Child Theme an oder ich bearbeite direkt das Theme. Hier muss ich in die Datei style.css gehen. Am Anfang dieser Datei sind noch Kommentare, die sind entweder ausgegraut, aber Sie erkennen sie vor allem an diesen Schrägstrichen und Sternchen. Und hier, wo es dann richtig losgeht mit dem eigentlichen CSS-Code, da füge ich nun meinen neuen Code ein. Achte darauf, dass ich gegebenenfalls noch eine Leerzeile hintendran habe und ab dann versucht WordPress, diese lokalen Schriftarten zu nehmen. Ich speichere das Ganze ab. Als Letztes muss ich jetzt nur noch dafür sorgen, dass der Google Server nicht mehr angesprochen wird, um die Schriften von dort zu laden. Und das geht am leichtesten, denn dazu gehe ich einfach ins Backend auf Plugins installieren und suche nach "remove google fonts". Nehmen Sie hier das zweite Plugin, das mit dem etwas altbackenen Logo, das hat nämlich 20.000 aktive Installationen und nicht nur 3.000. Hier gehe ich einfach auf Installieren und dann auf Aktivieren. Einstellen muss ich bei diesem Plugin nichts. Jetzt kann ich noch mal überprüfen, ob die Schriftarten da sind, ob ich da alles richtig gemacht habe und ob der Google Server noch angesprochen wird. Ich gehe wieder mit Strg+Shift+I in die Entwicklertools, gehe auf Sources und jetzt sehen Sie, werden die Schriftarten hier nicht mehr von Google geladen, sondern hier von meinem lokalen System. Können Sie überprüfen hier: wp-content/themes fonts und dann werden hier die Schriftarten direkt von Ihrem eigenen Server geladen und Sie haben gar kein Datenschutzproblem mehr diesbezüglich.

WordPress 4 Grundkurs

Das komplette Grundwissen macht Sie zum WordPress-Kenner.

4 Std. 3 min (75 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!