Seit den Problemen, die durch die Verwendung von Cufon verursacht wurden, habe ich mich von der Verwendung externer Schriftartressourcen abgewandt. In letzter Zeit habe ich nach alternativen Methoden zum Laden von Schriftarten gesucht, um festzustellen , ob es einen besseren Weg gibt. Bessere Methoden können einfach aus heiterem Himmel erscheinen.

Es gibt viele neue Methoden und Variationen für jede Methode, wie es scheint; Soll ich typekit verwenden ? oder Google Webfonts (mit JS oder CSS)? sollte ich weiterhin lokal geladene Schriftarten verwenden (z. B. die von fontsquirrel.com generierte Methode)?

Ich werde im Folgenden mit einigen Tests die Methoden auflisten, die am besten ankommen, aber lohnt es sich wirklich, zu einem Webfont zu wechseln? Es scheint, als würde es eine höhere Ressourcenlast (http-Anforderungen) und weniger Dateiformattypen (weniger Kompatibilität) usw. aufweisen. Es sieht jedoch so aus, als würden Dateien in den meisten Fällen asynchron und effizient geladen.

1. Ist es nur eine Frage der Situation und der Notwendigkeit? Wenn ja, was sind sie?
2. Gibt es drastische Unterschiede zwischen diesen Methoden?
3. Gibt es eine bessere Methode, die ich nicht aufgelistet habe?
4. Was sind die Vor- und Nachteile für die Leistung? Aussehen? Abhängigkeiten? Kompatibilitäten?

Ich bin hier wirklich auf der Suche nach Best Practices. Leistung ist eine große Sache, aber auch Skalierbarkeit und Benutzerfreundlichkeit. Ganz zu schweigen von Aussehen und Gefühl.

Google CSS

• verwendet nur externes Stylesheet
• verwendet nur den kleinsten kompatiblen Dateityp
• Sie können den Inhalt von styleshee ( ) verwenden @importoder verwenden und ihn direkt in Ihr eigenes Stylesheet einfügen.<link>@font-face

Testergebnisse

  78ms load of html
  36ms load of css

Google JS-Methode

• wird webfont.jszum Laden von Styleshet verwendet
• verwendet nur den kleinsten kompatiblen Dateityp
• Hängt das :rootElement an die Klasse an
• fügt dem Kopf ein Skript hinzu.

Testergebnisse

    171ms load of html
    176ms load of js
    32ms load of css

Typekit-Methode

• Hängt das :rootElement an die Klasse an.
• kann *.jsSnippet oder extern geladene Datei *.jsverwenden
• verwendet data:font/opentypeanstelle von Schriftdatei.
• fügt dem Kopf ein Skript hinzu
• Fügt dem Kopf eingebettetes CSS hinzu

• Fügt dem Kopf ein externes Stylesheet hinzu

  Sie können auf typekit.com ganz einfach Schriftarten und gezielte Selektoren hinzufügen / entfernen / anpassen

Testergebnisse

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

… & Die Font Squirrel Methode

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… Oder mit Daten: Schriftartmethode…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Zunächst werde ich etwas über das Angebot von Google klären. Es wird tatsächlich das kleinste Format geladen, das Ihr Browser verarbeiten kann. WOFF bietet kleine Dateigrößen, und Ihr Browser unterstützt diese, sodass Sie sie sehen können. WOFF wird auch ziemlich häufig unterstützt. In Opera erhalten Sie jedoch wahrscheinlich die TrueType-Version der Schriftart.

Ich glaube, die Logik der Dateigröße ist auch der Grund, warum Font Squirrel sie in dieser Reihenfolge versucht. Aber das sind hauptsächlich Spekulationen meinerseits.

Wenn Sie in einer Umgebung arbeiten, in der jede Anforderung und jedes Byte zählt, müssen Sie einige Profile erstellen, um herauszufinden, welche für Ihren Anwendungsfall am besten geeignet ist. Werden die Leute nur eine Seite sehen und nie wieder besuchen? In diesem Fall sind Caching-Regeln nicht so wichtig. Wenn sie surfen oder zurückkehren, hat Google möglicherweise bessere Caching-Regeln als Ihr Server. Ist die Latenz das größere Problem oder die Bandbreite? Bei Latenz sollten weniger Anforderungen angestrebt werden. Hosten Sie sie daher lokal und kombinieren Sie die Dateien so weit wie möglich. Wenn Bandbreite vorhanden ist, wählen Sie die Option aus, die den kleinsten Code und das kleinste Schriftformat ergibt.

