Font mit rel preload vorladen

Question 1

Ich lade eine Schriftart mit der <link> HTML-Tag mit der rel Attribut gesetzt auf vorladen wie im folgenden Ausschnitt festgehalten;

<link rel="preload" href="https://stackoverflow.com/questions/49674092/fonts/32ADEO.woff2" as="font" type="font/woff2">

Während dies beim Laden der Schriftart wie erwartet funktioniert, wird sie erneut geladen.

Der Screenshot des Netzwerk-Tabs im Google Chrome-Browser zeigt das zweimalige Laden der Schriftart – siehe unten;

Außerdem erhalte ich die folgende Warnung auf der Registerkarte der Google Chrome-Browserkonsole.

Die Ressource https://example.com/new-v8/fonts/32A0E0.woff2 wurde mit Link Preload vorgeladen, aber nicht innerhalb weniger Sekunden nach dem Ladeereignis des Fensters verwendet. Bitte stellen Sie sicher, dass es einen angemessenen ‘as’-Wert hat und absichtlich vorgeladen ist.

Was mache ich falsch und wie kann ich es beheben?

Question 2

Ihr Preload-Tag nimmt das Argument „crossorigin“, das für Webfonts angegeben werden muss, auch wenn sie auf dem gleichen Host wie Ihre Website liegen.

Sehen https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches oder https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#early-loading-of-fonts .

Question 3

Ich erhalte immer wieder die Warnung, wenn ich versuche, eine Google-Schriftart vorzuladen.

Es stellte sich heraus, dass ich die Tatsache übersehen habe, dass die Schriftart als Stil von Google geladen wurde. Ich habe das gelöst, indem ich die eingestellt habe as="style' und dann verwenden rel="stylesheet preload prefetch".

Siehe Codebeispiel unten:

<link 
 as="style"
 rel="stylesheet preload prefetch" 
 href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500&display=swap" 
 type="text/css" 
 crossorigin="anonymous" />

Viel Spaß beim Codieren =)

Question 4

Ich weiß nicht, ob ich etwas wiederöffne, das hier bereits gelöst wurde, aber ich wollte nur erwähnen, dass Sie die rel=”preload”-Links nach der Quelle platzieren müssen, die die Schriftarten lädt, z. B. die CSS-Datei.

Question 5

In meinem Fall Wechsel zu rel="stylesheet preload" funktionierte auf Chrome –

Hier ist das absolute Minimum HAT FUNKTIONIERT –

<link rel="stylesheet preload" href="path/to/stylesheet" as="style" />

Was FUNKTIONIERT NICHT war –

<link rel="preload" href="path/to/stylesheet" as="style" />

Question 6

Ich bin auf dieses Problem mit einer selbst gehosteten Schriftart gestoßen. Ich habe es so vorgeladen:

<link rel="preload" href="/fonts/SomeFont.woff2" as="font" type="font/woff2" crossorigin>

Das Problem war, dass Webpack dem kompilierten CSS-Schriftartenpfad einen Hash hinzufügte.

/* Before */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2") format("woff2");
}

/* After (Webpack Output) */
@font-face {
    font-family: "SomeFont";
    src: url("../fonts/SomeFont.woff2?7d18a001dd0b6e04c2393") format("woff2");
}

Also habe ich den gleichen Hash zum Preload-Tag hinzugefügt und das Problem gelöst!

<link rel="preload" href="/fonts/SomeFont.woff2?7d18a001dd0b6e04c2393" as="font" type="font/woff2" crossorigin>

Question 7

Ich hatte noch mehr Spaß. Zusätzlich zu dieser Warnung habe ich festgestellt, dass mein Browser beide herunterlädt woff und woff2obwohl es nur sollte woff2. Ändern der Reihenfolge von src Beschreibungen ein @font-face half mir. Am Ende sieht die Lösung für mich in etwa so aus:

<link href="/assets/fira-sans-condensed-v5-max-regular.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="/assets/bundle.css" rel="stylesheet">

@font-face
{
    font-display: swap;
    font-family: "Fira Sans Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff") format("woff");
    src: url("/assets/fira-sans-condensed-v5-max-regular.woff2") format("woff2");
}