oddbird / oddbird/css-anchor-positioning

[BUG] Fonts with relative paths load from the wrong location

Open
#332 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.