Skip to content

Conversation

@hi-ogawa
Copy link
Collaborator

@hi-ogawa hi-ogawa commented Sep 29, 2025

problem

I've been testing out in some ssr frameworks (cf. #651) and I noticed in some frameworks, the same css is loaded on ssr and on client, which causes texts to briefly flashes by going through "with font -> without font -> with font" phases (note this happens even if font is preloaded during dev).

solution

The issue can be prevented by adding long cache to font asset, which allows browser to not request the 2nd font request.

how to test

I manually tested on sveltekit example https://github.com/hi-ogawa/reproductions/tree/main/fontless-sveltekit with the preview release.

@netlify
Copy link

netlify bot commented Sep 29, 2025

Deploy Preview for fontless failed.

Name Link
🔨 Latest commit 6340fe0
🔍 Latest deploy log https://app.netlify.com/projects/fontless/deploys/68da37ae52e161000836df5d

@hi-ogawa hi-ogawa changed the title fix(fontless): add immutable cache-control during dev fix(fontless): add immutable cache-control during dev to prevent font flashes on ssr frameworks Sep 29, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 29, 2025

Open in StackBlitz

npm i https://pkg.pr.new/fontaine@665
npm i https://pkg.pr.new/fontless@665

commit: 6340fe0

@codecov
Copy link

codecov bot commented Sep 29, 2025

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 53.40%. Comparing base (1d81ea9) to head (6340fe0).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
packages/fontless/src/vite.ts 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #665      +/-   ##
==========================================
- Coverage   53.47%   53.40%   -0.08%     
==========================================
  Files          11       11              
  Lines         733      734       +1     
  Branches       93       93              
==========================================
  Hits          392      392              
- Misses        341      342       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@hi-ogawa hi-ogawa marked this pull request as ready for review September 29, 2025 07:43
@hi-ogawa hi-ogawa requested a review from danielroe as a code owner September 29, 2025 07:43
Copy link
Collaborator

@gioboa gioboa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, Thanks

@danielroe danielroe merged commit 80688d8 into unjs:main Sep 29, 2025
5 of 11 checks passed
@hi-ogawa hi-ogawa deleted the 09-29-fix_fontless_add_immutable_cache-control_during_dev branch September 29, 2025 23:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants