[FEATURE] Optimize font loading using next/font to improve Core Web Vitals
- Dominant language
- TypeScript
- Stars
- 716
- Forks
- 1.2k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 35
Description
### Why do we need this improvement?
The website currently loads Google Fonts (Inter and Work Sans) via `` tags in `pages/_document.tsx` and Fira Code via a CDN `@import` in `globals.css`.
This approach:
- Introduces additional third-party network requests
- Can cause Cumulative Layout Shift (CLS)
- Negatively impacts Core Web Vitals and Lighthouse performance scores
Next.js provides a built-in solution (`next/font`) to address these issues by hosting fonts locally and optimizing delivery.
### How will this change help?
This change will:
- Improve performance by eliminating external font requests
- Reduce CLS and improve Core Web Vitals scores
- Ensure fonts are available immediately on first paint
- Improve user privacy by removing reliance on third-party font CDNs
- Align the codebase with modern Next.js 15 best practices
### Screenshots
Not applicable. This change focuses on performance and infrastructure improvements rather than visual UI changes.
### How could it be implemented/designed?
- Migrate all Google Fonts to `next/font/google`
- Inter
- Work Sans
- Fira Code
- Define fonts using CSS variables and integrate them with Tailwind CSS
- Remove legacy font loading mechanisms:
- `` tags from `pages/_document.tsx`
- `@import` font declarations from `globals.css`
- Verify fonts are loaded from `/_next/static/media` instead of external CDNs
### 🚧 Breaking changes
No
### 👀 Have you checked for similar open issues?
- [x] I checked and didn't find a similar issue
### 🏢 Have you read the Contributing Guidelines?
- [x] I have read the [Contributing Guidelines](https://github.com/asyncapi/.github/blob/master/CONTRIBUTING.md)
### Are you willing to work on this issue?
Yes I am willing to submit a PR!
Contributor guide
Research direction
Start with pages/_document.tsx and globals.css to trace the current Inter, Work Sans, and Fira Code loading paths. Review the Next.js 15 next/font/google and Tailwind CSS integration, then verify the build loads fonts from /_next/static/media without external font requests and improves the relevant Core Web Vitals or Lighthouse results.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, tailwindcss, typescript
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100