Google Web-Fonts DSGVO-sicher lokal einbinden

[arthur_8200]

Hallo Leute,

vielen Dank für die Tipps!

Ich bin schon seit Jahren weg von Contao aber jetzt versuche ich doch, ob ich die Google Font lokal umstellen kann.

Details zu den gefunden Aufrufen von Google-Fonts (Stylesheet oder Font):
Anzahl der Aufrufe: 2
Auflistung der Aufrufe:

Stylesheet - https://fonts.googleapis.com/css?family=quattrocento+sans
Font - https://fonts.gstatic.com/s/quattrocentosans/v18/va9c4lja2nviddiaaomr5mfuelarb0zjt08.woff2

Wenn ich im CMS unter Layout -> Themes -> GB Theme -> Stylesheet 3 bearbeiten -> Layout -> Stylesheet 11 bearbeiten gehe finde ich die quattrocento font:

body {
    margin-top:.5em;
    margin-bottom:.5em;
    background-color:rgba($body,.4);
    font-family:'Quattrocento Sans',sans-serif;
}
#logo_tbraab a {
    background-color:rgba($tbr,1);
    border-radius:8px;
    font:1em 'Quattrocento Sans',sans-serif;
    color:rgba(255,255,255,1);
    text-decoration:none;
    /*
    filter: alpha(opacity=90);
    opacity: 0.9;
    */
}

Wenn man meine Seite aufruft lädt er diese Schrift: https://fonts.gstatic.com/s/quattroc...RB0zJt08.woff2

Wenn man https://fonts.google.com/specimen/Quattrocento+Sans Paket von Google lädt sind nur ttf Schriften drinnen. Aber ich habe hier das Paket inklusive Woff nun gefunden:
https://gwfh.mranftl.com/fonts/quatt...?subsets=latin


Habt ihr vielleicht Tipps für mich wo ich die Fonts per FTP hochladen soll? Und soll ich das CSS in der CMS-Oberfläche anpassen oder per FTP?

Danke!

LG

Du musst die Pfadangaben relativ machen.

Angenommen dein CSS liegt in

/files/themes/yourtheme/css/fonts.css

und deine Schriften liegen in

/files/themes/yourtheme/fonts/source-sans-pro-v11-latin-300.*

Dann muss dein CSS so lauten:

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('../fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

Das ist auch die Default Ausgabe des google-webfonts-helper.

[arthur_8200]

Ich denke die Zeile muss man auch noch anpassen:

vendor\contao\core-bundle\src\Resources\contao\pages\PageRegular.php

// Google web fonts
		if ($objLayout->webfonts)
		{
			$strStyleSheets .= Template::generateStyleTag('https://fonts.googleapis.com/css?family=' . str_replace('|', '%7C', $objLayout->webfonts), 'all') . "\n";
		}

[planepix]

Oder keine Fonts dort eintragen. Dann werden diese auch nich geladen.

Das Eingabefeld wurde in einer neueren Version entfernt.

[arthur_8200]

Oder keine Fonts dort eintragen. Dann werden diese auch nich geladen.

Das Eingabefeld wurde in einer neueren Version entfernt.

Vielen Dank! Habs gefunden dank deine Tipp unter Themes -> Seitenlayout. Dort konnte ich es entferne und nun braucht die Seite keine Aufrufe mehr von Google machen.

[arthur_8200]

Wo ich allerdings noch unsicher bin, ob ich die lokale Schrift korrekt eingebunden habe. Hab das im CSS richtig eingefügt und stimmt der Pfad?

Ich habe im contao root Verzeichnis den Ordner Fonts angelegt und sie dort reingelegt. Siehe Screenshot:

fonts.png

Was meint ihr?

[lbableck]

Auf Ordner im Root von Contao hat der Browser keinen Zugriff.
Ich lege meine Fonts immer in /files/themes/meintheme/fonts/fontname ab.
Den Pfad nutzt du dann auch einfach in CSS, dann passts.

EDIT: Der Ordner muss in der Dateiverwaltung natürlich auf Öffentlich stehen.

[arthur_8200]

Auf Ordner im Root von Contao hat der Browser keinen Zugriff.
Ich lege meine Fonts immer in /files/themes/meintheme/fonts/fontname ab.
Den Pfad nutzt du dann auch einfach in CSS, dann passts.

EDIT: Der Ordner muss in der Dateiverwaltung natürlich auf Öffentlich stehen.

Vielen Dank! Jetzt klappt es :-)