Google Fonts lokal einbinden

**ricovabo** · 21.10.2022, 19:44

Hallo Zusammen

Zuerst mal, ich bin mit Contao nicht vertraut (eher WordPress) muss jedoch nun kurzfristig und schnell bei einer Contao-Installation (Vers.3.5) die Google Fonts lokal einbinden. Dazu habe ich mir im Contao-Handbuch die entspr. Anleitung und über „ggogle webfonts helper” die Schriften heruntergeladen und in ein selbst erzeugtes Verzeichnis „fonts” kopiert. Dazu den css-code heruntergeladen und in einer neuen css-Datei namnes „style” eingebaut und in das m.E. allgemeinen css-Verzeichnis gelegt. Leider klappt das überhaupt nicht und ich steige nicht dahinter. Alle Pfadangaben stimmen trotzdem erhalte die Meldung, dass immer noch Schriften geladen werden (Bildschirmfoto-1). Um die Verzeichnisstruktur der vorliegenden Contao-Installation anschaulich zu machen, habe ich Screenshots der Struktur gemacht aus denen ersichtlich sein sollte wo ich die fonts (Bildschirmfoto-fonts) und die css-Datei (Bildschirmfoto-css-datei) gespeichert habe. Auch ein Screenshot der css-Datei ist dabei (Bildschirmfoto-style, allerdings nur ein Ausschnitt).
Ich habe mich zwar intensiv im Forum zu diesem Thema bereits umgesehen, jedoch nichts gefunden was mir geholfen hätte.

**planepix** · 21.10.2022, 19:58

Hallo ricovabo,

willkommen im Forum.

Die genannten Screenshots sind noch nicht hochgeladen.

Unter dem oder den Seitenlayouts ist die Option zu finden, dort die GoogleFonts einzubinden und zu laden.
Dieses Feld solltest du leeren und dann das Seitenlayout speichern.

Und dann deine lokale CSS-Datei als externe CSS-Datei dann im Seitenlayout einbinden.

**mlweb** · 21.10.2022, 21:10

Und schauen, ob ggf. Schriften in den zusätzlichen Headtags manuell eingebunden werden. Übrigens auch Google-Maps lädt ungefragt Schriften.

**tblumrich** · 21.10.2022, 21:51

Zitat von mlweb

Und schauen, ob ggf. Schriften in den zusätzlichen Headtags manuell eingebunden werden. Übrigens auch Google-Maps lädt ungefragt Schriften.

YouTube übrigens auch… musste ich neulich mal, als ein Kunde Y-Videos in seinen Blog eingebunden hatte, auch raus finden. Hatte der liebe Herr Lennard bzw. sein Mandant auch „gesehen“.

**ricovabo** · 24.10.2022, 09:39

Danke euch allen. Die Screenshots dürften inzwischen hochgeladen sein. Und es ist wohl auch so, dass die Fonts lokal eingebunden sind, trotzdem gibt es immer noch eine Verbindung zum Google Server (wie auch aus dem Quelltext - siehe screenshot - zu entnehmen ist). Womöglich liegt es daran, dass - wie aus den Entwicklertools zu entnehmen ist - der Schriftschnitt Open Sans 600 nicht gefunden wird (obwohl er doch lokal vorhanden ist?). Als ergänzende Info hier noch die Domain um die es sich handelt "www.fairsicherung.de".
planepix schreibt, dass es bei den "Seitenlayouts" die Option geben soll Google Fonts einzubinden und zu laden, ich finde jedoch dort keine Option?! (muss mich aber auch korrigieren die Contao-Version mit der ich mich befassen muss ist die Version 3.3.5). Auch in den "Einstellungen" finde ich keine entsprechende Option.
Ich finde auch keinen Hinweis, dass die Links (die "roten" aus dem "Bildschirmfoto-quelltext") manuell gesetzt wurden (lassen sich diese vielleicht "manuell" entfernen?). Google Maps und Youtube werden auf der Website nirgendwo verwendet.

**dazzle89** · 24.10.2022, 10:04

Im Head befindet sich immer noch die Angabe:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">

