Preloaded Fonts are downloaded twice (bug?) #23194

Emiliano-Bucci · 2021-03-18T15:02:22Z

Emiliano-Bucci
Mar 18, 2021

Hi, i've started to face a strange issue regarding fonts when i'm preloading them; the fonts are being downloaded/requested twice, with the result that:

On the very first render the fonts (if cached by the browser) are loaded and used
Then, for some reason, the fonts are cleared (so the default font system is used)
The fonts are downloaded again and used again

I'm keeping the fonts in my public folder, and I'm preloading them in the <Head /> tag of the _document component (the same strange behavior happen if I preload them inside the <Head /> tag in the _app component).

Next.js version is 10.0.5

 <link
    rel="preload"
    as="font"
    href="/fonts/finger-paint-v9-latin-regular.woff2"
    type="font/woff2"
    crossOrigin=""
  />
  <link
    rel="preload"
    as="font"
    href="/fonts/Nunito-Regular.woff2"
    type="font/woff2"
    crossOrigin=""
  />
  <link
    rel="preload"
    as="font"
    href="/fonts/Nunito-SemiBold.woff2"
    type="font/woff2"
    crossOrigin=""
  />

Then I'm using the fonts inside the <Global /> component of emotion using the css @font-face declaration.

If this could also help, this is my now.json file:

{
  "version": 2,
  "builds": [{ "src": "package.json", "use": "@now/next" }],
  "trailingSlash": false,
  "headers": [
    {
      "source": "/siteIcons/(.+)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/icon/(.+)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/fonts/(.+)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/manifest.json",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/favicon.ico",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "github": {
    "enabled": false
  }
}

Also, this issue is only reproducible in production while in development it works fine.

The link to the website is -> https://wildtrek.it

Thanks!

Emiliano-Bucci · 2021-04-22T06:39:34Z

Emiliano-Bucci
Apr 22, 2021
Author

No one has a clue or face a similar issue? :/

1 reply

WoodrowShigeru Jan 19, 2025

I just did have the same issue, and for me, I had to add the crossorigin attribute even though this is a local dev environment … maybe because of the port. The DevTools console does explicitly throw a CORS warning.

In your case, I am noticing that your casing is off: it's crossorigin and not crossOrigin. I wonder whether that might be the cause.

This has helped: https://stackoverflow.com/questions/59353686/html-why-is-my-preloaded-resource-loading-again

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preloaded Fonts are downloaded twice (bug?) #23194

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Preloaded Fonts are downloaded twice (bug?) #23194

Emiliano-Bucci Mar 18, 2021

Replies: 1 comment · 1 reply

Emiliano-Bucci Apr 22, 2021 Author

WoodrowShigeru Jan 19, 2025

Emiliano-Bucci
Mar 18, 2021

Replies: 1 comment 1 reply

Emiliano-Bucci
Apr 22, 2021
Author