Skip to content

Commit 7c892fd

Browse files
SOG-webSOG-web
committed
feat(font-optimization): implement build-time font optimization and update documentation
1 parent a12d117 commit 7c892fd

File tree

112 files changed

+1686
-50441
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1686
-50441
lines changed

‎apps/web/README.md‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,50 @@
1-
# Web
1+
# Font Showcase Web App
2+
3+
An interactive demonstration of `@angular-utils/font` - optimized font loading for Angular with build-time optimization and SSR support.
4+
5+
This project showcases multiple Google Fonts with different weights, interactive font switching, and demonstrates both runtime and build-time font optimization patterns.
6+
7+
## Features
8+
9+
- 🚀 **Build-time Font Optimization**: Fonts are downloaded and self-hosted during build
10+
- ⚡ **Interactive Font Switching**: Real-time font family and weight changes
11+
- 🎨 **5 Popular Google Fonts**: Inter, Roboto, Open Sans, Poppins, and Playfair Display
12+
- 📊 **Weight Comparison**: Side-by-side visualization of all font weights
13+
- 💅 **Modern UI**: Built with Angular 20 and Tailwind CSS v4
14+
- 🔄 **SSR Compatible**: Works with Angular Universal and `@angular/ssr`
15+
16+
## Font System
17+
18+
### Static Font Declaration Pattern
19+
20+
Fonts are declared in `src/fonts.ts` using the static import pattern:
21+
22+
```typescript
23+
import { Inter, Roboto } from '@angular-utils/font/google';
24+
25+
export const inter = Inter({
26+
weights: [300, 400, 500, 600, 700, 900],
27+
subsets: ['latin'],
28+
display: 'swap',
29+
variable: '--font-inter',
30+
preload: true,
31+
});
32+
```
33+
34+
### Build-time Optimization
35+
36+
The Angular builder scans `src/fonts.ts` and:
37+
38+
1. Downloads font files from Google Fonts
39+
2. Self-hosts them in `dist/web/browser/assets/fonts/`
40+
3. Generates optimized CSS with preload links
41+
4. Eliminates runtime network requests for fonts
42+
43+
Run font optimization:
44+
45+
```bash
46+
pnpm font:optimize
47+
```
248

349
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.2.
450

