1. Google Webfonts Helper nutzen: Gehe auf google-webfonts-helper[cite: 1].

  2. Dateien laden: Suche die gewünschte Schrift, wähle die gewünschten Schriftschnitte (400, 700, etc.) aus und lade das .zip-Archiv herunter[cite: 1].

  3. Entpacken & Upload: Entpacke die .woff2-Dateien und lade sie per FTP/SFTP in deinen Ordner /var/www/blog.EXAMPLE.TLD/web/fonts/ hoch[cite: 2].

  4. CSS anpassen: Kopiere den CSS-Code aus dem "Copy CSS"-Bereich des Helper-Tools in deine /var/www/blog.EXAMPLE.TLD/web/fonts/fonts.css[cite: 1, 2].

  5. Pfade prüfen: Da deine fonts.css und die neuen .woff2-Dateien im selben Verzeichnis (/web/fonts/) liegen, kannst du die Pfade im CSS einfach auf den Dateinamen kürzen (z. B. url('beispiel.woff2'))[cite: 2].

2. Einbindung in Joomla

Da du die fonts.css bereits einmalig in deiner custom.css via @import eingebunden hast, musst du im Joomla-Backend nichts mehr ändern[cite: 2]. Sobald du die neue Schrift in der fonts.css definiert hast, ist sie global für dein Template verfügbar.

3. Anwendung (CSS-Regel)

Du kannst die neue Schrift dann einfach in deiner custom.css (oder über die Template-Einstellungen) verwenden:

CSS

TXT
body {
    font-family: 'DeineNeueSchrift', sans-serif;
}

Zusammenfassung der Vorteile

  • Zentralisierung: Du hast eine einzige Datei (fonts.css), in der alle deine lokalen Schriften definiert sind[cite: 2].

  • Kein Overhead: Du musst das Template-Backend nicht mehr anfassen, wenn du eine Schrift änderst oder hinzufügst[cite: 2].

  • Performance: Da die Schriften auf deinem eigenen Webserver liegen und via font-display: swap geladen werden, minimierst du das "Flash of Unstyled Text" (FOUT)[cite: 2].

Das ist ein sehr effizientes System für dein CachyOS-basiertes Setup und den Debian-Server. Hast du schon eine neue Schrift im Blick, die du hinzufügen möchtest, oder ist das erst einmal für zukünftige Projekte geplant?

Quellen: [cite: 1] Eigene Erfahrung mit dem Workflow des "google-webfonts-helper" zur DSGVO-konformen Einbindung. [cite: 2] Deine bereitgestellten Pfade und die vorherige Abstimmung zur CSS-Architektur.