@font-face - Die sicherste Methode Webfonts zu nutzen

Details

Erstellt am Freitag, 04. Februar 2011 13:14

Fontspring schreibt im Artikel „The New Bulletproof @Font-Face Syntax“ über die browserübergreifende Methode Webfonts zu nutzen, also eigene Schrifttypen. Der Trick besteht dabei aus einem einzigen Zeichen: Der Raute #.

Die „Fontspring-CSSNinja @Font-Face Syntax“

Der folgenden Code wurde von Fontspring entwickelt und von CSSNinja verbessert. Voraus ging damals der Artikel Bulletproof @font-face syntax von Paul Irish 2009.

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot#') format('eot'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

Warum es funktioniert

Die Internet Explorer Versionen unter 9 haben alle einen Bug im Parser für das src-Attribut. Wenn du darüber mehr als eine Schriftart einbindest, schafft es der IE nicht sie zu laden und meldet einen 404-Fehler. Der Grund dafür ist, dass der IE versucht, alles zwischen den Klammern als eine Datei zu laden. Das zwingt dich das EOT-Format als erstes zu nennen, angehängt mit einer einzelnen Raute #. Der IE denkt dann, dass der Rest der Zeichenfolge ein URL-Fragment ist und lädt nur die EOT-Datei. Alle andere Browser folgen weiter den Spezifikationen und wählen das Format, was sie brauchen.

Browser-konform

Getestet wurde der Code unter

• Safari 5.03
• IE 6-9
• Firefox 3,6-4
• Chrome 8
• iOS 3,2-4,2
• Android 2,2-2,3
• Opera 11

Demo anschauen