ref.thorstn.com /
private moziloCMS und CSS Referenzseite

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!