Nun zu den Überlegungen zu CSS und JS. Schauen wir uns das folgende Stück HTML an:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

In vielen Fällen script1, style1und style2blockiert wäre. Dies bedeutet, dass der Browser das Dokument erst dann weiter anzeigen kann, wenn diese Ressource geladen wurde (obwohl moderne Browser dies ein wenig verfälschen). Was eigentlich eine gute Sache sein kann, besonders bei Stylesheets. Es verhindert ein Aufblitzen von nicht gestylten Inhalten und verhindert auch die riesige Verschiebung, die beim Anwenden der Stile auftreten würde (und das Verschieben von Inhalten ist als Benutzer wirklich ärgerlich).

Auf der anderen Seite script2würde nicht blockieren. Es kann später geladen werden und der Browser kann mit dem Parsen und Anzeigen des restlichen Dokuments fortfahren. Das kann also auch von Vorteil sein.

Wenn ich speziell über Schriftarten (und insbesondere über das Angebot von Google) spreche, würde ich mich wahrscheinlich an eine CSS-Methode halten (ich mag es, @importweil sie weiterhin mit dem Stylesheet gestylt wird, aber das könnte nur ich sein). Die vom Skript geladene JS-Datei ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) ist größer als die @font-faceDeklaration und sieht einfach nach viel mehr Arbeit aus. Und ich glaube nicht, dass das Laden der eigentlichen Schriftart (WOFF oder TTF) blockiert, daher sollte dies die Dinge nicht zu sehr verzögern. Ich persönlich bin kein großer Fan von CDNs, aber Tatsache ist, dass sie WIRKLICH schnell sind. Die Server von Google werden die meisten gemeinsam genutzten Hosting-Pläne durch einen Erdrutsch übertreffen. Da ihre Schriftarten so beliebt sind, werden sie möglicherweise bereits zwischengespeichert.

Und das ist alles was ich habe.

Ich habe keine Erfahrung mit Typekit, deshalb habe ich es aus meiner Theorie herausgelassen. Wenn es Ungenauigkeiten gibt und Verallgemeinerungen zwischen Browsern aus Gründen der Argumentation nicht berücksichtigt werden, weisen Sie darauf hin.

Ich denke, Sie haben die Ladezeiten in Ihrer Frage sehr gut angesprochen. Aus meiner Sicht gibt es einige Quellen, die der Liste hinzugefügt werden sollten, und einige andere Überlegungen, die untersucht werden sollten, um einen vollständigen Überblick über die Optionen zu erhalten.

Einige andere seriöse Schriftquellen

cloud.typography

http://www.typography.com/cloud/

Soweit ich weiß, sind die Schriftarten als Daten in eine CSS-Datei eingebettet:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Hier sind meine Spezifikationen:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Hier ist ihre sehr allgemeine Beschreibung ihrer Bereitstellung .

Fonts.com

Ich habe diesen Dienst nicht genutzt, aber sie sind ein sehr etablierter Anbieter von Schriftarten, und die Informationen, die sie auf ihrer Website aufgelistet haben, sind ziemlich beeindruckend. Ich habe keine genauen Angaben zu den genauen Methoden, aber ich weiß, dass sie Folgendes haben:

• Einige der bekanntesten Schriftarten der Welt
• Eine wirklich große Schriftbibliothek (über 20.000)
• Desktop-Schriftarten zum Erstellen von Mockups
• Ein benutzerdefiniertes Tool zum Testen von Web-Schriftarten im Browser
• Feine Typografie-Steuerelemente und Teilmengen
• Self-Hosting-Optionen

FontSpring

Verbunden mit FontSquirrel. Schriftarten können hier zum Festpreis erworben werden. Die Schriftdateien und das zugehörige CSS werden bereitgestellt und auf Ihrem eigenen Server bereitgestellt, ähnlich wie bei FontSquirrel.

Erweiterte Spezifikationen

Im Folgenden finden Sie einige Vergleiche zu den allgemeinen Vor- und Nachteilen der einzelnen Schriftarten:

