Font mit rel preload vorladen

Lesezeit: 4 Minuten

Benutzer-Avatar
Gareth Jones

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;

Geben Sie hier die Bildbeschreibung ein

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?

  • Ich habe die gleiche Meldung erhalten, wenn ich das Disqus-Plug-In aufgerufen habe: Die Ressource https://c.disquscdn.com/next/embed/styles/lounge.188f59a1df04c219bf32da7f76545092.css was preloaded Verwendung von Link Preload, aber nicht innerhalb weniger Sekunden nach dem Ladeereignis des Fensters verwendet. Bitte vergewissern Sie sich bitte, dass es eine geeignete hat as Wert und es wird absichtlich vorgeladen.

    – eQ19

    13. Mai 2018 um 4:24 Uhr

  • Zweck preload: “Angabe von Ressourcen, die Ihre Seite sehr bald benötigen wird und die Sie früh im Seitenlebenszyklus laden möchten, bevor die Haupt-Rendering-Maschinerie des Browsers einsetzt. Dadurch wird sichergestellt, dass sie früher verfügbar sind und die Darstellung der Seite mit geringerer Wahrscheinlichkeit blockieren, wodurch die Leistung verbessert wird .” developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

    – Benutzerbild

    22. März 2021 um 21:37 Uhr

Benutzer-Avatar
Thomas Puppe

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 .

  • Ich fügte hinzu crossorigin="anonymous" zu meiner Vorspannung <link> und es gibt mir immer noch die Preload-Warnung.

    – Aaron Franke

    5. Januar 2019 um 20:13 Uhr

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 =)

  • MDN:

    – YektaDev

    4. März 2021 um 6:31 Uhr


  • Das ist bei Ihnen nur mit Google-Schriftarten passiert, aber nicht mit normalen Schriftarten, nehme ich an?

    – gaurav5430

    7. September 2021 um 20:01 Uhr

  • 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.

    • Das hat mir geholfen, mein Problem zu identifizieren. Ich hatte dieses Problem in einer Angular-App, die das fontawesome CSS/die Schriftart faul geladen hat und eine Rendering-Verzögerung erzeugte.

      – ktsangop

      10. März 2021 um 13:00 Uhr

    • Nichts für mich, es funktioniert vorher und nachher. Auch ohne das “Crossorigin”-Attribut hat es sich bei langsamem 3G um 50 % verbessert, aber mit dem Crossorigin-Attribut ist es sofort, ich bin schockiert, wie gut diese Funktion ist

      – Barbz_YHOOL

      10. Juli 2021 um 1:08 Uhr

    • was ist die überlegung dahinter?

      – gaurav5430

      7. September 2021 um 20:02 Uhr

    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" />

    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>
    

    Benutzer-Avatar
    Bileslaw

    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");
    }
    

    1013680cookie-checkFont mit rel preload vorladen

    This website is using cookies to improve the user-friendliness. You agree by using the website further.

    Privacy policy