≪ View Page

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://www.agentur-ibk.de/schulung-tutorial-lehrgang-typo3-koeln/typo3-snippets/typo3-css-dsgvo-google-fonts-lokal/|Agentur IBK]]
 +</WRAP>
 +
 +
 +===== 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: //fonts.googleapis.com/css?family=Hammersmith+One
 +  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: 'Hammersmith One', Verdana, serif;
 +  }  
 +  
 +===== Google Font herunterladen =====
 +
 +Um dieses Problem zu umgehen, können Sie über eine [[https://google-webfonts-helper.herokuapp.com/fonts|externe Webseite]] einen Font auswählen und als ZIP-Datei herunterladen. Diesen können Sie nun auf Ihrer TYPO3 Installation lokal speichern. 
 +
 +Binden Sie den lokal gespeicherten Font nun in Ihre Webseite ein:
 +
 +  /* hammersmith-one-regular - latin */
 +  @font-face {
 +    font-family: 'Hammersmith One';
 +    font-style: normal;
 +    font-display: swap;
 +    font-weight: 400;
 +    src: url('fonts/hammersmith-one-v10-latin-regular.eot');
 +    src: local('Hammersmith One'), local('HammersmithOne'),
 +      url('fonts/hammersmith-one-v10-latin-regular.eot?#iefix') format('embedded-opentype'),
 +      url('fonts/hammersmith-one-v10-latin-regular.woff2') format('woff2'),
 +      url('fonts/hammersmith-one-v10-latin-regular.woff') format('woff'),
 +      url('fonts/hammersmith-one-v10-latin-regular.ttf') format('truetype'),
 +      url('fonts/hammersmith-one-v10-latin-regular.svg#HammersmithOne') format('svg');
 +  }
 +  
 +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, sollten Sie dieses Attribut verwenden:
 +
 +  font-display: swap;
 +  
 +Das ''font-display: swap;'' sorgt dafür, dass ein Text mit einem Systemfont bereits angezeigt werden kann, während der eigentliche Font noch vom Server geladen werden muss. Überschriften zum Beispiel können Sie bereits dargestellt werden, selbst wenn noch nicht alle Ressourcen vom Server zur Verfügung stehen. Da Fonts eine größere Datenmenge mit bringen können, ist dies für das Thema SEO eine wichtige Einstellung.
 +
 +===== HeaderData TypoScript zur Einbindung der Google Fonts =====
 +
 +
 +Um das Herunterladen der Fonts zu beschleunigen, können Sie den Browser über die preload Option auffordern, einen Font bevorzugt zu laden. Den TypoScript Quellcode dazu finden Sie [[typoscript_head_setup#google_fonts_mit_preload_einbinden|hier im Wiki der Agentur IBK]].
 +
 +