Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | google_fonts_lokal [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Google Fonts lokal einbinden ====== | ||
+ | |||
+ | |||
+ | Das Layout einer Webseite lässt sich mit Google Fonts hervorragend aufpeppen. Allerdings hat diese Verhaltensweise einen gravierenden Nachteil: Man gibt die IP-Adresse eines Besuchers seiner Webseite immer an Google weiter. In Zeiten der DSGVO nicht das beste Verhalten. | ||
+ | Es gibt einen Trick: Mit ein wenig Aufwand lassen sich Google Fonts lokal einbinden. | ||
+ | |||
+ | <WRAP left tip 100%> | ||
+ | Weitere Informationen mit Screenshots: | ||
+ | [[https:// | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Google Fonts per TypoScript einbinden ===== | ||
+ | |||
+ | |||
+ | Wenn man einen Font von Google in TYPO3 einbindet, sieht der Code dafür ungefähr so aus: | ||
+ | |||
+ | ## Google Fonts einbinden | ||
+ | css20 = https: // | ||
+ | css20.external = 1 | ||
+ | css20.media = all | ||
+ | | ||
+ | Damit wird der Google Font heruntergeladen und steht für den Browser bereit. Die Einbindung des Font im Style Sheet kann nun im eigenen CSS erfolgen: | ||
+ | |||
+ | h1, h2, h3 { | ||
+ | font-family: | ||
+ | } | ||
+ | | ||
+ | ===== Google Font herunterladen ===== | ||
+ | |||
+ | Um dieses Problem zu umgehen, können Sie über eine [[https:// | ||
+ | |||
+ | Binden Sie den lokal gespeicherten Font nun in Ihre Webseite ein: | ||
+ | |||
+ | /* hammersmith-one-regular - latin */ | ||
+ | @font-face { | ||
+ | font-family: | ||
+ | font-style: normal; | ||
+ | font-display: | ||
+ | font-weight: | ||
+ | src: url(' | ||
+ | src: local(' | ||
+ | url(' | ||
+ | url(' | ||
+ | url(' | ||
+ | url(' | ||
+ | url(' | ||
+ | } | ||
+ | | ||
+ | An der Einbindung des Font über die Font Family müssen Sie nun nichts mehr ändern. | ||
+ | |||
+ | Um das Laden Ihrer Webseite auf mobilen Endgeräten zu beschleunigen, | ||
+ | |||
+ | font-display: | ||
+ | | ||
+ | Das '' | ||
+ | |||
+ | ===== HeaderData TypoScript zur Einbindung der Google Fonts ===== | ||
+ | |||
+ | |||
+ | Um das Herunterladen der Fonts zu beschleunigen, | ||
+ | |||
+ | |||