@font-face - Die sicherste Methode Webfonts zu nutzen
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
Kommentare (14)
Alexey
Alexander Schmidt
Markus Tamler
Alexander Schmidt
Markus Tamler
Alexander Schmidt
Markus Tamler
Markus Tamler
mcliquid
David Bolk
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
Ingo Gerhardt
... 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
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