asyncapi / asyncapi/website

[FEATURE] Optimize font loading using next/font to improve Core Web Vitals

Open
#4,873 3 comments 0 reactions 0 assignees View on GitHub
enhancement stale
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.