Sie befinden sich hier: start » google_fonts_lokal

Google Fonts lokal einbinden

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

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 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 hier im Wiki der Agentur IBK.