Google Fonts

Bildschirmfoto_2022-08-08_um_21
Konstanten-Editor
google font files
fileadmin/T3SB/Resources/Public/CSS/

Funktioniert nur, wenn "Enable CDN" im Konstanten-Editor deaktiviert ist
und die Konstante "bootstrap.cdn.noZip=0" (default) gesetzt ist!

Google Fonts DSGVO-konform lokal in deine Webseiten einbinden

Google Fonts lädt standartmäßig die Schriftarten von der Google CDN.
Dabei werden einige Daten an Google Übermittelt. So zum Beispiel:

  • deine IP-Adresse
  • die aufgerufene Webseite
  • das verwendete Gerät bzw. Modell
  • der verwendete Browser

Dadurch kann Google ein Nutzerprofil von dir anlegen und zum Beispiel relavante Werbung anzeigen. Dadurch verstößt die Nutzung von Google Fonts je nach Anwendungsfall meist gegen die DSGVO.

Hier kannst Du testen, ob deine Webseite betroffen ist!

Im Konstanten-Editor unter "T3SB::CDN- Google Fonts and Version-Settings" kannst du die benötigten Google-Fonts angeben.

Mit folgender Konstante kannst du den gewünschten Style (font-weight) festlegen:
# Google font-weights to generate (regular == 400) - e.g.: 300, regular, 700, 900
bootstrap.gooleFontsWeights = 300, regular, 700

Im Planer (Scheduler) muss der Task "T3SB CDN to local" einmalig ausgeführt werden.

Die benötigten Dateien werden im Verzeichnis fileadmin/T3SB/Resources/Public/CSS/ automatisch erstellt und mit TypoScript eingebunden.

Beispiel "fileadmin/T3SB/Resources/Public/CSS/googlefonts.css" für "Montserrat":

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('googlefonts/montserrat-v25-latin-300.eot');
  src: local(''),
  		url('googlefonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'),
		url('googlefonts/montserrat-v25-latin-300.woff2') format('woff2'),
		url('googlefonts/montserrat-v25-latin-300.woff') format('woff');
		url('googlefonts/montserrat-v25-latin-300.ttf') format('truetype'),
		url('googlefonts/montserrat-v25-latin-300.svg#Montserrat') format('svg');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('googlefonts/montserrat-v25-latin-regular.eot');
  src: local(''),
  		url('googlefonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
		url('googlefonts/montserrat-v25-latin-regular.woff2') format('woff2'),
		url('googlefonts/montserrat-v25-latin-regular.woff') format('woff');
		url('googlefonts/montserrat-v25-latin-regular.ttf') format('truetype'),
		url('googlefonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('googlefonts/montserrat-v25-latin-700.eot');
  src: local(''),
  		url('googlefonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'),
		url('googlefonts/montserrat-v25-latin-700.woff2') format('woff2'),
		url('googlefonts/montserrat-v25-latin-700.woff') format('woff');
		url('googlefonts/montserrat-v25-latin-700.ttf') format('truetype'),
		url('googlefonts/montserrat-v25-latin-700.svg#Montserrat') format('svg');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('googlefonts/montserrat-v25-latin-900.eot');
  src: local(''),
  		url('googlefonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'),
		url('googlefonts/montserrat-v25-latin-900.woff2') format('woff2'),
		url('googlefonts/montserrat-v25-latin-900.woff') format('woff');
		url('googlefonts/montserrat-v25-latin-900.ttf') format('truetype'),
		url('googlefonts/montserrat-v25-latin-900.svg#Montserrat') format('svg');
}

Jetzt kannst du den Font wie gewohnt nutzen:

/* Beispiel für SCSS */
$font-family-sans-serif: Montserrat, "Helvetica Neue", Arial, sans-serif;
/* Beispiel für CSS */
body {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

Preload

Wenn die Konstante bootstrap.preloadGooleFonts aktiviert wurde (auf 1 gesetzt), dann wird folgendes Typoscript erzeugt und eingebunden:

page.headerData {
	20121110 = TEXT
	20121110.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-300.woff" as="font" type="font/woff" crossorigin="anonymous">
	20121011 = TEXT
	20121011.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-300.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	20121121 = TEXT
	20121121.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-regular.woff" as="font" type="font/woff" crossorigin="anonymous">
	20121012 = TEXT
	20121012.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	20121132 = TEXT
	20121132.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-700.woff" as="font" type="font/woff" crossorigin="anonymous">
	20121013 = TEXT
	20121013.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	20124422 = TEXT
	20124422.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-900.woff" as="font" type="font/woff" crossorigin="anonymous">
	20124422 = TEXT
	20124422.value = <link rel="preload" href="/fileadmin/T3SB/Resources/Public/CSS/googlefonts/montserrat-v25-latin-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
}