Nachladen der Fonts unterbinden:
1.) Das erste was ihr machen müsst, ist das Nachladen der Googlefonts über euer Joomla51 Template zu unterbinden. Dafür wechselt ihr in ../templates/EuerTemplate/inc/fonts.php.
2.) Dort müsst ihr folgenden Code entfernen:
foreach ($googlefonts as $v) { // loop
$app->getDocument()->addStyleSheet('//http://fonts.googleapis.com/css?family=' . $v . ':' . $font_weights . '&&subset=' . $font_subset . '&display=swap');
}
Benötigte Schriften herunterladen:
3.) Als nächsten müsst ihr eure benötigten Fonts herunterladen. Auf der Webseite von Mario Ranftl könnt ihr diverse Schriftarten herunterladen google-webfonts-helper.herokuapp.com.
4.) Gibt hierzu einfach in der Suche die benötigte Schriftart ein. In meinem Beispiel suche ich einfach mal nach Roboto
5.) Anschließend müsst ihr bei dem Punkt 3 (CSS) den Pfad eures Fonts-Ordners anpassen und den CSS Code kopieren. Bei Joomla51 Templates ist der Pfad folgender: /templates/EUER-TEMPLATE/fonts/
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../templates/EUER-TEMPLATE/fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
Fonts herunterladen und auf den Webspace ablegen:
6. Nun müsst ihr noch die Fonts herunterladen und auf euren Webspace im Ordner templates/EUER-TEMPLATE/fonts/ ablegen.
CSS Code in Template einbinden:
7.) Den kopierten CSS Code könnt ihr in eurem Joomla51 Template unter den Templateinstellungen beim Punkt Custom CSS einfach hinterlegen. Alternativ könnt ihr euch natürlich auch eine eigene custom.css anlegen.
8.) Nun sollten euch die neuen lokal eingebundenen Schriften zur Verfügung stehen.
Überprüfen ob die Verbindung zu Google noch besteht
Zum Schluss sollte ihr eure Webseite komplett neu laden und überprüfen ob die Schriften dargestellt werden. Außerdem solltet ihr testen ob die Schriften nicht mehr von Google direkt bereitgestellt werden.
Dieses könnt ihr ganz einfach über die Entwicklettools eures Browsers vornehmen. Anhand des Bildes könnt ihr sehen, dass die Datei roboto-v20-latin-500.woff2 auf dem Host www.allerseiten.de liegt bzw. von dort bezogen wird und nicht über Google.
https://www.shop.framotec.com/detail/index/sArticle/21/sCategory/15?number=SW10021