Webfonts mit @font-face einbinden …

Hab gerade eben ein bisschen mit ner Webfont herumgespielt, und zu meiner verblüffung, hats sogar hingehauen. Auf ner statischen Webseite, ebenso auf meim WordPress Blog!

Ich habe für meinen kleinen Versuch die Freie Webfont „St. Marie Thin“ von Stereotypes verwendet.

Wie habe ich das alles gemacht?
Ich bin ja gar nicht so und erkläre es euch!

Zuerst muss man alle Font-Dateien in einem Ordner (zB „fonts“) auf den Webserver laden und dann die .css Datei bearbeiten.

In die .css Datei kommen dann folgende Code-Schnippsel:
@font-face {
font-family: 'StMarieWebThin';
src: url('fonts/stmarie-thin_web-webfont.eot');
src: url('fonts/stmarie-thin_web-webfont.woff ') format('woff'),
url('fonts/stmarie-thin_web-webfont.svg#webfontHNmhr3jr')
format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'StMarieWebSCThin';
src: url('fonts/stmarie-thin_web_sc-webfont.eot');
src: url('fonts/stmarie-thin_web_sc-webfont.woff ') format('woff'),
url('fonts/stmarie-thin_web_sc-webfont.svg#webfonti6QgH8L5')
format('svg');
font-weight: normal;
font-style: normal;
}


Anschließend kann man die Font mit folgenden Befehlen anwenden:
body { font-family:StMarieWebThin; }


Man wendet die Font jetzt wie eine ganz normale Font an.
Ein Tipp noch zum Ende, da die St.Marie Thin leider nur eine sehr dünne Schrift ist, ist sie eher für Überschriften geeignet, Fließtext würde ich damit nicht setzten!

Hoffe es hat euch ein wenig weitergebracht, ich hab auch ein bisschen rumprobiert, bis ich es hatte ;)