Webentwicklung - Extras / Erweiterungen

Neue Schriften einbinden - Google Fonts

Vorbei ist es mit der äußerst beschränkten Anzahl an Schriften die Ihnen als Web­designer zur Ver­fügung stehen. Google Fonts stellt ungefähr 840 Schriften bereit. All diese Schriften können Sie voll­kommen kosten­los und ohne Regestrierung nutzen!

Google Fonts: So geht`s ...

  • Öffnen Sie die Internet­seite: https://fonts.google.com/

  • Sehen Sie sich auf der Website um, Sie haben zahl­reiche Optionen ...

  • Am rechten Seiten­rand können Sie die Auswahl - durch das Setzen von Filtern - Ihren Wünschen ent­sprechend anpassen!

  • Im Haupt­fenster sehen Sie ver­schiedene Vorschauen von Schriften.

  • Suchen Sie sich eine Schrift aus und klicken Sie auf das ent­sprechende kleine weiße Plus­zeichen im roten Kreis!
Die Google Fonts Startseite
Die Google Fonts Startseite

Google Fonts: Schrift auswählen ...

  • Ihre Auswahl wird registriert, eine Art "Waren­korb" wird am unteren Rand angezeigt.

  • Durch einen Klick auf den "Waren­korb" öffnet sich ein kleines Fenster mit Informationen zur Ver­wendung der aus­gewählten Schrift.

  • Beispiel: Auswahl der Schrift Poiret One

  • Sie erhalten zwei Code­schnipsel!

  • Embed Font: <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

  • Specify in CSS: font-family: 'Poiret One', cursive;
Schrift auswählen
Schrift auswählen

Google Fonts: Schrift verwenden ...

  • Kopieren Sie den Code (Embed Font) in den head Bereich Ihrer Website!

  • Kopieren Sie den Code (Specify in CSS) in Ihre CSS Datei!

  • Fertig!
Eine neue Schrift
Code implementieren: Beispiel öffnen

Weiterführende Links

Bei der Auswahl der Schriften hat man die Qual der Wahl. Allerdings gibt es auch einiges zu beachten!

Mehr zum Thema?

Zum Seitenanfang springen Λ