oddbird / oddbird/css-anchor-positioning
[BUG] Fonts with relative paths load from the wrong location
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 493
- Forks
- 18
- Avg merge
- 12h 37m
- Merged PRs (30d)
- 5
Description
Describe the bug
Possibly related to https://github.com/oddbird/css-anchor-positioning/issues/274
I'm seeing my fonts load just fine, but then as soon as the polyfill kicks in, I see 404s for each custom font in my console and the fonts are replaced with defaults. The URLs it's attempting to load the fonts from are incorrect.
To Reproduce
I can't share the codebase I'm working on. Let me know if you need a reproduction repo and I'll try to put one together, but I am thinking this is a regression, since the issue referenced above sounds like it covered exactly this issue and it was closed as "completed".
My situation:
I'm running a Nextjs application. I have some fonts imported from Fontsource packages, self-hosted. I'm in development mode right now. The @font-face rules it provides have lines like
src:url(../media/inter-latin-wght-normal.4f851744.woff2)format("woff2-variations");
and this CSS file was served from /_next/static/chunks/_b7db3667._.css. As such, the font should be loading from /_next/static/media/inter-latin-wght-normal.4f851744.woff2, and it is, at least before the polyfill runs.
But once the polyfill loads, I see failed requests for files such as
/media/inter-latin-wght-normal.4f851744.woff2
i.e. not under the /_next/static subtree.
Browsers tested on
Firefox 138 on Linux.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in a Next.js development app using a relative @font-face URL like ../media/...woff2, then inspect where the polyfill resolves font URLs. Compare requests before and after the polyfill runs. Done means relative font URLs continue resolving under the stylesheet's /_next/static path without 404s.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, nextjs, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100