Google Fonts in Angular 19

TL;DR: Du lädst die Google Font herunter, entpackst sie, kopierst die Regular-Datei in /public, bindest sie mit @font-face ein und aktivierst sie global oder gezielt im Stylesheet.

Wenn du eine lokale Google Font in deinem Projekt nutzen willst, gehst du so vor:

• Google Font herunterladen Besuche Google Fonts, wähle z. B. „Inter“ und lade die ZIP-Datei herunter.
• Entpacken Öffne die ZIP und entnimm die Datei Inter-VariableFont_opsz,wght.ttf.
• Regular-Font kopieren Lege Inter-VariableFont_opsz,wght.ttf in deinem Projektordner unter /public ab.
• @font-face einfügen Öffne dein globales SCSS- oder CSS-File und füge ein:

@font-face {
  font-family: inter;
  src: url('/Inter-VariableFont_opsz,wght.ttf') format("truetype");
}

💡 Wichtig: Der führende Slash in url('/…') muss bleiben, sonst findet der Browser die Datei nicht.

Format-Anpassung: TTF = truetype, OTF = opentype.

• Font aktivieren Setze die Schrift überall oder nur an bestimmten Stellen:

/* global */
* {
  font-family: inter;
}
/* oder gezielt für Überschriften, Buttons o. Ä. */

So nutzt deine App die Schrift komplett lokal und ist unabhängig von externen Quellen.