[Lösungsvarinate] Application Cache - Fonts (Formate)

[Gunther]

Hallo werte Selfgemeinde,

für's Archiv:
Ich habe mich jetzt für folgende Variante entschieden:
Per @font-face Deklaration binde ich meine benötigten Schriftarten (3 an der Zahl) in meiner (einen) CSS-Datei ein.

Dabei verwende ich für das .woff Format einen Data-Uri, sprich ich binde die Woff-Datei inline Base64 encoded ein.

Auf diese Art & Weise brauchen alle Browser, die das Woff-Format unterstützen, keinen zusätzlichen HTTP Request und ich kann/ könnte auch meine CSS-Datei über eine entsprechende Manifest-Datei in den Application Cache packen.

So sieht dann der entsprechende CSS-Code aus:

@font-face {  
	font-family:"PT Serif";  
	src: url("../font-files/ptserif_bold.eot");  
	src: url("../font-files/ptserif_bold.eot?#iefix") format("embedded-opentype"),  
	url(data:application/x-font-woff;charset=utf-8;base64,[Base64 Data]) format("woff"),  
	url("../font-files/ptserif_bold.ttf") format("truetype"),  
	url("../font-files/ptserif_bold.svg#PT Serif") format("svg");  
	font-weight: 700;  
	font-style: normal;  
}

Alle anderen Browser, also die das Woff-Format nicht unterstützen, laden sich ihre entsprechende Font-Datei dann lokal.

Dadurch kann man zwar kein CDN mehr verwenden, aber die Browser, die das Woff-Format nicht unterstützen "sterben" über kurz oder lang eh aus!

Und imho gleicht die Einsparung von 3 Requests (bei jedem Seitenaufruf) den Base64 Overhead mehr als aus. Natürlich wird die CSS-Datei 'gzipped' ausgeliefert.

Aber falls jemand eine andere/ bessere Methode kennt und/ oder sonstige Nachteile dieser Variante ausgemacht hat - immer raus damit! ;-)

Gruß Gunther