Hinweis:
Diese Website ref.thorstn.com wird nicht weiter aktualisiert. Die hier vorliegende Version der Webpräsenz wird nicht mehr mit dem CMS realisiert, sondern mittels HTML-Dateien als Archiv dargestellt. Datum: 7.1.2021

Eigene Schriftart (Font) einbinden mit @fontface

Neben den Standardschriftarten wie z.B. Arial, Verdana usw. kann man auch andere Fonts für die Gestaltung der Webseiten verwenden. Voraussetzung dafür ist, dass der Besucher der Webseite diese Schrift(en) selbst auf seinem Gerät (PC, Smartphone usw.) installiert hat, oder: die Schriftart (Font) auf dem Server der Webseite liegt und sie über CSS eingebunden wird.
Das folgende Beispiel ist anhand meiner eigenen Handschrift angepasst, die technische Vorgehensweise funktioniert aber auch für alle anderen Schriftarten.

Aber Achtung: nicht jede im Internet erhältliche oder auf dem PC installierte Schriftart darf so ohne Weiteres für die eigene Webseite als Schrift benutzt werden. Also unbedingt die Lizenzbestimmungen der jeweiligen Schriftart (Font) beachten!

Dieser Text ist mit meiner eigenen Handschrift geschrieben!
Diese Schriftart nenne ich im Folgenden beispielhaft ''meineschrift''.

Vorgehensweise (anhand meines Beispiels):

(1.) Bei Bedarf seine eigene Handschrift als Font fertigen (lassen): www.myscriptfont.com

(2.) Die Schriftart für das @fontface generieren: www.fontsquirrel.com/tools/webfont-generator

(3.) Aus der heruntergeladenen ZIP-Datei (fontsquirrel.com) die benötigten Dateien (meineschrift.eot, meineschrift.svg, meineschrift.ttf und meineschrift.woff) in den neu zu erstellenden Ordner "moziloCMS-Instanz/layouts/layoutname/fonts" kopieren/laden

(4.) Die Schriftart "meineschrift" im CSS deklarieren (diese Daten sollten aus der Datei stylesheet.css der heruntergeladenen ZIP-Datei von fontsquirrel.com kopiert werden):

@font-face {

    font-family: 'meineschriftmedium';

    src: url('../fonts/meineschrift-webfont.eot');

    src: url('../fonts/meineschrift-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/meineschrift-webfont.woff') format('woff'),

         url('../fonts/meineschrift-webfont.ttf') format('truetype'),

         url('../fonts/meineschrift-webfont.svg#meineschriftmedium') format('svg');

    font-weight: normal;

    font-style: normal;

    }

(5.) Die Schriftart kann jetzt an beliebiger Stelle benutzt werden, sei es auf der gesamten Webseite, im Mainmenue oder nur an bestimmten Stellen.
Hier ein Beispiel für die Anwendung an bestimmten Stellen inkl. Benutzerdefinierte Syntax:

Folgendes in die style.css des benutzten Layouts notieren:

.eigeneschrift {

         font-family: 'meineschriftmedium';

         font-size:22px;

         line-height:24px;

       }

Benutzerdefinierte Syntax (moziloAdmin - Einstellungen) anlegen:

eigeneschrift = <span class="eigeneschrift">{VALUE}</span>

In die Inhaltsseite den gewünschten Text (siehe Beispiel oben) schreiben:

[eigeneschrift|Dieser Text ist mit meiner eigenen Handschrift geschrieben!

Diese Schriftart nenne ich im Folgenden beispielhaft 'meineschrift'.]

Fertig! Und mein Maskottchen Pierre { freut sich auch!