Built-In Font Optimization: Improve Angular Performance & Core Web Vitals
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 14h 23m
- Merged PRs (30d)
- 162
Description
### Which @angular/* package(s) are relevant/related to the feature request?
@angular/core and @angular/cli
### Problems :
- Using custom fonts from **Google Fonts** can significantly impact FCP, LCP and initial load performance in Angular applications.
- Downloading fonts from Google servers adds **extra HTTP requests** and **latency**, slowing down initial paint times.
- The **font swapping** has the potential to cause layout shifts and so impact Cumulative Layout Shift (CLS).
### Proposed Solution :
- Introduce a **built-in** **mechanism** in Angular to **automatically downloads fonts** specified by their Google Fonts names (or similar identifiers) during the build process and **self-host fonts** within the application, eliminating the need for external font services like Google Fonts.
- Utilize **preconnect**, **preload**, and **size-adjust** for optimal performance and seamless font rendering.
### Benefits :
- **Improved Performance:** Reduces reliance on external requests, minimizes layout shifts (thanks to the underlying CSS size-adjust) , and enables efficient caching.
- **Improved FCP and LCP:** Optimized fonts and proactive loading strategies contribute to significantly faster loading times and smoother user experiences.
- **Enhanced SEO:** Better Core Web Vitals can lead to higher search engine ranking and increased website traffic.
- **Enhanced Security:** Minimizes exposure to external vulnerabilities and provides more control over font sources.
- **Developer Experience:** Built-in font optimization in Angular improves developer experience.
### Alternatives considered
Anyone interested is welcome to comment on what the proposed syntax and feature set will be.
Inspired by next.js automatic font self-hosting library ( [next/font](https://nextjs.org/docs/app/api-reference/components/font) )
Contributor guide
Research direction
Start by reviewing the @angular/core and @angular/cli areas involved in build-time font handling, and compare the proposed behavior with Next.js next/font. Define the supported font identifiers, build-time download and self-hosting flow, and the preconnect, preload, and size-adjust behavior before implementation. Done means the feature works for Google Fonts and improves the stated loading and layout-shift goals.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- cli, frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100