HTMLy: GFonts lokal einbinden

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

Das Blogsystem HTMLy nutzt GFonts, welche dynamisch eingebunden werden. Da dies mit Blick auf die DSGVO bedenklich ist und zu Abmahnungen führen kann, sollte man diese lokal einbinden, sprich – vom eigenen Server einbinden.

Hier zeige ich euch anhand des Themes “Blog”, welches HTMLy beiliegt, wie man das anstellen kann. Für die anderen Themes funktioniert das natürlich auf den gleichen Weg, nur werden da zum Teil andere Schriftarten verwendet.

Als erstes schauen wir mal, welche Fonts eigentlich genutzt werden. Dazu schauen wir uns die Datei layout.html.php mal an und finden folgende Zeilen:

    <link href="//fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic" rel="stylesheet" >
    <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
    <link href="//fonts.googleapis.com/css?family=Crimson+Text:400,400italic" rel="stylesheet" > 

Es werden also die Schriftarten Lato, Montserrat und Crimson in verschiedenen Größen und Stilen verwendet. Diese suchen wir uns mit dem Webtool google-webfonts-helper heraus und erhalten neben dem CSS-Code auch gleich den passenden Download.

Als nächstes erstellen wir im Theme-Ordner “css” eine Datei mit dem Namen gfonts.css und füllen diese mit dem CSS-Code welchen wir durch das Tool erhalten haben. In unserem Fall wäre das folgender Code:

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

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

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

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

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

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

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

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

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

Jetzt müssen wir die Schriftarten herunter laden:

–>> Lato: https://google-webfonts-helper.herokuapp.com/api/fonts/lato?download=zip&subsets=latin&variants=300,300italic,regular,italic
–>> Montserrat: https://google-webfonts-helper.herokuapp.com/api/fonts/montserrat?download=zip&subsets=latin&variants=700,regular
–>> Crimson: https://google-webfonts-helper.herokuapp.com/api/fonts/crimson-text?download=zip&subsets=latin&variants=regular,italic

und speichern diese im Root von HTMLy im Verzeichnis “fonts”, welches wir vorher noch anlegen müssen. Ich verwende absichtlich nicht den Theme-Ordner, falls man immer mal wieder Themes wechselt, kann man sich diesen Ordner einfach entsprechend erweitern und behält die eigentlichen Theme-Ordner so gut es geht im Original. Man kann natürlich die Fonts auch im Theme-Ordner speichern, hat aber dann mitunter an mehreren Stellen die gleichen Dateien – sparsam ist was anderes ;).

Nun haben wir es auch schon fast geschafft und müssen nur noch die drei externen CSS Aufrufe aus der layout.hml.php entfernen und durch folgende Zeile ersetzen:

<link href="../themes/blog/css/gfonts.css" rel="stylesheet" >

Hierbei gehe ich davon aus, daß ihr HTMLy im Root installiert habt. Sollte es in einem Unterordner sein, müsst ihr den Pfad noch entsprechend ergänzen.

Das war es auch schon, die Google Fonts sind lokal eingebunden und ihr spart euch 100 – 250.000 Euro. Nicht vergessen – dies gilt bei diesem Beispiel nur für das Theme “Blog”. Verwendet ihr ein anderes Theme, müsst ihr das Ganze natürlich für das von euch verwendete Theme machen und dabei beachten, daß dort eventuell andere Fonts verwendet werden.

Schreibe einen Kommentar