google_fonts_lokal

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.

Weitere Informationen mit Screenshots: Agentur IBK

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;
}  

Um dieses Problem zu umgehen, können Sie über eine 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 eigentlich 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.

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • google_fonts_lokal.txt
  • Zuletzt geändert: 22/07/2020 22:38
  • von Thomas Berscheid