01.11.2022 | Allgemein, Netzwelt
Google Webfonts lokal einbinden

geschrieben von Jens , ,

Seit einigen Wochen sind Abmahnungen diverser Rechtsanwaltskanzleien im Umlauf, die viele Website-Betreiber zunächst vor eine technisch nicht einfache Aufgabe stellt. Viele Systeme, wie bspw. WordPress, nutzen in Ihren Themes schon länger extern geladene Google Fonts. Google Fonts selbst gibt es seit mehr als 10 Jahren und sie erfreuen sich noch immer sehr großer Beliebtheit. Auf die zweifelhafte Rechtmäßigkeit der Abmahnungen selbst kann und möchte ich hier nicht näher eingehen. Aber einen kleinen Hinweis, wie du in deiner Website Google Webfonts lokal einbinden kannst, kann ich dir geben.

Ein gutes Tool, um fast auf den vollständigen Pool der Google Webfonts zugreifen zu können, ist der Google Webfonts Helper unter google-webfonts-helper.herokuapp.com. Hier kannst du deine Schriftart wählen und erhälst neben den eigentlich Dateien auch umgehend das notwendige CSS zur Ergänzung deiner Seite. Allein die Pfadangabe muss angepasst werden und abschließend muss das CSS lediglich noch auf deiner Seite eingebunden werden.

Zunächst wählst du deine Schriftart:

Für die Schrift Lato wird dann folgendes CSS angeboten:

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

Prüfen ob externe Inhalte geladen werden?

Es gibt viele Tools, die die Einbindung von externen Tools anbieten. Dabei ist jedoch nicht sicher, wie die Daten verarbeitet werden, die in derartige Online-Tools eingegeben werden. Ein aus meiner Sicht besserer Weg ist zum Beispiel die Entwickler-Konsole von Google Chrome. Mit F12 lässt sie sich öffnen und im Reiter „Network“ unter Auswahl der „3rd Party Requests“ können alle externen Verbindungen aufgezeigt werden. So auch Bibliotheken wie Schriftarten, JS Frameworks, Statstik Software, Google Maps oder ähnliches. Andere Browser haben zumeist ganz ähnliche Funktionen mit an Bord. Aus Erfahrung heraus empfinde ich Chrome hier als durchaus gut und zuverlässig. Firefox hat bei meinen Tests leider nicht alle externen Inhalte erkannt und ausgegeben.

Im Beispiel werden nur extern geladene Inhalte ausgegeben. Und auch hier finden sich Google Fonts, die direkt von den Google Servern ausgeliefert werden. Ein Blick an dieser Stelle lohnt sich insbesondere dann, wenn du fremde Themes (od. Templates) nutzt.

 

 


Du kannst diese Seite via PayPal unterstützen: paypal.me/jensbh

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Mit und gemacht in Kassel 2014 - 2023