Könnte aus dem Seitenlayout oder aus dem Seitentemplate kommen, also fe_page.html5

Ich gehe außerdem davon aus, dass der Pfad zu den Fonts nicht korrekt ist. Du verwendest relative Pfade, die in der Ausgabe folgendes ergeben:

https://www.fairsicherung.de/files/F...atin-600.woff2

Da ist irgendetwas doppelt gemoppelt. Vielleicht funktioniert es mit ../../ anstatt von ../

**mlweb** · 24.10.2022, 14:26

Und nur so nebenbei Contao 3.3.5 ist seit 6 Jahren aus dem Support. Da ist dringend ein Update auf eine aktuelle Version erforderlich.
Auch die allgemeine Systempflege ist wichtig - nicht nur das reagieren auf eine Abmahnwelle.

**ricovabo** · 24.10.2022, 15:53

Hallo dazzle89
Aus "fe_page.html5" kommt es nicht - hier der Header aus dieser Datei:

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>

<?php $this->block('head'); ?>
<meta charset="<?php echo $this->charset; ?>">
<title><?php echo $this->title; ?></title>
<base href="<?php echo $this->base; ?>">

<?php $this->block('meta'); ?>
<meta name="robots" content="<?php echo $this->robots; ?>">
<meta name="description" content="<?php echo $this->description; ?>">
<meta name="keywords" content="<?php echo $this->keywords; ?>">
<meta name="generator" content="Contao Open Source CMS">
<?php $this->endblock(); ?>

<?php echo $this->viewport; ?>
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>

<?php $this->block('html5shiv'); ?>

<?php $this->endblock(); ?>
<?php $this->endblock(); ?>

</head>

... und der Pfad zu den fonts sollte doch korrekt sein, wie der screenshot aus sftp-struktur zeigt ("Bildschirmfoto-fonts.jpg" im Anhang).

zu dem Hinweis von mlweb (Aktualisierung der website):
Klar hast Du recht. Aber wie ich bei der Eröffnung dieses Threads bereits geschrieben habe wurde diese Seite nicht von mir erstellt. Bis Anfang letzter Woche kannte ich diese Website noch gar nicht. Ich habe den Auftrag erhalten eine neue Website zu erstellen (mache ich üblicherweise mit WordPress), eine Pflege der bisherigen Seite war nicht im Gespräch. Jetzt hat er eine Abmahnung wg. Google Fonts erhalten (wie so viele) und mich gebeten das Problem zu lösen da der zum Ersteller der Contaoseite keinen Kontakt mehr hat. Conato ist für mich Neuland ich hatte bisher nichts damit zu tun, deshalb tue ich mich schwer darin zu recht zu finden.

**amateur** · 24.10.2022, 17:00

Schau doch mal unter Layout > Themes > Seitenlayouts
entweder unter 'Google Webfonts‘ oder unten unter 'Eigene Head Tags' Da wirst du vermutlich den Übeltäter finden.

**mlweb** · 24.10.2022, 17:13

Darauf hatte ich hier auch schon hingewiesen.

**ricovabo** · 24.10.2022, 21:54

Hallo Zusammen

