Schnellste Möglichkeit, eine Webschrift für eine Website zu laden?

Question

Meine HTML-Website verwendet die Schriftart Open Sans, und ich frage mich, was ist der beste Weg, um die Schriftart zu laden, während die Website wirklich schnell zu halten?

1. Verwendung von Google-Schriften im html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
2. Verwendung von Google-Schriften in der CSS: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

3. Herunterladen die Schriftart aus dem serveur in der CSS:

   @font-face { 
       font-family: 'MyWebFont'; 
       src: url('font/myfont.woff2') format('woff2'), 
         url('font/myfont.woff') format('woff'); 
   } 
   

4. Etwas anderes?

Vielen Dank!

Answer 1

Der schnellste Weg, es zu tun ist es überhaupt nicht zu tun;) In Ihrem Fall ist die beste Möglichkeit, es von Google CDN laden und hoffen, dass Ihre Benutzer es bereits aus dem vorherigen Besuch einer Seite mit ihm eingelöst haben.

Answer 2

Nun, alle drei Möglichkeiten sind in Ordnung, aber wenn es um die Seitenbeladung geht, wird der dritte Weg perfekt sein. Da Sie alles lokal halten und nicht mehrere Anrufe tätigen müssen.

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('font/myfont.woff2') format('woff2'), 
      url('font/myfont.woff') format('woff'); 
} 

Dies ist perfekt, weil in der ersten Methode offensichtlich sind Sie Schriftarten von einem anderen Server aufrufen wird die Ladezeit erhöhen und in der zweiten Methode werden mehrere Anrufe passieren, so dass die dritte Möglichkeit wäre perfekt.

Answer 3

Ich würde erwarten, dass es am schnellsten von Ihrem eigenen Server mit @font-face geladen wird, da es weniger DNS-Lookups gibt und Ihr Server wahrscheinlich weniger ausgelastet ist als Google.

Wenn Sie möchten, dass es am schnellsten geladen wird, können Sie das Attribut @font-face an den Anfang Ihres Dokuments inline, aber ich würde empfehlen, es im Stylesheet zu lassen.

Obwohl, wenn Sie bereit sind, einige Javascript zu verwenden, sieht this wie der schnellste Weg aus, den ich finden kann.

Answer 4

Es hängt wirklich davon ab, wie schnell Ihr eigener Server ist. Wenn Ihr Server sehr schnell ist, würde ich natürlich 3. Methode bevorzugen:

@font-face { 
font-family: 'MyWebFont'; 
src: url('font/myfont.woff2') format('woff2'), 
     url('font/myfont.woff') format('woff'); 
} 

Allerdings, wenn Ihr Server wirklich ziemlich langsam ist, dann ist die erste oder zweite Methode wäre schneller, wie in meinem Fall war.

Eine sehr effektive Art zu überprüfen, welche schneller ist, ist unter this website called pingdom zu gehen. Von dort geben Sie die URL Ihrer Webseite ein und dann wird angezeigt, wie viel Zeit für den Download jeder Datei benötigt wurde. Sie können alle Ihre Schriftartdateien dort auch sehen, und wie lange es dauerte, damit jeder herunterlädt. Probieren Sie alle 3 verschiedenen Methoden und finden Sie heraus, welche die schnellste ist durch Pingdom.