Ihr kennt Google Fonts nicht? Dann seit ihr vermutlich kein Entwickler, Frontend-Designer oder Blogger. Google Fonts ist ein Angebot von, wer hätte es gedacht…, Google. Dort gibt es sehr viele unterschiedliche Fonts in einem riesigem Katalog ansehnlich aufbereitet. Hier findet eigentlich jeder etwas das zu seinem Style passt. Keine Frage, die Googlefonts sind super. Sie schauen gut aus, kosten kein Geld und man kann sie schnell mal eben über Googles CDN einbinden.
Warum Google Fonts lokal einbinden?
Mein einziger Kritik Punkt an dem Angebot? Google forciert das nutzen seines CDN. Oder sollte ich lieber „FDN“ (Font Delivery Network) sagen? Überall auf der Seite werden Möglichkeiten und Beispiele gezeigt wie man einen Font der einem gefällt einbinden kann. Jedoch immernur als externe Quelle. sei es ein @import für das css welches die URL fonts.googleapis.com/css…. importiert. Oder direkt als <link rel=“stylesheet“ href=“….“>. Das Ergebnis ist immergleich. Der Nutzer der deine Seite aufruft, ruft auch die (google)URL „fonts.googleapis.com/css….“ und somit eine externe Quelle auf. Das ist eine weitere Verbindung die der Browser aufbauen muss und könnte unter Umständen zu längeren Ladezeiten führen.
Viel interessanter ist jedoch die Tatsache das Google aus diesem Aufruf natürlich auch wieder Informationen ziehen kann/könnte. Und genau hier kommt unter anderem das „größte“ Problem. Dank der DSGVO ist dies nämlich sehr kritisch zu sehen. Und damit wir nicht einen zusätzlichen PopUp Banner einblenden müssen, der den Besucher um sein Einverständnis bittet damit wir die von uns verwendeten Fonts von einem externen Anbieter nachladen dürfen, wollen wir in Zukunft die Google Fonts natürlich lokal einbinden.
Wie bindet man Google Fonts lokal ein?
Das ist eigentlich ganz einfach. Den gewünschten Font von Google herunterladen und auf den eigenen Server ablegen. Die Font-Verweise der eigenen Webseite dann auf die selbst gehosteten Dateien zeigen lassen. Und mehr ist es tatsächlich nicht. Trotzdem erkläre ich das ganze noch einmal genauer und in kleineren Schritten.
Welchen Font nutze ich?
Welchen Google Font man nutzt sollte man natürlich wissen. Zumindest wenn man das Design der Seite selbst erstellt hat. Häufig nutzt man aber fertige Themes oder hat die eigene Seite von einer Agentur erstellen lassen. In diesem Fall müssten wir erst einmal prüfen ob überhaupt Google Fonts extern eingebunden werden.
Dies geht am einfachsten über die Entwicklerkonsole des jeweiligen Browsers. In meinem Fall Google Chrome.
Die Entwicklerkonsole öffnet man am schnellsten mit der Taste „F12“.
Ansonsten hat jeder Browser im Kontext-Menü, welches man durch einen Rechtsklick irgendwo auf der Webseite öffnen kann, einen Menüpunkt der in etwa „Element Untersuchen“ oder nur „Untersuchen“ lautet.
Bei Firefox findet sich ein Reiter namens „Debugger“ und dort nochmal ein Punkt „Quellen“ der vorausgewählt sein sollte. Bei Chrome wäre dies der Reiter „Sources“.
Hier kann man nun nach einem Neuladen der Webseite sehen ob z.B. Ressourcen von „googleapi“ eingebunden wurden. Im Screenshot habe ich einmal ein Beispiel angehangen und markiert.
Über diesen Weg kann man so ziemlich genau herausfinden ob und welche GoogleFonts man nutzt. Welche Fonts es sind lässt sich über die jeweilige URL bzw. die Parameter herausfinden.
In meinem Beispiel haben wir 2 URLs die eingebunden werden:
css?family=Open+Sans%3A700&ver=1.0
sowie
css?family=Roboto+Slab%3A400%2C700&ver=1.0
Das entspricht den Schriften Open Sans mit einer font-weight von 700. Sowie der Schriftfamilie Robot mit einer von font-weight von 400 und 700.
Im nächsten Schritt kümmern wir uns darum wo/wie man die Fonts am besten herunterlädt.
Herunterladen von Google Fonts
Wir wissen also nun welchen Font bzw. welche Fonts wir benötigen. Um diese herunter zu laden empfiehlt sich der google webfonts helper.
Auf der webfont helper Seite können wir nun einfach nach den Schriftarten suchen. Bei einer Suche nach Robot Slab erhält man z.B. die folgende Ansicht:
Hier können also die einzelnen Styles ausgewählt werden. Das Tool packt einem alles was man ausgewählt hat zusammen und bietet einem eine .zip als Download an. Der Google Webfont Helper zeigt einem aber auch gleich wie wir diese am besten einbinden. Unter Punkt 3 sind die css Befehle zu sehen um den best möglich Support bei allen Browsern zu gewährleisten. Diesen CSS Auszug kopieren wir uns also auch gleich an die Seite.
(Man beachte das kleine Feld unter dem css Snippet. Hier kann man einen individuellen Pfad zu seinen Fonts angeben. Hat ja schließlich nicht jeder die selbe Ordnerstruktur.)
Google Fonts auf den eigenen Server hochladen
In dem Ziparchiv oder den Archiven findet ihr nun die Schriften in allen möglichen Formaten (SVG, TTF, WOFF(2), EOT).
Diese laden wir am besten in einen separaten Font Ordner auf unseren Server.
CSS für lokale Google Fonts anpassen
Um nun die lokalen Font Dateien zu nutzen, müssen wir das CSS der Webseite anpassen. Zum einen müssen wir verhindern das die Google Fonts über die Google URL eingebunden werden. Und zum anderen die lokalen Dateien einbinden.
Für das Verhindern der Verbindung zu den Google Diensten, stehen zahlreiche Plugins in WordPress zur Verfügung. In meinem Fall bietet das von mir genutzte Theme „Kent“ die Option Google Fonts über eine Variable zu deaktivieren. Diese Variable ist genaugenommen einfach nur ein „Übersetzter Text“. Und zwar kann ich mittels dem Plugin „Loco Translate“ einen Text übersetzen
Das einbinden der lokalen Fonts geht ganz einfach in dem man die CSS Snippets vom Google Webfont Helper nun in die eigene css Datei kopiert. Wenn der Pfad zu den Dateien korrekt ist, sollten anschließend die lokalen Fonts verwendet werden. Dies kann man wieder ganz einfach über die Entwicklerkonsole prüfen.
Schreibe einen Kommentar