Zurück zu den Anleitungen

Google-Fonts-URL finden

Die Google-Fonts-URL finden und kopieren, um eigene Schriften im Favicon zu nutzen. Schritt für Schritt.

Warum Google Fonts? Google Fonts eignet sich gut, weil alle Schriften auf der Website kostenlos für kommerzielle Zwecke nutzbar sind. Lizenzfragen und Extra-Kosten entfallen.

Schritt für Schritt

Schritt 1: Google Fonts öffnen

Öffnen Sie fonts.google.com im Browser. Das ist die offizielle Google-Fonts-Website mit Tausenden kostenlosen Schriften.

Schritt 2: Schrift wählen

Durch die Sammlung blättern und die gewünschte Schrift anklicken. Über die Suche oben finden Sie bestimmte Namen schneller.

Schritt 3: Schriften zur Auswahl hinzufügen

Wenn eine Schrift passt, oben rechts auf „Get font“ klicken. Sie landet in der Auswahl. Das können Sie für mehrere Schriften wiederholen — unser Favicon-Generator lädt mehrere Schriften aus einer URL.

Position der Schaltfläche Get font oben rechts bei Google Fonts

„Get font“ steht oben rechts

Schritt 4: Ausgewählte Schriften öffnen

Sind alle Schriften gewählt, oben rechts „View selected families“ suchen. Die Schaltfläche zeigt die Anzahl. Anklicken, dann „Get embed code“, um den Code zu sehen.

Schaltflächen View selected families und Get embed code bei Google Fonts

Zuerst „View selected families“, dann „Get embed code“

Google-Fonts-Einbettungscode mit link-Tags und Schrift-URLs

Dialog mit allen link-Tags

Schritt 5: Die Schrift-URL extrahieren

Google Fonts zeigt mehrere link-Tags, darunter preconnect und das Haupt-Stylesheet. Ungefähr so:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Das link-Tag mit css2 in der URL ist das längste. Kopieren Sie die gesamte URL aus dem href-Attribut (alles zwischen den Anführungszeichen). Im Beispiel lautet die URL:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap

Fügen Sie sie im Favicon-Generator ins Feld „Benutzerdefinierte Schriftart“ ein. Eine URL enthält alle gewählten Schriften.

Tipps

  • Lassen Sie &display=swap in der URL, das lädt besser
  • Nur Schriften wählen, die Sie wirklich brauchen, sonst dauert das Laden länger
  • Die URL vollständig kopieren, sonst lädt der Generator die Schriften möglicherweise nicht