netlify dev with experimental fonts API 404's on fonts

[paulrudy]

Astro Info

Astro                    v5.16.7
Vite                     v6.4.1
Node                     v22.20.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  @astrojs/netlify (v6.6.3)
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I'm using the experimental fonts API and have no problem with my live site, or with astro dev, or with netlify serve.

But I've noticed recently (not sure when) that netlify dev 404's on every font.

I used middleware to show that with netlify dev, a request is made for the font, whereas with netlify serve and astro dev, it bypasses middleware as expected:

import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
    const url = new URL(context.request.url);

    if (url.pathname.startsWith("/_astro/fonts/")) {
        // astro dev and netlify log no request for fonts
        // but netlify dev does
        console.log("Font was requested:", url.pathname);
    }

    return await next();
});

The issue does not occur with fonts loaded normally with @font-face.

Note: If netlify dev doesn't work on the stackblitz example (I can't get it to), please see my example repo

discord support thread

What's the expected result?

Fonts via the experimental fonts API should be served when using netlify dev

Link to Minimal Reproducible Example

https://stackblitz.com/github/paulrudy/netlify-dev-fonts?file=src%2Fmiddleware.ts

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

cc @florian-lefebvre

[florian-lefebvre]

I find it weird, font files in dev are served via vite middleware so I don't see why it wouldn't work. We'll have to dig but in the meantime, the workaround is to not use netlify dev

[abrahamjimenez]

I noticed that running netlify dev appends the ?dpl=0 while npm run dev does not. I believe this is why the fonts are returning a 404 error & I might be because it's not handled via the vite middleware mentioned (I'll check & confirm if true).

Here are the corresponding request URL's:

netlify dev:
http://localhost:4321/_astro/fonts/font-luciole-400-normal-f5010dd636cbcade.woff2?dpl=0

npm run dev:
http://localhost:4321/_astro/fonts/font-luciole-400-normal-f5010dd636cbcade.woff2

[florian-lefebvre]

Ah perfect thank you! I'll fix that today