4.3 Lokale Fonts (Download & Einbindung mit gwfh.mranftl.com)

Zeigt, wie Schriften heruntergeladen, lokal gespeichert und über CSS eingebunden werden – ohne Google-Font-Requests.

A. Alternative A - in Elementor umstellen (seit 11.2025)

Elementor -> Einstellungen -> Erweitert
1. Google Fonts -> „aktiveren“
2. Google Fonts laden -> „tauschen“
Elementor -> Einstellungen -> Leistung
1. Google Fonts lokal laden -> „aktivieren“

B. Alternative B – Fonts herunterladen

Seite öffnen
Font wählen (z. B. Inter, Poppins)
Subset = latin
Alle Gewichtungen
„Customize folder prefix“ → ./assets/fonts/
CSS kopieren → in style.css
ZIP herunterladen → entpackt nach assets/fonts

C. CSS-Integration

@font-face {
  font-family: 'Inter';
  src: url('./assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

font-display: swap verbessert Core Web Vitals, weil der Text sofort mit System-Font angezeigt wird.

Weiter zum nächsten Kapitel →