@font-face und Mobilbrowser

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!