Schriftgröße der Schriftbibliothek

• Fonts.com : 20.000+
• FontSpring : 1000+
• FontSquirrel : 300+
• Google : 600+
• Typekit : 900+
• Typography.com (cloud.typography.com): wahrscheinlich 300+ (35 Familien)

Preisgestaltung

• Fonts.com : 20 US-Dollar pro Monat für 500.000 Seitenaufrufe
• FontSpring : Variiert je nach Schriftart (einmaliger Kauf von Schriftarten)
• FontSquirrel : Kostenlos
• Google : Kostenlos
• Typekit : 4 USD / Monat für 500.000 Seitenaufrufe
• Typography.com : 12,50 USD / Monat für 1.000.000 Seitenaufrufe

Schriftqualität

Die Qualität von Web-Schriftarten kann sehr unterschiedlich sein. Dies kann Dinge wie die Buchstabenformen selbst oder den Abstand oder die Größe des Zeichensatzes umfassen. All dies bestimmt den Gesamteindruck der Qualität, den eine Schriftart vermittelt. Die kostenlosen Optionen bieten zwar einige gute Optionen, aber auch einige Schriftarten, die nicht so hochwertig sind. Sie sollten daher sorgfältig aus diesen Quellen auswählen.

• Fonts.com : Hoch
• FontSpring : Gemischt zu hoch
• FontSquirrel : Gemischt
• Google : Gemischt
• Typekit : Hoch
• Typography.com : Sehr hoch (Ich gebe diesem eine "sehr hohe" Bezeichnung, da Fonts.com, FontSpring und Typekit Gießereien mit mehreren Typen unterstützen, wobei dies nur Schriften der H & FJ-Gießerei sind, die zu den besten der Welt gehört.)

Schriftqualität II: Typografie

Es gibt viele Verfeinerungen in der Desktop-Typografie, die in Web-Schriftarten nur schwer zu bekommen waren. Einige dieser Dienste bieten Möglichkeiten zur Bereitstellung dieser.

• Fonts.com : Kerning, Buchstabenabstand, Ligaturen, alternative Zeichen, Brüche usw.
• FontSpring : Keine
• FontSquirrel : Keine
• Google : Keine
• Typekit : Keine
• Typography.com : Kapitälchen, Ligaturen, alternative Zeichen, alternative Zahlenstile, Brüche usw.

Browser-Unterstützung

Dies hängt hauptsächlich mit den Schriftformaten zusammen, die von den einzelnen Diensten unterstützt werden. Die wichtigsten sind:

