FlatPress: GoogleFonts lokal einbinden

Letzte Aktualisierung: 24. Januar 2023 um 20:12 Uhr

Beim #Blogsystem #FlatPress werden die #GoogleFonts von vielen Themes dynamisch eingebunden. Da kann es schon einmal passieren, dass man sich eine Abmahnung einkassiert. Soweit sollte man es aber gar nicht kommen lassen.

Um das Problem in den Griff zu bekommen, sollte man die #GoogleFonts lokal auf seinem Server speichern. Sonderlich schwer ist das nicht – hier machen wir das einfach mal mit dem Theme “#Leggero V2”.

Als Erstes schauen wir mal, welche #Schriftarten genutzt werden. Dazu schauen wir in die Datei “header.tpl”, welche sich im Ordner “/fp-interface/themes/leggero” befindet. Dort finden wir die folgende Zeile:

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' />

Es wird als “Open Sans” verwendet. Diese suchen wir uns im google-webfonts-helper heraus und konfigurieren uns sie zusammen (Schriftgrößen und Stile). Danach erhalten wir folgenden #CSS – #Code:

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Diesen #Code speichern wir in der Datei “gfonts.css” ab und legen diese in den Ordner “/fp-interface/themes/leggero/”.

Die #Schriftart müssen wir uns noch herunterladen und im Root im Ordner “/fonts/” speichern (man kann diese auch im themes-Ordner speichern, allerdings kann man sich an einer zentralen Stelle doppelte Dateien ersparen, falls man mehrere Themes nutzt)

Jetzt müssen wir nur noch die Zeile der header.tpl, die wir oben angeschaut haben, entfernen und durch folgende Zeile ersetzen:

<link href='../fp-interface/themes/leggero/gfonts.css' rel='stylesheet' />

Die von mir angegebenen Pfade müssen eventuell noch an eure Installation angepasst werden.

Das war es auch schon, die #GoogleFonts sind lokal eingebunden und ihr spart euch 100 – 250.000 Euro wegen einer #Abmahnung.