Suche Menü

Web Schriften mit @font face

CSS-@font-face Webschriften in Webseiten einbinden.

Generell können Browser nur Schriften laden die auch auf unseren Rechnern installiert sind, mit @font-face kann jede Schrift auf einer Webseite angezeigt werden. Unterstützt wird @font-face von allen modernen Browsern, aber Vorsicht beim
Einbinden von Schriften, vorher genau die Lizenz- Bestimmungen durchlesen.
Auf Font-Seiten dafont.com und fontsquirrel.com gibt es jede Menge kostenlose Schriften, bei Fontsquirrel sind viele Schriften bereits mit einem @font-face Kit fürs Einbetten in Webseiten vorbereitet.

@font-face

Ist die gewählte Schrift nicht als fertiges Kit zu haben, kann man mit dem @font-face Generator von Fontsquirrel ein Schriften-Kit generieren.
Einfach die Schrift vom Computer hochladen und die Formate auswählen, in welche die Schrift konvertiert werden soll. Mit einem Häkchen bei „Subsettings“ kann man noch bestimmen, welche Sonderzeichen benötigt werden.

Das auf den Computer geladene @font-face Kit muss nun entpackt werden und die einzelnen Dateien mit einem FTP-Programm auf den Server geladen werden, am besten in einen eigenen fonts Ordner.
Das mitgelieferte CSS aus der CSS-Datei wird nun in das eigene CSS an oberster Stelle eingebunden, eventuell muss der Pfad angepasst werden.
Beispiel für die Handdrawn free-font „JennaSueRegular“

@font-face {
font-family: 'JennaSueRegular';
src: url('JennaSue-webfont.eot');
src: url('JennaSue-webfont.eot?#iefix') format('embedded-opentype'),
url('JennaSue-webfont.woff') format('woff'),
url('JennaSue-webfont.ttf') format('truetype'),
url('JennaSue-webfont.svg#JennaSueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Anschließend die Schrift ganz normal mit font-family einfügen. Aber immer eine Alternative Standartschrift mit angeben.

h1 { font-family: 'JennaSueRegular'; arial;}

Das war`s schon !!!