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 ;)

[…] das mit der Webfont mal ausprobieren möchte, kann sich meine kleine Anleitung dazu hier […]

Nur mal als Anmerkung aus dem Duden: Font, der … Ist nicht weiblich …

Ansonsten: prima Anleitung, es klappt! Danke!

Danke für den Beitrag! Bin grade dabei und ändere meine eigene Webseite um, dein Beitrag hat mir da weitergeholfen :)

Bitte! Freut mich, dass ich helfen konnte :)

Schreiben Sie einen Kommentar

Ihre E-Mail Adresse wird nicht veröffentlicht. Alle Pflichtfelder sind mit einem * markiert.