FlatPress: GFonts lokal einbinden

Letzte Aktualisierung: 5. Dezember 2022 um 13:21 Uhr von Madekozu

Beim Blogsystem FlatPress werden die GFonts von vielen Themes dynamisch eingebunden. Da kann es schon einmal passieren, daß 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 Google Fonts 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 Google Fonts sind lokal eingebunden und ihr spart euch 100 – 250.000 Euro.

Schreibe einen Kommentar