Den (die) Übeltäter habe ich gefunden (bei Layout > Themes > Seitenlayouts) und die "Google Webfonts" entfernt. Somit ist die Verbindung zum Google Server gekappt und die Seite abmahnsicher. Leider werden die lokal installierten Fonts nicht gefunden, weshalb die Seite nun in der Schritart Times erscheint.
Aber das verstehe ich nicht: Die Fonts liegen doch eindeutig in diesem Verzeichnis files > Fairsicherung > fonts (siehe screenshot "Bildschirmfoto-fonts.jpg). Und auch im style.css wird dieser Pfad aufgeführt (screenshot "Bildschirmfoto-style.jpg" oder nun auch als style.css hochgeladene Datei), trotzdem werden die Schriften nicht gefunden...
Stehe ich denn so auf dem Schlauch?

**tab** · 24.10.2022, 23:47

Wenn du relative Pfade verwendest, dann sind diese relativ zu dem Verzeichnis, in dem die CSS-Datei liegt, also files/Fairsicherung/inc, also wäre der Pfad m.E. wie folgt anzugeben:

Code:

url('../fonts/open-sans-v34-latin-600.woff2')

**zoglo** · 25.10.2022, 18:45

Einfach folgendes in der CSS angeben für deine font locations in url() in der CSS:

Entweder:
1. Relative Pfade

HTML-Code:

url('../../fonts/open-sans-v34-latin-600.woff2')

2. Absolute Pfade

HTML-Code:

url('/files/Fairsicherung/fonts/open-sans-v34-latin-600.woff2')

Beides sollte gehen.

Hier nochmal eine Veranschaulichung:
fontCss.jpg

MfG

**bizon** · 25.10.2022, 19:55

Zitat von zoglo

Einfach folgendes in der CSS angeben für deine font locations in url() in der CSS:

Entweder:
1. Relative Pfade

HTML-Code:

url('../../fonts/open-sans-v34-latin-600.woff2')

2. Absolute Pfade

HTML-Code:

url('/files/Fairsicherung/fonts/open-sans-v34-latin-600.woff2')

Beides sollte gehen.

Hier nochmal eine Veranschaulichung:
fontCss.jpg

MfG

@zoglo
Der Absolute Pfad stimmt so nicht. Vom Contao-ROOT (Installationsverzeichnis) ausgehend, Lautet er richtig:

Code:

files/...

oder wenn schon slash, dann mit einem Punkt davor

Code:

./files/...

**zoglo** · 25.10.2022, 20:37

Vom Webpfad kann es "/files" oder nur "files" lauten. Auch "./files" ist in url() per css möglich.

@ricovabo möchte gerade nur eine funktionierende URL in seiner CSS, damit die Fonts richtig eingebunden werden.
Es geht hier nicht um die Diskussion sondern um eine funktionierende Lösung.
Ich verstehe deinen Ansatz, da es in Unterseiten evtl. krachen könnte

**ricovabo** · 26.10.2022, 15:15

Hallo zusammen

Jetzt hat alles soweit geklappt. Ich habe die Fonts mittels absoluten Pfaden eingebunden, Bsp.
url(./files/Fairsicherung/fonts/open-sans-v34-latin-600.woff2')

Vielen Dank fallen für eure Hilfe

**olop01** · 18.11.2022, 10:03

Zitat von ricovabo

Hallo Zusammen

Den (die) Übeltäter habe ich gefunden (bei Layout > Themes > Seitenlayouts) und die "Google Webfonts" entfernt. Somit ist die Verbindung zum Google Server gekappt und die Seite abmahnsicher. Leider werden die lokal installierten Fonts nicht gefunden, weshalb die Seite nun in der Schritart Times erscheint.
Aber das verstehe ich nicht: Die Fonts liegen doch eindeutig in diesem Verzeichnis files > Fairsicherung > fonts (siehe screenshot "Bildschirmfoto-fonts.jpg). Und auch im style.css wird dieser Pfad aufgeführt (screenshot "Bildschirmfoto-style.jpg" oder nun auch als style.css hochgeladene Datei), trotzdem werden die Schriften nicht gefunden...
Stehe ich denn so auf dem Schlauch?

Hi ich habe momentan genau das gleiche Problem wie du - allerdings finde ich unter Layout > Themes kein "Seitenlayouts" bzw "Google Webfonts". Kannst du mir eventuell einen Screenshot schicken. Ich bin seit über 2 Stunden am rumsuchen in diesem alten Contao System. Die Fonts habe ich bereits lokal eingebunden, aber der Verweis ist noch immer da (wie bei dir). @ricovabo

**olop01** · 18.11.2022, 10:07

Halt Stop - ich habe es gefunden. Es handelt sich um dieses winzig kleine graue Icon neben den anderen 5 winzig kleinen Icons. Oh Mann - wie verschachtelt kann man so ein CMS nur aufbauen.... Hat endlich funktioniert! Danke für deinen Ursprungsbeitrag.