Der kleine @font-face Jedi

Wusstet ihr eigentlich das der Netscape 4 im Jahre 1994 schon eine Unterstützung für Webfonts hatte .. auch der IE4 hatte (zugegebenermaßen) seine eigene Implementation .. auch im CSS2 Standard waren Webfonts vorgesehen .. in CSS3 werden sie nun prinzipiell unterstützt ..

Doof nur das die Unterstützung in den verschiedenen Browsern leicht SCHEISSE ist. Ein Grund wieso Webfonts ungern eingesetzt werden.

Wie Wo Was?

Grundsätzlich gibt es 4 Font Formate … da wäre EOT (Embedded Open Type) welches der Internet Explorer unterstützt. Dann wäre da WOFF (Web Open Font Format ) welches Chrome, Firefox und Opera unterstützen. TTF (True Type Font) wonach Safari und Android lechzen .. und zu guter letzt noch SVG (Scalable Vector Grafik) .. mehr oder weniger ein Fallback für moderne Browser .. und die Wahl von iOS vor Version 4.2.

Der Nachteil wenn man nun alle 4 Fonts anbieten will? 4 einzelne Requests werden abgesetzt und die Dateigrößen sind auch nicht zu verachten.

Je nachdem wie viele Zeichen der Font unterstützt liegt man bei Dateigrößen von 30 – 400 KB. Wenn man also nur 2 Schriftarten einbindet und diese je 4 mal bereithält kann man schnell bei 1 MB download nur für Fonts liegen ..

Ungeachtet der ganzen Limits hat Jake Archibald auf der Fronteers 2011 aber einen Weg vorgestellt wie man Fonts quasi bulletproof bis hinunter zum IE6 einbinden kann.

Best Practice @font-face

Ich habe das @font-face Beispiel aus seiner Präsentation mal nachgebaut: Hier das HTML, und hier das CSS File.

Hier der zentrale Code Schnipsel …


@font-face {
   font-family: 'blue-serif';
     src: url('kreon.eot'); /* IE9 compatibility mode */
     src: url('kreon.eot#') format('embedded-opentype'), /* IE6-8 # -> IE9 Format */
          url('kreon.woff') format('woff'), /* Firefox, Chrome, Opera */
          url('kreon.ttf') format('truetype'), /* Safari, Android, iOS */
          url('kreon.svg#blue-serif') format('svg');  /* iOS < 4.2 */
}

Warum 2 Sourcen, wieso ein Hash hinter dem zweiten EOT .. und warum genau die Reihenfolge könnt ihr Jakes Präsentation entnehmen.

Leave a Reply

Your email address will not be published. Required fields are marked *