HTMLy: GoogleFonts lokal einbinden

von

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

Das #Blogsystem #HTMLy nutzt #GoogleFonts, welche dynamisch eingebunden werden. Da dies mit Blick auf die #DSGVO bedenklich ist und zur #Abmahnung 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 dem 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 dies der folgende 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 herunterladen:

–>> 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 #GoogleFonts 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, dass dort eventuell andere Fonts verwendet werden.

Ähnliche Beiträge:

  1. FlatPress: GoogleFonts lokal einbinden
  2. Ich miste mein FlatPress aus
  3. Abmahnwelle wegen GoogleFonts
  4. FlatPress, ein leichtes Blogsystem

Schreibe einen Kommentar