Both woff2 and woff are downloaded in browser

[pindjur]

Correct way to include fallback formats via @font-face is this according to MDN

@font-face {
font-family: "Open Sans";
src: url("/font.woff2") format("woff2"),
url("/font.woff") format("woff");
}

But this plugin does following:

@font-face {
font-family: "Open Sans";
src: url("/font.woff2") format("woff2")
}
@font-face {
font-family: "Open Sans";
src: url("/font.woff") format("woff")
}

which couses both formats to be downloaded.

[james-baker]

I noticed this today via network inspection. One <link rel="preload"... but two @font-faces in the <style> for both the woff2 and woff.

It looks like the @font-face text is coming from https://fonts.googleapis.com/css , like https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap . (Huh, that API seems to ignore the "subset" arg...) Parsing the CSS, then "reducing"... that doesn't seem like it would introduce the extra woff.

Preload in gatsby-ssr.js just takes formats[0]
But google.js does a formats.map when downloading CSS text -- is that the incorrect part?

Hmm... maybe Google Fonts API is not even designed to consider this use case? Urg. How can this be fixed? I've hit my 1 hour timebox, I'm moving on.

[laradevitt]

I'm seeing this, too. Both formats are loaded even though not needed.

[justinh00k]

Is this what is causing this error?

The resource at “https://[mydomain]/static/webfonts/s/pressstart2p/v12/e3t4euO8T-267oIAQAu6jDQyK3nVivU.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

I tried specifying only "woff" in formats, but then I get the same error without the 2.
I saw some search results saying it might be missing a crossorigin attribute but that appears to be loading fine.

<link href="/static/webfonts/s/pressstart2p/v12/e3t4euO8T-267oIAQAu6jDQyK3nVivU.woff" rel="preload" as="font" crossorigin="anonymous" type="font/woff">

[laradevitt]

After encountering this problem I switched to using Fontsource across all of my projects.

Self-host Google Fonts with Fontsource (Gatsby docs)

[jfgilmore]

@hupe1980 when you have a moment could you please review #74?