Google Fonts selber hosten
Einführung
Cassiopeia bietet in den Template-Einstellungen die Möglichkeit, die bereits im Template integrierte Schrift Roboto (local) zu verwenden. Das ist problemlos möglich.
Als weitere Option kann man die Webfonts Fire Sans oder Roboto + Noto Sans wählen. Diese werden allerdings aus externen Quellen geladen. Sollte der Support eingestellt werden, kann die Schrift nicht mehr angezeigt werden. Zudem kann das Laden von Schriften aus externen Quellen in manchen Ländern gegen die Datenschutzbestimmungen verstoßen. Denn in der Regel werden bei der Kommunikation mit einem externen Server (z.B. Google-Server) persönliche Daten wie z.B. die IP-Adresse weitergeleitet.
Lösung:
Alternativ lassen sich Webfonts lokal einbinden und dann vom eigenen Server laden.
Dadurch findet keine Verbindung zu externen Webfont-Servern statt und es werden keine Daten wie beispielsweise die IP-Adresse weitergegeben werden. Grundsätzlich sind dazu nur 2 Schritte notwendig:
- Google Font auswählen, herunterladen und einbinden
- Deaktivierung der alten Verweise
Was die Realisierung betrifft, so gibt es mehrere Möglichkeiten:
- Manuelle Ausführung
- Verwendung von Plugins
Hinweise:
1. Grundlegend lassen sich Webfonts nicht nur im Cassiopeia-Template lokal hosten. Prinzipiell funktioniert das auch bei anderen Templates. Somit lassen sich von externen Quellen geladene Webfonts jederzeit durch lokale Fonts ersetzen. Insbesondere bei der manuellen Ausführung kann es hierbei jedoch leichte Abweichungen geben. In der weiteren Beschreibung bezieht sich alles auf das Cassiopeia-Template.
2. Es kann sein, dass Sie mit einer Kopie des Cassiopeia-Templates bzw. einem Child-Template arbeiten. In diesem Fall passen Sie den Template-Namen in der folgenden Anleitung entsprechend an!
Manuelles Ausführung
1. Google Font auswählen, herunterladen und einbinden
Gehen Sie auf die folgende Webseite: https://google-webfonts-helper.herokuapp.com/fonts
Wählen Sie einen Google Font mit dem gewünschten Charset und Style aus, z.B. "Open Sans" !
- Laden Sie die dazugehörige Datei (zip) herunter und entpacken Sie diese in folgendes Verzeichnis: media/templates/site/cassiopeia/fonts/OpenSans-v11-latin/...
Das Verzeichnis "fonts" muss vorher erstellt weden, da es normalerweise nicht existiert. - Kopieren Sie den dazugehörigen CSS-Code per "Copy & Paste" in die user.css des Cassiopeia-Templates! Passen Sie im CSS-Code ggfs. die Pfade zu den Google Font-Dateien an, welche im Verzeichnis "fonts" liegen. Nun sollten diese gefunden werden. Sollte die user.css noch nicht existieren, dann legen Sie diese vorher an! Sie muss in folgendem Verzeichnis erstellt werden: media/templates/site/cassiopeia/css/user.css
Wichtig:
Ab Joomla 4.1: Der Pfad zu den Template-Medien-Verzeichnissen befindet sich hier:
media/templates/site/cassiopeia/...
Darin befinden sich die Medien-Verzeichnisse img, images, fonts, js, scss.
Vor Joomla 4.1: Der Pfad befand sich hier:
templates/cassiopeia
2. Deaktivierung der alten Verweise
Achtung: Dieser Beitrag wird gerade neu erstellt!
Um die Verbindung zu Servern von Google zu vermeiden, müssen nun noch die bisherigen Verweise deaktiviert bzw. entfernt werden. Dazu muss die index.php im Cassiopeia-Template bearbeitet werden.
/templates/cassiopeia/index.php
Am einfachsten ist es, die Zeile 52 als Kommentar zu setzen:
Original:
JHtml::_('stylesheet', 'https://fonts.googleapis.com/css?family=' . $font);
Neu:
/* JHtml::_('stylesheet', 'https://fonts.googleapis.com/css?family=' . $font); */
Lokale Webfonts über Plugins einbinden
Alternativ zur manuellen Installation und Einbindung von Webfonts gibt es auch einige hilfreiche Plugins, die das Installieren etwas vereinfachen.
Plugin zur Einbindung von lokalen Webfonts
Das Plugin von Joomtools lädt extern geladene Dateien oder Schriften in das lokale Dateisystem herunter und stellt sie von der lokalen Domäne aus zur Verfügung.
JT - ALDEF
Hier downloaden: https://github.com/JoomTools/plg_system_jtaldef
Plugin zur Entfernung externer Links
Das folgende Joomla-Plugin findet und entfernt alle externen Links zu "Google Font Servern", die durch ein Template oder eine Erweiterung hinzugefügt wurden:
JMG Disable Google Font
Bitte hier suchen: https://extensions.joomla.org/extension/
