Google Fonts lokal hosten

Sie sind hier: Startseite » Anleitungen » Web- & Shop » Google Fonts lokal hosten

Um Google Fonts 100% DSGVO-konform einbinden zu können, möchten wir Ihnen hier eine kleine Anleitung mit auf dem Weg geben. Die Anleitung kann nur mit eines der KARO-Classic-Designs verwendet werden.

Mario Ranftl stellt uns dafür die tolle Website "google-webfonts-helper": https://google-webfonts-helper.herokuapp.com/fonts bereit, die uns die lokale Einbindung von Google Schriften vereinfacht.

Im linken Suchfeld können wir uns im ersten Schritt die gewünschte Schrift wählen. In unseren Beispiel nutzen wir Montserrat.

Schritt 1: Ordner-Prefix anpassen

Im Punkt 3 bearbeiten wir dafür die Ordner Prefix und ändern diesen von ../fonts/ auf fonts/

Schritt 2: Archiv herunterladen und in den Design-Ordner kopieren

Anschließend laden wir die generierte Archiv-Datei herunter und erstellen im Design-Ordner einen weiteren Ordner names "fonts". In unserem Beispiel verwenden wir das Design Apollon.

Der komplette Pfad zum erstellten Ordner (wenn der Intsallationspfad von Web 11 oder Shop 11 nicht angepasst wurde) wie folgt lauten: C:\Program Files (x86)\SIQUANDO\Web 11\designs\Apollon 11 Shop\fonts

In diesen Ordner kopieren wir die Dateien aus dem heruntergeladenen Archiv. Im Montserrat-Beispiel wären das:
montserrat-v24-latin-regular.eot
montserrat-v24-latin-regular.svg
montserrat-v24-latin-regular.ttf
montserrat-v24-latin-regular.woff
montserrat-v24-latin-regular.woff2

Schritt 3: global.ccml anpassen

Im Ordner des Designs befindet sich die Datei global.ccml, diese Datei öffnen wir mit einem Texteditor und fügen am Ende der Datei in einer neuen Zeile Folgendes ein.

<cc:copyfolder src="fonts" dst="fonts">

Schritt 4: style.less editieren

Unterhalb von <cc:include src="&site.stylesheet"> fügen wir in einer neuen Zeile

@fontFamilyContent: 'Montserrat', sans-serif;

hinzu.

Soll auch die Überschrift die Google Font verwenden fügen wir darunter zusätzlich:

@fontFamilyHead: 'Montserrat', sans-serif;

Wobei wir bei einer serifen Schrift statt , sans-serif; dann , serif; verwenden würden.

Anschließend folgt nun de Inhalt der grau hinterlegten Box aus Punkt 3 der Seite google-webfonts-helper:

dies wäre der Inhalt der angepassten style.less im Apollon-Beispiel

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

Abschließend speichern wir die bearbeitete Datei style.less.

Schritt 5: Seite neu veröffentlichen

Abschließend müssen wir die style.css neu generieren und die Webseite vollständig hochladen.