Ein kleiner Tip: Manche Mobilbrowser (Beispiel: Der Standard- Systembrowser auf dem Samsung Galaxy Tab 10.1) haben Probleme mit relativ (zur Position des Stylesheet) verlinkten Font-Dateien.
Die Browser sind anscheinend nicht in der Lage, die Font-Dateien zu finden und weichen bei der Darstellung auf den definierten Fallback bzw. Systemfonts aus, was in manchen Layouts nicht so nett ausschauen dürfte ;-)
Beispiel: Die Verzeichnisstruktur einer kleinen Seite schaut folgendermaßen aus:
/ /index.html /css/style.css /css/fonts/coolfont.eot /css/fonts/coolfont.woff /css/fonts/coolfont.ttf /css/fonts/coolfont.svg
Wir binden die Schriftart in der style.css mit CSS-Konformen Pfaden ein (relativ zum CSS-File), Überschriften der Kategorie 1 sollen in Coolfont dargestellt werden – Als Fallback-Schriftfamilien haben wir arial und sans-serif definiert.
@font-face { font-family: 'CoolFont'; src: url('fonts/coolfont.eot?#iefix') format('eot'), url('fonts/coolfont.woff') format('woff'), url('fonts/coolfont.ttf') format('truetype'), url('fonts/coolfont.svg#CoolFont') format('svg'); } h1 { font-family: CoolFont, arial, sans-serif; }
Ergebnis: Desktopbrowser stellen die Schriftart korrekt an – der Browser auf meinem Galaxy Tab stellt die Überschriften in arial an.
Gibt man stattdessen absolute Pfade vom DocumentRoot der Seite aus gesehen an, funktioniert es:
@font-face { font-family: 'CoolFont'; src: url('/css/fonts/coolfont.eot?#iefix') format('eot'), url('/css/fonts/coolfont.woff') format('woff'), url('/css/fonts/coolfont.ttf') format('truetype'), url('/css/fonts/coolfont.svg#CoolFont') format('svg'); }
Hope this helps: enjoy!