Lokale Fonts

Wie verwende ich anstelle der "Google-Fonts" die gleichen Schriften als lokale Fonts,
sodass der Verweis und Link zu Google im Quelltext entfällt.

Tutorial lokale Schrift verwenden

Zunächst möchte ich euch mitteilen, dass die Verwendung der "Google Fonts" natürlich viel bequemer ist, denn dann sind bereits alle Font-Arten, wie die verschiedenen Font-Weights vorhanden.

Nun gibt es allerdings diese leidige Datenschutzverordnung "DSGVO", die auch den Verweis zu "Google Fonts" kritisiert und sogar zu Abmahnungen führen kann. Tragt also dafür Sorge, dass der Besucher in jedem Fall über die Datenschutzerklärung zu der Verwendung von "Google Fonts" einwilligt. Hier urteilen die Gerichte aber noch unterschiedlich und vieles bezüglich der "DSVGO" scheint noch sehr ungenau definiert zu sein.

Erklärung zu den Fonts:

Um nun auf den Verweis zu "Google Fonts" ganz zu entfernen, der so aussieht:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap">

... müssen diese Schriften dann lokal am Server abgelegt und verlinkt werden.

Im Prinzip können in Mobirise beliebig viele Schrifttypen mit beliebig vielen Stilen lokal hinzugefügt werden.

Um eine Schrift lokal hinzuzufügen geht ihr wie folgt vor. Klickt auf den "Pinsel" (unten rechts auf der Arbeitsseite) für den globalen Site-Style. Markiert nun, nach und nach, alle verwendeten Fonts - also z.B. zuerst "Titel 1" und wählt im Dropdown-Fenster "More Fonts". Es öffnet sich dann der "Font Editor" von Mobirise, wie im Screenshot unten zu sehen.

Mobirise hat teilweise fest eingebaute Schriften, die gar nicht unter dem Tab "Site Fonts" (siehe Screenshot unten) aufgeführt sind und andererseits auch Schriften, welche unter "Site Fonts" bereits gelistet sind. Für solche Schriften hat Mobirise im Verzeichnis der lokalen Publizierung dann bereits ein Verzeichnis "fonts" erstellt.

Eine vorinstallierte Schrift müsste man zunächst im Tab "Google Fonts" am + Zeichen zu den "Site Fonts" hinzufügen, damit Mobirise dieses lokale Verzeichnis "fonts" mit der gewählten Schrift erstellt.

Der wichtige Punkt ist nun am Tab "Browse Computer" dieses Verzeichnis "fonts" im lokalen Verzeichnis des Projektes zu suchen und dann von dort diese lokale Schrift einzulesen. Nur dann wird auch ein lokaler Link von Mobirise im Quelltext angelegt, der dann so aussieht:

<link href="assets/fonts/style.css" rel="stylesheet">

Mobirise generiert nun bei der Publizierung ein Verzeichnis "fonts" im Verzeichnis "assets" mit allen lokal gewählten Schrifttypen und einer CSS-Datei "style.css" mit den von mir gewählten Schrifttypen:

@font-face {
  font-family: 'regular';
  font-display: swap;
  src: url('regular/font.ttf');
}
@font-face {
  font-family: '700';
  font-display: swap;
  src: url('700/font.ttf');
}
@font-face {
  font-family: '500';
  font-display: swap;
  src: url('500/font.ttf');
}


Die Bezeichnung des Fonts, wie z.B. "regular" oder "500" ist natürlich nicht gerade bezeichnend. Wollte man das anders darstellen, müsste man vor dem Einlesen des Fonts diesen im lokalen Verzeichnis "fonts" umbenennen, also z.B. dann in:

Jost_regular

Wenn ihr nun in den Quelltext dieser Seite hier guckt - rechte Maustaste, "Seitenquelltext anzeigen" wählen oder auch "Strg+U" -  werdet ihr keinen Link mehr zu "Google Fonts" finden, sondern nur noch den lokalen Verweis zu der lokalen Datei "style.css" an meinem Server.

Fonts

Font-Editor mit dem lokalen Verzeichnis "fonts" und allen Schrifttypen der Schrift "Jost"

Schriften Jost

Globaler Style Editor

Schrifttypen der Schrift "Jost"

Hier ein Screenshot der von mir bereits eingelesenen "Font-Weights" der Schrift "Jost" aus dem lokalen Verzeichnis "fonts".

Achtet hier ganz besonders darauf, dass keine einzige Formatierung mehr die ursprüngliche Schrift "Jost" anzeigt, denn das wäre dann der originale "Google Font" und der Verweis zu Google würde dann dennoch weiter im Quelltext stehen bleiben.

Es müssen also immer alle Formate mit lokalen Schriften ersetzt werden.

Site-Fonts

Site Fonts

Site Fonts

Hier kann man nun am Tab "Site Fonts" alle von mir lokal geladenen Font-Typen sehen und auch die in "Mobirise5" vorinstallierte Schrift "Jost".

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator