Probleme mit Google Fonts.

  • Notizbucheinträge

Google Fonts sind ungeheuer einfach zu nutzen. Viele RapidWeaver-Themes habe sie integriert und selbst die Frameworks lassen die Einbindung der Google Fonts als Webfonts in einfachster Weise zu. Doch die Einfachheit der Nutzung hat ihre Folgen.

Google stellt seinen Nutzern seit vielen Jahren eine ganze Reihe von Schriften zur Verfügung, die von jedem, der sich eine Webseite zusammenstrickt, kostenfrei genutzt werden können. Gegenüber anderen Anbietern (Typekit, FontSquirrel u.a.) ist das ein nicht zu unterschätzender Vorteil. Die Lizenzierung erledigt Google und die meisten Schriften werden per OFL (Open Font Lizenz) oder Apache License lizensiert.


Kostenlos nutzbare Schriften

Wer Google Fonts nutzen möchte, muss sich nicht registrieren, braucht keinen Nutzungsvertrag abzuschließen, sondern kann die Schrift einfach per Code in eine Webseite integrieren. Bei RapidWeaver-Themes erledigt diese Einbindung das Theme selbst, soweit sie nicht vom Theme auf den Server geladen werden.

Öffnet ein Seitenbesucher danach die zugehörige Webseite, so werden die Schriftarten automatisch von den Google-Servern geladen und auf deiner Seite angezeigt.

Herunterladen kannst du die Schriften von GitHub:

google/ fonts

Hier gibt es eine ZIP-Datei zum Herunterladenaller Google Fonts-Dateien. Vergiß bitte nicht das zugehörige OFL- bzw. Apache-License Dokument als Textdokument ausfindig zu machen und auf deinem Server in den Font-Ordner zu integrieren. Informationen über die Lizenz findest du bei Google Fonts bei der jeweiligen Schrift.


Datenschutzprobleme

Das erste Problem: Google erfährt so über jeden Seitenzugriff, Google lässt sich die kostenlose Nutzung also mit den Daten der Seitenbesucher bezahlen. Das ist der erste Haken an der Sache.


Performanceprobleme

Der andere Wermutstropfen ist die Ladegeschwindigkeit: Schriften sind eigentlich kleine Programme. Die müssen im Falle der Google Fonts erst von einem externen Server bereit gestellt werden bevor auf der Webseite Schriften angezeigt werden. Im Regelfall funktioniert das auch weitgehend problemlos, aber z.B. bei erhöhter Server-Last (oder wenn der Server, so das wie gerade dieser Tage der Fall war und der Serverzugriff überhaupt nicht möglich war) gibt es Probleme.

Wenn du also einen Geschwindigkeitsschub für deine Webseite möchtest und auch das datenschutzrechtliche Problem lösen möchtest, solltest du die Google Fonts direkt herunter laden und selbst auf deinem eigenen Server hosten. Das vermindert externe Serverabfragen, die eine Webseite grundsätzlich, ganz unabhängig von der Schrifteneinbindung verlangsamen.


Sicherheitsprobleme

Und ein drittes Problem ist ein Sicherheitsaspekt: Ein bestimmtes Sicherheitskonzept ( Same Origin Policy bzw. SOP) erlaubt Skripten wie Javascript oder CSS, nur auf Objekte (in unserem Fall sind es die Schriften) zuzugreifen, die von derselben Quelle stammen wie das Skript selbst. Das ist bei extern eingebundenen Schriften nicht der Fall und gerade bei über HTTPS-Anfragen aufrufbare Seiten wird es zu einem Problem kommen. In der Konsole der Entwickler Tools wird dieser Fehler auftauchen:

Access to Font […] has been blocked by CORS policy: No ‚Access-Control-Allow-Origin‘ header is present on the requested resource. Origin […] is therefore not allowed to access.

Und es wird ein Fallback-Font angezeigt werden.

Dieses Problem kann man jedoch durch eine Regel in der .htaccess ( Cross-Origin Resource Sharing, bzw. CORS) entschärfen:

// CORS für Fonts //
<IfModule mod_headers.c>
<FilesMatch "\.(woff|woff2|ttf)$">
Header unset Vary
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>


Selberhosten der Schriften

Der sauberere Weg ist aber das Selberhosten der Schriften. Das geht bei einigen RapidWeaver-Themes allerdings nicht ohne größere Umbauten, für die ein wenig Spezialwissen erforderlich ist oder über die Nutzung von Font-Stacks, die das Einbinden eigener Schriften zulassen:

Bildquelle: Pexels