Beliebige Schriften mittels @font-face verwenden

14. November, 2009 · 4 Kommentare

Seit Version 3.1 unterstützt der Firefox das von den Webdesignern lange geforderte CSS-Tag @font-face. Mit dessen Hilfe lassen sich beliebige Fonts auf Webseiten verwenden. Auf diesem Blog werden die Überschriften zum Beispiel in einer Handschrift namens “Hand of Sean” angezeigt (zumindest zu dem Zeitpunkt als dieses Post geschrieben wird).

Nachdem Firefox nachgezogen hat, wird @font-face nun von den wichtigsten Browsern unterstützt – als die wären:

  • Firefox (seit Version 3.1)
  • Safari (seit Version 3.1)
  • Internet Explorer (ab Version 4)
  • Opera (ab Version 10)

Google’s Chrome soll in der kommenden Version 3 ebenfalls @font-face unterstützen. Der Netscape Navigator ist damit der einzige prominente Browser der fehlt (Support von @font-face wurde mit Version 6 eingestellt) – ist aber wohl auch nicht weiter schlimm, weil den heutzutage ja kaum einer mehr benutzt.

Individualität für alle!

Die Zeit scheint also endlich reif zu sein – endlich kann man beliebige Schriftarten verwenden, ohne lästige Hacks. Früher musste man umständlich Flash Skripte einbetten um der Seite ein bisschen Individualität zu verleihen – oder gar extra PHP Scripts, die dynamisch die Überschriften (o.ä.) generieren und diese dann als Grafiken ausgeben. Nein nein, diese Zeiten sind jetzt zum Glück vorbei.

@font-face im Einsatz

Und so verwendet man die eigenen Fonts. Ich poste einfach mal den Code den ich verwende. Es ist empfehlenswert, die @font-face Definitionen ganz zu Beginn der CSS Datei zu setzen. Natürlich kann man auch mehrere Fonts einbetten, dafür dann einfach mehrere @font-face Tags untereinander definieren.

@font-face {
 font-family:"Hand";
 src:url(http://hjacob.com/fonts/handsean.eot);
 font-weight:100;
 src:url(http://hjacob.com/fonts/handsean.ttf) format("truetype");
}
@font-face {
... Hier ggf. einen zweiten Font definieren ...
}

Wie man sieht ist das src-Attribut doppelt gesetzt – das ist nötig, damit auch der Internet Explorer den Font anzeigen kann. Dazu später mehr.

Das Attribut font-family definiert in diesem Fall den Namen, unter dem der Font dann in weiteren Verlauf der CSS Datei verwendet werden kann. In dem Beispiel bekommt der Font den Namen Hand.

Dann ist da noch das font-weight Attribut – ich habe die Erfahrung gemacht, dass Safari und Firefox den Font sehr fett anzeigen (sieht fast aus wie bold). Font-weight=normal brachte keine Hilfe. Man kann allerdings font-weight auch Werte von 100,200,…,900 geben – dies entspricht verschiedenen “Fettgraden” wobei 100 dann ungefähr so aussieht, wie man es aus anderen Programmen gewohnt ist. Unter Umständen trifft das nicht auf andere Fonts zu – dann kann man das font-weight Attribut natürlich einfach weglassen.

Auf manchen Websites wird noch der Zusatz local(“…”) verwendet, also zum Beispiel so:

...
 src:local("Hand of Sean") url(http://hjacob.com/fonts/handsean.ttf) format("truetype");
...

Das würde ich allerdings nicht empfehlen, weil es dazu führt, dass Firefox Benutzer gefragt werden, ob Sie den benutzt Font lokal installieren möchten. Mit dieser Aufforderung dürften einige Casual User überfordert sein und auch Leute die täglich im Netz surfen, werden nicht gern von lästigen Javascript Dialogen überfallen.

Und nun?

Der Font ist eingebettet, jetzt muss man ihn nur noch verwenden. Das geht wie gewohnt über das font-family Attribut bei den CSS Definitionen.

h1 { font-family:"Hand",Georgia,Serif; }

Würde also den eingebetteten Font für die H1 Überschriften verwenden. Als Fallback wird Georgia oder alternative serife Fonts angegeben, die dann verwendet werden, wenn der Browser das Einbetten nicht erlaubt oder die Font-Datei nicht gefunden werden kann.

Die Internet Explorer Extrawurst

Wie so oft benötigt der Internet Explorer ein bisschen mehr Aufmerksamkeit. Dieser unterstützt nämlich keine Truetype Fonts. Daher muss man den TTF Datei in eine EOT Datei umwandeln. Das kann man über verschiedene Wege bewerkstelligen, ich finde den Online Font Converter am komfortabelsten (keine Installation notwendig!).

Diese EOT Datei wird dann wie in dem obigen Beispiel eingebaut.

Eingebettete Fonts und Schatten

Mit der ein oder anderen Einschränkung, lassen sich die eingebetteten Schriften auch mit anderen CSS Effekten verknüpfen. So zum Beispiel auch text-shadow – hier ein Beispiel um einen leichten gräulichen Schatten einzufügen:

h1 {
font-family:"Hand",Georgia,Serif;
text-shadow:1px 1px 3px #999;
}

Wie gesagt, man darf sich nicht wundern, wenn der ein oder andere Browser bei manchen Kombinationen schlapp macht. So hat zum Beispiel Safari Probleme bei der Verwendung von text-transform und eingebetteten Fonts.

Noch ein paar Links zu @font-face

Ihren XING-Kontakten zeigen Artikel bei Xing veröffentlichen
Kategorie:Anleitung · Design · Tipps · Tutorial · Webdev
Tags: · · · · · · · ·

Vorheriger Eintrag: Nächster Eintrag:

  • http://hjacob.com/blog/ Hendrik

    Das hier ist ein Testkommentar um das neue Disqus System zu testen 🙂

  • http://www.webschau.info/ minimaxi

    Danke für die Info.Werde “@font-face” checken.

  • http://www.webschau.info/ minimaxi

    Danke für die Info.Werde “@font-face” checken.

  • webdesigner

    Immer das gleiche mit dem IE.

meet me in the interwebs
Kaffee-Kasse
Flattr ist ein sehr gut gemachter Micropayment Dienst, der es endlich ermöglicht auf faire Weise Geld zu spenden und einzunehmen.