• EOT: für Internet Explorer (IE 4+)
• TrueType und OpenType: Traditionelle Formate (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: Neuer Standard für Web-Schriftarten (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

Weitere Informationen finden Sie unter Die @ Font-Face-Regel und nützliche Web-Font-Tricks

Alle diese Dienste unterstützen die wichtigsten Schriftformate. Bei selbst gehosteten Schriftarten sollten Sie abgedeckt sein, solange Sie die richtige Syntax verwenden. Hier ist ein 2011-Update der kugelsicheren Syntax von FontSpring :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Leistung I: Downloads

Soweit ich weiß, können Browser mithilfe der oben genannten Syntax das für sie geeignete Format abrufen, sodass keine Downloads für nicht funktionierende Schriftformate verschwendet werden.

Die kostenpflichtigen Dienste wie Fonts.com, Typekit oder Typography.com verwenden Methoden, um das richtige Format zu ermitteln und dann das richtige Schriftformat bereitzustellen, häufig als base64-Daten in einer CSS-Datei.

Soweit ich sehen kann, sind die Unterschiede in den oben aufgeführten Methoden für Hochgeschwindigkeits-Internetnutzer ziemlich vernachlässigbar (scheint <200 ms Unterschied zu sein), könnten jedoch für Geräte in langsameren Netzwerken in Betracht gezogen werden, insbesondere für nicht zwischengespeicherte Seitentreffer.

Leistung II: Teilmenge

Wenn Sie wissen, dass nur bestimmte Zeichen verwendet werden sollen, können Sie Ihre Schriftart mit einer Teilmenge von Zeichen erstellen und so die Größe des Downloads verringern.

• Fonts.com : Sehr detaillierte Steuerung
• FontSpring : Kann über den FontSquirrel-Webfont-Generator als Teilmenge neu kompiliert werden
• FontSquirrel : Kann über den Webfont-Generator als Teilmenge neu kompiliert werden
• Google : Sehr detaillierte Kontrolle
• Typekit : eingeschränkte Optionen für "alle Zeichen" oder "Standard"
• Typography.com : Sehr detaillierte Kontrolle

Leistung III: Lieferung

• Fonts.com : Globales CDN oder Ihr eigener Server
• FontSpring : Basierend auf Ihrem Server
• FontSquirrel : Basierend auf Ihrem Server
• Google : Globales Super-CDN
• Typekit : Globales CDN
• Typography.com : Globales CDN (125.000 Server)

Sprachunterstützung

• Fonts.com : 40 Sprachen, einschließlich asiatischer und nahöstlicher Sprachen
• FontSpring : Western, je nach Schriftart
• FontSquirrel : Western, je nach Schriftart
• Google : Western, je nach Schriftart
• Typekit : Western, je nach Schriftart
• Typography.com : Western, je nach Schriftart

Testen und Implementierung

• Fonts.com : Sehr einfach, mit umfangreichen und anpassbaren Tools
• FontSpring : Technisch (selbst machen)
• FontSquirrel : Technisch (mach es selbst)
• Google : Einfach
• Typekit : Einfach
• Typography.com : Einfache Tests, die nach der Bereitstellung etwas aufwändiger zu ändern sind

Nun, wie du danach bist

... auf der Suche nach Best Practices ist Leistung eine große Sache, aber auch Skalierbarkeit und Benutzerfreundlichkeit. Ganz zu schweigen von Aussehen und Gefühl.

Die Antwort lautet (wie immer im Webdesign): Es kommt darauf an!

Eine Sache ist sicher, dass ich nicht empfehlen würde, den JS-Ansatz zu verwenden (in Ihrem zweiten Beispiel gezeigt).

Persönlich mag ich es nicht, Präsentationssachen und CSS-Stile in Abhängigkeit von Javascript zu erstellen, obwohl die überwiegende Mehrheit der Benutzer dies aktiviert hat. Es geht darum, die Dinge nicht durcheinander zu bringen.

Und wie Sie in Ihrem Beispiel sehen können, gibt es eine Art FOUC (Flas von nicht gestylten Inhalten), da die Seite bereits vom Browser gerendert wird, bevor die Schriftart verfügbar ist. Sobald es ist, wird die Seite neu gezeichnet. Und je größer die Site, desto größer die (Leistungs-) Auswirkung!

Daher würde ich niemals eine JS-Lösung zum Einbetten von Schriftarten verwenden.

Schauen wir uns nun die reinen CSS-Methoden an.
Seit einiger Zeit gibt es hier eine Diskussion über "vs. @import". Persönlich bevorzuge ich die Verwendung von @import und verwende immer <link>nur. Dies ist jedoch hauptsächlich eine Frage der persönlichen Vorlieben. Das einzige, was Sie niemals tun sollten, ist, beide zu mischen!

Lokal vs. CDN
Wenn Sie entscheiden, ob Sie Ihre Schriftdateien lokal hosten oder ein CDN verwenden möchten, hängt dies im Wesentlichen von der Anzahl der verschiedenen Schriftarten und den jeweiligen Schriftarten ab, die Sie einbetten möchten.

Warum ist das wichtig oder spielt eine Rolle?
Unter dem Gesichtspunkt der Leistung würde ich empfehlen, die in Ihrem (einen) Stylesheet codierte Schriftart Base64 aufzunehmen. Aber nur das .woff-Format, da es von fast allen modernen Browsern verwendet wird, was für die Mehrheit Ihrer Besucher bedeutet. Für alle anderen Benutzer leben mit der zusätzlichen Anfrage.

Aufgrund des durch die Base64-Codierung verursachten "Overheads" und der Größe einer Schriftartdatei (auch im .woff-Format) sollte diese Technik nur verwendet werden, wenn Sie nicht mehr als 3 oder 4 verschiedene Schriftarten haben. Und stellen Sie immer sicher, dass Ihr Server die gzip'ed-Dateien (CSS) liefert.

Der große Vorteil dabei ist, dass Sie keine zusätzliche Anforderung für die Schriftartdatei haben. Und nach dem Laden der ersten Seite (unabhängig von der Seite Ihrer Site) wird die CSS-Datei zwischengespeichert. Dies ist auch ein Vorteil, wenn Sie den HTML5-Anwendungscache verwenden (was Sie sicherlich tun werden).

Neben der Tatsache, dass ein Autor nicht mehr als maximal 3 oder 4 verschiedene Schriftarten auf seiner Website verwenden sollte, werfen wir einen Blick auf die Methode zur Verwendung von Googles CDN.

Beachten Sie zunächst, dass Sie alle gewünschten Schriftarten <link>wie folgt in eine einzige einschließen können (und sollten) :

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

Dies führt zu folgender Antwort:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

Wie Sie sehen können, gibt es 9 verschiedene Schriftdateien, dh insgesamt 10 Anforderungen (einschließlich der eines der Linkelemente), wenn der Benutzer nicht eine oder mehrere der angeforderten Schriftarten lokal installiert hat. Und diese Anfragen werden bei jeder einzelnen neuen Seitenanfrage an Ihre Site wiederholt (obwohl keine Daten mehr übertragen werden)! Auch die Antwort auf die Anfrage des <link>wird nie zwischengespeichert.

Empfehlung:
Schließlich würde ich wirklich empfehlen, Ihre Schriftdatei (en) im .woff-Format Base64 aufzunehmen, das in Ihrem Stylesheet codiert ist!

In diesem schönen Artikel finden Sie ein Beispiel und eine Beschreibung, wie es geht!

Ich verwende die Inline-CSS-Methode, da der Overhead der zusätzlichen Anforderung größer ist als die Vergrößerung bei der Bease64-Codierung. Dies wird auch durch die Gizip-Komprimierung der CSS-Dateien durch den Server weiter ausgeglichen.

Eine andere Option ist das asynchrone Laden von Schriftarten. In den meisten Fällen werden die Schriftarten jedoch nach dem Laden angezeigt.

Unabhängig von der Methode können Sie die Größe der Schriftartdatei reduzieren, indem Sie nur die verwendeten Zeichensätze einbeziehen.

Persönlich verwende ich Google Fonts. Sie haben eine schöne Auswahl und haben kürzlich die Komprimierung der Schriftarten verbessert, indem sie auch auf die Zopfli-Komprimierung umgestellt haben. Google ist bestrebt, das Web schneller zu machen. Ich denke, dass auch in diesem Bereich weitere Optimierungen vorgenommen werden.

Was auch immer Sie als ausgelagerte Schriftzustellung wählen, Sie erhalten immer eine Geschwindigkeitsreduzierung durch die Anforderung, die Schriftarten zu erhalten. Aus Sicht der Geschwindigkeit ist es am besten, die Schriftarten selbst bereitzustellen. Wenn Sie sich nicht für die zusätzlichen Millisekunden interessieren, die zum Laden einer ausgelagerten Lieferung erforderlich sind, sollten Sie dies tun, wenn Sie der Meinung sind, dass die einfache Verwendung die Millisekunden wert ist.

Ich weiß nichts über Typekit und die anderen, aber mit Google Fonts können Sie festlegen, dass bestimmte Teilmengen und Zeichenbereiche bereitgestellt werden, um die Zustellung noch weiter zu beschleunigen.

Auswahl einer Teilmenge:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

Auswahl einer Reihe von Zeichen:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

Sie können dns-prefetch verwenden , um die Geschwindigkeit mit der Schriftzustellung noch weiter zu verbessern.

Ich denke und hoffe, dass Google alles tun wird, um die Bereitstellung von Schriftarten so weit wie möglich zu beschleunigen. Die Millisekunden, die zum Laden benötigt werden, schaden meiner Website nicht, daher verwende ich sie gerne.

Um es kurz zu machen:

Wenn die Lieferung von Millisekunden-Schriftarten Ihre Website beeinträchtigt, z. B. indem sie länger als die empfohlene Sekunde geladen wird, sollten Sie sie meiner Meinung nach selbst hosten.

Am besten importieren Sie die Schriftarten mit Ajax wie folgt:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

Ich mache das auf meiner Webseite und erhöhe 9 Punkte im Google Insights-Test.