Google Fonts
Installation
ab v5.2.0
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, 900bootstrap.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">
}