‎apps/web/READY_TO_RUN.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
# ✅ Font Showcase App - Ready to Run!
2+
3+
The build-time font optimization is now **fully configured and working**. Here's what's been set up:
4+
5+
## 🎯 What Was Fixed
6+
7+
### Issue: MIME Type Error
8+
9+
**Problem:** `fonts.css` was returning HTML (404) instead of CSS, causing MIME type mismatch.
10+
11+
**Root Cause:** Font optimizer was writing to `dist/web/browser/assets/` but Angular dev server serves from `public/`.
12+
13+
**Solution:** Changed `outputPath` to `"public"` in `angular.json` so fonts are written directly to the dev server's asset directory.
14+
15+
## 📁 Current Setup
16+
17+
### Configuration (`angular.json`)
18+
19+
```json
20+
{
21+
"font-optimize": {
22+
"builder": "@angular-utils/font:optimize",
23+
"options": {
24+
"outputPath": "public", // ✅ Dev server can access
25+
"projectRoot": "",
26+
"sourceRoot": "src",
27+
"fontFile": "src/fonts.ts"
28+
}
29+
}
30+
}
31+
```
32+
33+
### File Structure
34+
35+
```
36+
apps/web/
37+
├── public/
38+
│ ├── assets/
39+
│ │ ├── fonts.css ✅ Generated @font-face rules
40+
│ │ ├── font-preloads.html (backup reference)
41+
│ │ └── fonts/
42+
│ │ ├── inter/ ✅ 7 woff2 files
43+
│ │ ├── roboto/ ✅ 9 woff2 files
44+
│ │ ├── open-sans/ ✅ 10 woff2 files
45+
│ │ ├── poppins/ ✅ 3 woff2 files
46+
│ │ └── playfair-display/ ✅ 4 woff2 files
47+
│ └── favicon.ico
48+
├── src/
49+
│ ├── fonts.ts ✅ Font declarations
50+
│ ├── index.html ✅ Auto-injected links
51+
│ └── app/
52+
│ ├── app.ts ✅ Using pre-declared fonts
53+
│ ├── app.html ✅ Font showcase UI
54+
│ └── app.css ✅ Modern styling
55+
```
56+
57+
### Auto-Injected HTML (`src/index.html`)
58+
59+
```html
60+
<head>
61+
<!-- Font CSS -->
62+
<link rel="stylesheet" href="assets/fonts.css" />
63+
<!-- End Font CSS -->
64+
<!-- Font Preloads -->
65+
<link rel="preload" href="/assets/fonts/inter/..." as="font" ... />
66+
<link rel="preload" href="/assets/fonts/roboto/..." as="font" ... />
67+
<!-- ... more preload links ... -->
68+
<!-- End Font Preloads -->
69+
</head>
70+
```
71+
72+
## 🚀 How to Run
73+
74+
### 1. Start Dev Server
75+
76+
```bash
77+
cd apps/web
78+
pnpm start
79+
```
80+
81+
### 2. Open Browser
82+
83+
```
84+
http://localhost:4200
85+
```
86+
87+
### 3. What You'll See
88+
89+
- **Interactive font showcase** with 5 Google Fonts
90+
- **Real-time weight switching** (300, 400, 500, 600, 700, 800, 900)
91+
- **Multiple text samples** (heading, paragraph, all weights)
92+
- **Modern UI** with Tailwind CSS v4
93+
- **Zero external requests** - all fonts self-hosted!
94+
95+
## 🔧 Rebuilding Fonts
96+
97+
If you modify `src/fonts.ts`:
98+
99+
```bash
100+
# Run font optimizer
101+
pnpm font:optimize
102+
103+
# Then restart dev server
104+
pnpm start
105+
```
106+
107+
The optimizer will:
108+
109+
- ✅ Re-download updated fonts
110+
- ✅ Regenerate CSS
111+
- ✅ Update preload links
112+
- ✅ Refresh index.html
113+
114+
## 📊 Performance Benefits
115+
116+
### Before Optimization
117+
118+
- ❌ External requests to `fonts.googleapis.com`
119+
- ❌ Additional DNS lookup
120+
- ❌ Network latency
121+
- ❌ GDPR concerns
122+
123+
### After Optimization
124+
125+
- ✅ All fonts self-hosted in `public/assets/fonts/`
126+
- ✅ Zero external requests
127+
- ✅ Font files preloaded
128+
- ✅ Served from same origin
129+
- ✅ GDPR compliant
130+
- ✅ Works offline
131+
132+
## 🎨 What's in the Showcase
133+
134+
### Fonts Loaded
135+
136+
1. **Inter** (300-900) - Modern UI font
137+
2. **Roboto** (300-900) - Google's signature
138+
3. **Open Sans** (300-800) - Friendly sans-serif
139+
4. **Poppins** (300-900) - Geometric design
140+
5. **Playfair Display** (400-900) - Elegant serif
141+
142+
### Features
143+
144+
- Interactive font family selector
145+
- Weight comparison grid
146+
- Live preview with custom text
147+
- Font metadata display
148+
- Smooth transitions
149+
- Fully responsive design
150+
151+
## 📝 Verification
152+
153+
Check that everything works:
154+
155+
1. **Fonts load**: Open DevTools Network tab, verify fonts load from `/assets/fonts/`
156+
2. **No 404s**: No errors in console
157+
3. **CSS loads**: Check `/assets/fonts.css` returns valid CSS
158+
4. **Preloads work**: See preload links in Network tab
159+
5. **UI renders**: Font showcase displays correctly
160+
161+
## 🎉 Summary
162+
163+
The Angular app is now configured with:
164+
165+
- ✅ Build-time font optimization
166+
- ✅ Automatic HTML injection
167+
- ✅ Self-hosted fonts in `public/`
168+
- ✅ Zero external dependencies
169+
- ✅ Production-ready setup
170+
171+
**Everything is ready to run!** Just start the server and the fonts will work immediately. 🚀

0 commit comments

Comments
 (0)