@font-face - Die sicherste Methode Webfonts zu nutzen

Geschrieben von Alexander Schmidt am Freitag, den 04. Februar 2011, 14 Kommentare

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 #.

webfonts-font-face

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

Kommentare (14)

  • Alexey

    Alexey

    04 Februar 2011 um 11:14 |
    Folgende Methode habe ich verwendet und musste leider fest stellen, dass bei Window /Firefox die Schrift nicht dem entspricht was ich haben wollte.
  • Alexander Schmidt

    Alexander Schmidt

    04 Februar 2011 um 12:55 |
    Welche Version von Firefox nutzt Du? Ich habe eine Demo erstellt. Schau sie Dir mal an.
  • Markus Tamler

    Markus Tamler

    07 Februar 2011 um 16:45 |
    Funktioniert in allen Browsern (Safari, Chrome, Mozilla) einwandfrei bis auf komischerweise den IE8 (auch im Kompatibilitätsmodus haut es nicht hin). Gibts hier was besonderes zu beachten?
  • Alexander Schmidt

    Alexander Schmidt

    07 Februar 2011 um 17:10 |
    Ungewöhnlich. Bei mir schaut's in allen IEs gut aus. Was sagt denn Adobe Browserlabs bei Dir? http://browserlab.adobe.com
  • Markus Tamler

    Markus Tamler

    08 Februar 2011 um 09:09 |
    Ganz witzig... Browserlab zeigt es mir auch komplett falsch an egal welchen Browser ich auswähle. Habe es heute früh auch nochmal mit dem Safari unter Mac auspropiert. Der macht es korrekt. Am Doctype kannst ja wohl nicht wirklich liegen. Ich schau mal weiter... trotzdem vielen Dank.
  • Alexander Schmidt

    Alexander Schmidt

    08 Februar 2011 um 09:35 |
    Der Tipp mit Browserlab war nicht als Witz gedacht. Die Demoseite sieht darunter korrekt aus http://itr.im/1jb (Screenshot). So http://itr.im/1jc sähe es aus, wenn als Fallback Arial genommen würde. Schau Dir den Quelltext der Demo an und vergleiche ihn mit Deinem.
  • Markus Tamler

    Markus Tamler

    08 Februar 2011 um 11:48 |
    War auch nicht so gemeint sondern eher weil das Browserlab mir ganz was anderes anzeigt als ich es schon gesehen habe (FF,Safari etc.). Ich werd den Code mal vergleichen. Mal sehen was rauskommt. Danke :-)
  • Markus Tamler

    Markus Tamler

    08 Februar 2011 um 11:57 |
    Ich glaube langsam das ist ein lokales Problem bei mir. Habe mir mal den Quellcode der DEMO-Seite kopiert und die Schriften eingesetzt. Alle Brower korrekt bis auf IE. Vom Quellcode ist auch die DEMO-Seite mit meiner "fast" identisch. Naja... weitersuchen. Trotzdem Danke.
  • mcliquid

    mcliquid

    15 Februar 2011 um 19:58 |
    Vielen Dank für den Tipp, nun zeigt der internet explorer meine Seite auch mit meinem Font an!
  • David Bolk

    David Bolk

    15 Dezember 2011 um 11:47 |
    Hallöchen,
    Ich habe einen ähnlichen Code zusammengestellt und konnet diesen dank deinem Code verbessern. Was ich mich allerdings noch frage, wie ich im Opera 9 die Webschriften zum laufen bringe in allen anderen Versionen und Browsern läuft es. Hast du da vielleicht ne Idee?
  • Aquaice

    Aquaice

    15 Februar 2012 um 17:53 |
    Bei mir liegts tatsächlich daran, dass es lokal ist. Wenn ich die eine Page mit dieser Methode online Stelle funktionierts auch im IE5+, Lokal nicht. Fall jemand eine Lösung findet, schreibts hier mal bitte :)
  • Ingo Gerhardt

    Ingo Gerhardt

    15 März 2012 um 03:40 |
    Hi,

    ... nun der Tipp hat mir weitergeholfen - wenn auch nur teilweise - FF, Chrome, Safari und IE 9 funktionierte.

    IE 6-8 streikte. Nachdem ich dein Tipp angewandt habe ging seltsamerweise nur noch IE 8 ... allerdings brachte die Kombination aus deiner Lösung und die ursrprüngliche Variante einen kompletten Erfolg:

    @font-face {
    font-family: 'BradBeckerLightRegular';
    src: url('../fonts/bradbecker.eot');
    src: url('../fonts/bradbecker.eot#') format('eot'),
    url('../fonts/bradbecker.wof') format('woff'),
    url('../fonts/bradbecker.ttf') format('truetype'),
    url('../fonts/bradbecker.svg#BradBeckerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    Also vielen Dank - dein Tipp hat mir zur Lösung verholfen !
  • Ingo Gerhardt

    Ingo Gerhardt

    15 März 2012 um 23:05 |
    Ergänzend zum letzten Eintrag, möchte ich als Dank hier folgende Zusammenstellung posten - da es für den einen od. anderen hilfreich sein kann ...

    Mögliche Ursachen für falsche Webfonts-Darstellung in unterschiedlichen Browser:

    1.)Falsche Font-Mime-Typ (betrifft Apache-Server) auf dem Server --> .htaccess-Datei anfertigen mit folgendem Inhalt

    AddType application/vnd.ms-fontobject .eot
    AddType application/octet-stream .otf .ttf

    2.)Relative Pfade einsetzen statt absolute, da es zu Fehlinterpretationen der Browser kommen kann. Diese (IE) denken dann die Fonts sind auf einem externen Server, was sich mit Punkt 3. beißt

    3.)Fonts müssen auf derselben Domain sein

    4.)Manchmal werden die Schriften mit font-weight: bold od. was anderes ausgegeben obwohl die Schrift gar nicht dafür ausgelegt ist:
    auf font-weight: normal; stellen

    5.) Je nach Schrifttyp und Browser hilft manchmal ein entsprechendes line-height ...

    Bye
  • Peter

    Peter

    28 August 2012 um 12:05 |
    Nur zur Info - wie bei Markus kann ich bestätigen, dass das Beispiel in einem echten IE 8 [genau: 8.0.7601.17514] nicht funktioniert. So long

Bitte Kommentar schreiben

Sie kommentieren als Gast.

Alle Beiträge

Copyright © 2014
„Bloggerschmidt“
Alexander Schmidt