Einschließlich Google Web Fonts Link oder Import?

188

Was ist die bevorzugte Methode, um Google Web Fonts in eine Seite aufzunehmen?

  1. über das Link-Tag?

    <link href = 'http: //fonts.googleapis.com/css? family = Judson: 400.400italic, 700' rel = 'stylesheet' type = 'text / css'>

  2. per Import in ein Stylesheet?

    @ import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

  3. oder verwenden Sie den Web Font Loader

    https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts Kajo
quelle
2
Möglicherweise möchten Sie diese Frage auch lesen , bevor Sie Google-Schriftarten verwenden. Je nach Projekt ist dies möglicherweise nicht immer die richtige Wahl.
Obmerk Kronen

Antworten:

283

In über 90% der Fälle möchten Sie wahrscheinlich das <link>Tag. Als Faustregel möchten Sie @importRegeln vermeiden , da sie das Laden der enthaltenen Ressource verzögern, bis die Datei abgerufen wird. Wenn Sie einen Erstellungsprozess haben, der die @ Importe "abflacht", erstellen Sie ein weiteres Problem mit Web-Schriftarten : Dynamische Anbieter wie Google WebFonts stellen plattformspezifische Versionen der Schriftarten bereit. Wenn Sie also den Inhalt einfach einbinden, werden auf einigen Plattformen fehlerhafte Schriftarten angezeigt.

Warum sollten Sie den Web Font Loader verwenden? Wenn Sie die vollständige Kontrolle darüber benötigen, wie die Schriftarten geladen werden. Die meisten Browser verschieben das Malen des Inhalts auf den Bildschirm, bis das gesamte CSS heruntergeladen und angewendet wurde. Dadurch wird das Problem des "Flashs nicht gestylter Inhalte" vermieden. Der Nachteil ist .. Sie können eine zusätzliche Pause und Verzögerung haben, bis der Inhalt sichtbar ist. Mit dem JS-Loader können Sie festlegen, wie und wann die Schriftarten sichtbar werden. Sie können sie beispielsweise sogar einblenden, nachdem der ursprüngliche Inhalt auf den Bildschirm gezeichnet wurde.

Wiederum ist der 90% -Fall das <link>Tag: Verwenden Sie ein gutes CDN, und die Schriftarten werden schnell heruntergefahren und noch wahrscheinlicher aus dem Cache bereitgestellt.

Weitere Informationen und einen detaillierten Überblick über Google Web Fonts finden Sie in diesem GDL-Video

igrigorik
quelle
1
"weil sie das Laden der enthaltenen Ressource verschieben, bis die Datei abgerufen wird" - ist das nicht ein guter Grund, @import zu verwenden? Denn normalerweise möchten Sie den Inhalt erst sehen, wenn die Schriftart geladen wurde (um das Flackern der Schriftart zu vermeiden)
Alex
2
Die Web Fonts API ist sehr nützlich, wenn Sie mit HTML5 Canvas arbeiten. Sie können keine Schriftart verwenden, die vor dem Zeichnen von Text noch nicht vollständig geladen wurde. Sobald die Schriftart geladen ist, wird sie natürlich nicht automatisch aktualisiert. In diesem Zusammenhang wird die API benötigt, um den Fortschritt beim Laden von Assets zu verfolgen, z. B. in einem Spiel.
Rvighne
14
Diese Informationen sollten sich auf der Seite Google Web Fonts befinden. Es werden Ihnen nur die drei Optionen vorgestellt - und es werden keine hilfreichen Hinweise gegeben, welche wann verwendet werden soll.
Gal
5
In Googles eigenem Tutorial " Erste Schritte " wird nur diese <link>Methode verwendet. Ich denke, diese wird unausgesprochen empfohlen
James Cushing,
2
Möglicherweise möchten Sie rel="preload"dem <link>Tag auch etwas hinzufügen , da dann die Schriftart geladen wird, bevor der Text angezeigt wird. Siehe 3perf.com/blog/link-rels
Elijah Mock
3

Wenn Sie sich Gedanken über SEO (Search Engine Optimization) und Leistung machen, ist es gut, das <link>Tag zu verwenden, da es die Schriftart vorladen kann.

Beispiel:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

Weitere Informationen finden Sie unter: https://ashton.codes/preload-google-fonts-using-resource-hints/

Hummer
quelle
2

Verwenden Sie die <link>von Google bereitgestellte Version, da die Schriftart versioniert ist. Verwenden Sie jedoch direkt darüber die Vorverbindungsfunktion von HTML5, um die Browser aufzufordern, eine TCP-Verbindung herzustellen und SSL im Voraus mit fonts.gstatic.com auszuhandeln. Hier ist ein Beispiel, das sich offensichtlich in Ihrem <head></head>Tag befinden muss:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
quelle
Ist es richtig, dass die Vorverbindung eine völlig andere Domäne ist als der Stylesheet-Link in Ihrem Beispiel? fonts.gstatic.comversusfonts.googleapis.com
BadHorsie
1
@BadHorsie es ist der springende Punkt. Das Stylesheet auf fonts.googleapis.com enthält einen Link zu einer Ressource auf fonts.gstatic.com. Sie weisen den Browser an, eine Verbindung zum letzteren Host herzustellen, damit er eine Verbindung hergestellt oder hergestellt hat, sobald er den Link im Stylesheet findet.
Mark Cilia Vincenti