Optimize font loading (serve local fonts; preload some weights)

[demetris]

Fixes #437

There are four Inter weights used above the fold, so I added preloading for 4 weights:

• 400
• 700 (tagline)
• 800 (CTA)
• 900 (title)

The changes were simple:

• Got all the weights from https://gwfh.mranftl.com/fonts and dropped them into public/fonts/ (new dir)
• Added @font-face declarations at the bottom of app.css (we are not getting them from Google anymore, so we need to have them in the CSS of the site)
• Removed 3 rel links from the head in __root.tsx (2 preconnects + 1 stylesheet)
• Added the 4 preload links in their place

I also took measurements of two pages (homepage and TanStack Router) on WebPageTest, so that we can compare before and after.

Happy to answer any questions,

Cheers!

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	b14536b
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/687454b220dd800008ab68f6
😎 Deploy Preview	https://deploy-preview-438--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 29 (🟢 up 3 from production) Accessibility: 95 (no change from production) Best Practices: 83 (no change from production) SEO: 78 (no change from production) PWA: 60 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[SeanCassiere]

@demetris please run the prettier command (pnpm run format).

[SeanCassiere]

@demetris thank you for this contribution!

[demetris]

@demetris thank you for this contribution!

Thank you! :-)

I will take AFTER measurements tomorrow. Where do you want me to put them (and the BEFORE ones)? Comment, updated description, or somewhere else?

[SeanCassiere]

I will take AFTER measurements tomorrow. Where do you want me to put them (and the BEFORE ones)? Comment, updated description, or somewhere else?

I think either updating the description or adding it as a comment would make sense 👍🏼

[demetris]

Measurements for the tanstack.com website taken using WebPageTest

BEFORE THIS COMMIT

Date	Page	TTFB	SR	FCP	SI	LCP	CLS	TBT	PW	Emulation
2025-07-12	Home	.031s	1.000s	.998s	2.929s	3.710s	.124	.592s	3746KB	Desktop
2025-07-12	Router	.123s	.500s	.554s	3.067s	4.133s	.284	.671s	3020KB	Desktop

AFTER THIS COMMIT

Date	Page	TTFB	SR	FCP	SI	LCP	CLS	TBT	PW	Emulation
2025-07-13	Home	.046s	.900s	.947s	2.538s	.947s	0	.569s	3996KB	Desktop
2025-07-13	Home	.147s	1.100s	1.155s	2.656s	1.555s	0	.447s	3939KB	Desktop
2025-07-13	Router	.043s	.500s	.496s	2.509s	.492s	0	.487s	3237KB	Desktop
2025-07-13	Router	.154s	.600s	.589s	2.342s	.589s	0	.411s	3344KB	Desktop

LEGEND

TTFB: Time to first byte
SR: Start render
FCP: First contentful paint
SI: Speed index
LCP: Largest contentful paint
CLS: Cumulative layout shift
TBT: Total blocking time
PW: Page weight