Die immer mehr an Popularität gewinnende @font-face Regel wurde schon mit CSS2 eingeführt, funktionierte jedoch lange Zeit nur im (man mag es kaum Glauben) Internet Explorer. Allerdings benötigt man dafür eine .eot-Schriftdatei, welche keine der anderen aktuellen Browser unterstützt. Firefox, Safari sowie Opera nutzen TrueType (.ttf) und OpenType (.otf).

Mit der Vorstellung von CSS3 wurde die @font-face Regel dann auch schon öfter genutzt und so langsam unterstützen auch alle aktuellen Browser diese Eigenschaft. Soll heißen, es wird Zeit damit etwas zu experimentieren…

Als erstes hab ich bei Font Squirrel eine geeignete Schrift gesucht. In meinem Fall war es ‘Quigley Wiggly Regular‘. Die Einbindung in den Stylesheet sieht so aus:

@font-face {
font-family: 'QuigleyWigglyRegular';
src: url('../fonts/QUIGLEYW.eot');
src: local('QuigleyWiggly Regular'), local('QuigleyWiggly'),
url('../fonts/QUIGLEYW.TTF') format('truetype');
}

Der Rest bleibt wie gehabt…

h4.heading {
font: 32px 'QuigleyWigglyRegular', Helvetica, Arial, sans-serif;
}

Funktionieren tut das ganze natürlich… Als Nicht-wissender ist man aber bei dem ersten Besuch der Seite sicherlich erstmal etwas verwundert (sofern die Schrift nicht bereits installiert ist), warum da auf einmal ein Fenster aufpopt und eine Schrift installiert werden möchte.

Wie gesagt, ich kann mir vorstellen das viele Leute bei so einer Meldung ganz schnell das Fenster schließen, oder gar ihren Browser. Die Angst, das irgendwas einfach installiert wird, macht heutzutage vielen Leuten noch Kummer… Viren und so.

Ich denke aber das neue Schriften einen “frischen Wind” ins Web bringen. Meine genutzten Web-Schriften beliefen sich immer auf Verdana, Arial, Helvetica, Georgia oder Times New Roman (sans-serif) und ich bin ehrlich gesagt froh, mal was anderes auszuprobieren, ohne dabei ein Bild zu erstellen.