# 📥 FONTS-DOWNLOAD ANLEITUNG

## ⚖️ Warum lokale Fonts (wichtig!)

**DSGVO-Pflicht seit 2022:**
- LG München I, Urteil vom 20.01.2022 (Az. 3 O 17493/20)
- Google Fonts extern laden = unerlaubte IP-Weitergabe an Google USA
- **Abmahnrisiko: 100-500€ pro Fall** (z.B. durch RAAG oder spezialisierte Anwälte)
- Cookie-Banner hilft NICHT, weil Font vor Zustimmung geladen wird

**Performance-Bonus:**
- Kein DNS-Lookup zu fonts.googleapis.com (~200ms gespart)
- Kein separater Download von Google-Servern
- Kein Render-Blocking
- **+5-8 Punkte** bei PageSpeed Mobile

---

## 📦 Die 7 benötigten Font-Dateien

Du brauchst diese 7 woff2-Dateien im Ordner `/fonts/`:

```
fonts/
├── inter-300.woff2          (Inter Light)
├── inter-400.woff2          (Inter Regular)
├── inter-500.woff2          (Inter Medium)
├── inter-600.woff2          (Inter SemiBold)
├── fraunces-500.woff2       (Fraunces Medium)
├── fraunces-600.woff2       (Fraunces SemiBold)
└── fraunces-500-italic.woff2 (Fraunces Medium Italic)
```

---

## 🚀 OPTION 1: Google-Webfonts-Helper (empfohlen, 2 Minuten)

Das einfachste Tool, macht alles automatisch:

### Schritt 1: Inter herunterladen
1. Öffne: https://gwfh.mranftl.com/fonts
2. Suche **"Inter"**
3. Wähle Charsets: **"latin"** (reicht für Deutsch)
4. Wähle Styles: **300, 400, 500, 600** (normal)
5. Klick **"Download files"** → ZIP runterladen
6. ZIP entpacken, du hast jetzt mehrere .woff2 Dateien
7. Umbenennen in:
   - `inter-v*-latin-300.woff2` → `inter-300.woff2`
   - `inter-v*-latin-regular.woff2` → `inter-400.woff2`
   - `inter-v*-latin-500.woff2` → `inter-500.woff2`
   - `inter-v*-latin-600.woff2` → `inter-600.woff2`

### Schritt 2: Fraunces herunterladen
1. Gleiche Seite, suche **"Fraunces"**
2. Charsets: **"latin"**
3. Styles: **500, 600** (normal) + **500 italic**
4. Download ZIP
5. Umbenennen:
   - `fraunces-v*-latin-500.woff2` → `fraunces-500.woff2`
   - `fraunces-v*-latin-600.woff2` → `fraunces-600.woff2`
   - `fraunces-v*-latin-500italic.woff2` → `fraunces-500-italic.woff2`

### Schritt 3: Alle 7 Dateien in den Ordner `fonts/` legen
Dann alles via WinSCP / Plesk-Dateimanager hochladen nach:
```
/var/www/vhosts/easy-firmen-page.de/erduan.easy-firmen-page.de/fonts/
```

---

## 🛠️ OPTION 2: Manuell von Google Fonts

Falls Option 1 nicht klappt:

1. https://fonts.google.com/specimen/Inter → **"Get font"** → "Download all"
2. https://fonts.google.com/specimen/Fraunces → **"Get font"** → "Download all"
3. Du erhältst .ttf-Dateien
4. Konvertieren zu .woff2:
   - Online: https://cloudconvert.com/ttf-to-woff2 (kostenlos)
   - Oder: https://www.fontsquirrel.com/tools/webfont-generator
5. Dateien nach obigem Schema benennen

---

## ✅ Nach Upload testen

Nach Upload der Fonts + neuer HTML:
1. Browser-Cache leeren (Strg+Shift+R)
2. Seite laden
3. Rechtsklick → Untersuchen → **Netzwerk-Tab**
4. Filter: **"Font"**
5. Check: Alle Fonts werden von deiner Domain geladen (NICHT von fonts.gstatic.com!)

---

## 🎯 Nach Umstellung erwartete Verbesserung

| Metrik | Vorher | Nachher |
|---|---|---|
| PageSpeed Mobile | 83 | ~88-92 |
| LCP | höher | schneller |
| CLS | OK | OK |
| FCP | ~1.5s | ~1.2s |
| **DSGVO-Risiko** | **Abmahngefahr** | **✅ Sicher** |