CSS: Frage zu @font-face, Ladezeit

[leicht-debil]

Guten Abend Freunde...

ich habe eine Frage zur Verwendung von @font-face. Es wird ja zurecht immer wieder darauf hingewiesen, dass die Einbindung von Schriften via @font-face die Ladezeit einer Webseite erheblich verzögern kann. Leider finde ich keine Antwort auf die Frage: Wann laden die Browser die Schriften herunter? Passiert das bereits beim Verweis auf die Schrift:

[src=css]@font-face {
font-family: 'droid_sansbold';
src: url('../../fonts/DroidSans/DroidSans-Bold-webfont.eot');
src: url('../../fonts/DroidSans/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../fonts/DroidSans/DroidSans-Bold-webfont.woff') format('woff'),
url('../../fonts/DroidSans/DroidSans-Bold-webfont.ttf') format('truetype'),
url('../../fonts/DroidSans/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}[/src]

...oder erst dann, wenn ich einem Element auch die entsprechende Schrift zuweise, z.B.

[src=css]#meindiv {
font-family: 'droid_sansbold';
}[/src]

Hintergrund meiner Frage ist der, dass ich mir eine Vielzahl an lizenzfreier Schriften von Fontsquirrel geladen habe (mehr als 30), die ich natürlich nicht alle in einem einzigen Webprojekt verwende. Dennoch habe ich mit eine CSS-Datei erstellt, die Verweise (siehe erster Code-Block) zu allen Schriften enthält. In einer zweiten CSS-Datei, die dann projektbezogen ist, weise ich Elementen die gewünschten Schriften zu.

[src=html5]<link rel="stylesheet" type="text/css" href="alle_schriften_verfuegbar_machen.css" />
<link rel="stylesheet" type="text/css" href="schriften_zuweisen.css" />[/src]

Wäre natürlich schlecht, wenn der Browser automatisch alles Schriften läd, die in der ersten CSS-Datei stehen. Das sind nämlich ~ 12 MB. Habe das ganze auch schon mal getestet, es wirkte nicht so, als würden alle Schriften geladen. Im Zeitalter von VDSL wirkt es aber vielleicht auch nur so?

 

[epiphora]

Ich würde sagen, Du nimmst Dir Firebug oder die Chrome Developer Tools und probierst es einfach aus. Dort siehst Du ja, welche Dateien der Browser heimlich nachlädt.

Oder Du liest im verlinkten Blog-Posting den Abschnitt "When exactly do browsers download the font file?". Leider ist es jetzt 4 Jahre alt: http://www.paulirish.com/2009/fighting-the-font-face-fout/

 

[leicht-debil]

Ich würde sagen, Du nimmst Dir Firebug oder die Chrome Developer Tools und probierst es einfach aus.

Das ist ein mords Tipp ;-)



Also wird nur geladen, was auch einem Elemente zugeordnet ist. Das finde ich gut, weil ich meine erste Datei somit einfach via Copy&Paste von Projekt zu Projekt tragen kann.
Bleibt nur die Frage, ob das alle Browser gleich handeln.

 

[LemonDrops]

http://www.w3.org/TR/css3-fonts/#font-face-loading

Fonts sollten nur geladen werden, wenn sie verwendet werden. Was nicht heißt, dass alle Browser sich daran halten.

 

[DaSinned]

Noch ein Tipp um die Ladezeiten zu verkürzen:
Wenn du Google Fonts verwendest, binde doch einfach die Font-Dateien vom Google Server ein, anstatt die Dateien auf deinem Server bereit zu stellen.
Das hat unter anderen den Vorteil, dass die Response Time geringer ist, da automatisch der Google Server genommen wird, der am Nähsten ist. Mit unter ist dein Webserver vom Benutzer deutlich weiter entfernt als ein Google Server.

Gruß
DaSinned

 

[Kugelfisch]

Das kann, muss allerdings nicht schneller sein als die Auslieferung über den eigenen Server. So können z.B. moderne Browser eine bestehende HTTP-1.1-Verbindung weiternutzen oder darüber gar mehrere Ressourcen parallel anfordern (HTTP-Pipelining), so dass bei einer Auslieferung von demselben Server der Overhead einer neu aufzubauenden Verbindung (3-Wege-TCP-Handshake, ggf. TLS-Handshake, wenn HTTPS verwendet wird) wegfällt. Ausserdem hält auch Google nicht sämtliche Daten auf sämtlichen verteilten Servern vor.

In vielen Fällen wird der Unterschied allerdings schlicht vernachlässigbar sein. Allerdings würde ich allgemein davon abraten, unnötigerweise Ressourcen von fremden Servern einzubinden.

 

[LemonDrops]

Das Interessante an Google CDN ist eher das Caching, so dass die Datei gar nicht erst geladen werden muss, wenn man vorher auf einer Seite war, die die selbe Schrift nutzt. Solange man aus Deutschland nach Deutschland ausliefert braucht man kein CDN.