Google Fonts

Was sind Google Fonts?

Google Fonts ist eine kostenlose Bibliothek mit über 1.500 Schriftarten, die du direkt in Webseiten einbinden kannst. Der große Vorteil: Besucher müssen die Schrift nicht erst installieren.

Wie bindet man Google Fonts ein?

Es gibt zwei Wege:

1. über einen <link> im HTML-Head
2. über @import im CSS

Beispiel: Einbindung über <link>

<link href="https://fonts.googleapis.com/css2?family=Sofia&family=Trirong&family=Audiowide&display=swap" rel="stylesheet">

Im CSS benutzen

body {
    font-family: "Sofia", sans-serif;
}

h1 {
    font-family: "Audiowide", sans-serif;
}

p {
    font-family: "Trirong", serif;
}

Die Google Fonts im Überblick

1. Sofia (weich & dekorativ)

Sofia ist eine verspielte, elegante Schrift – ideal für Titel und kreative Designs.

2. Trirong (klassische Serifenschrift)

Trirong wirkt wie eine moderne Serifenschrift und eignet sich gut für Texte.

3. Audiowide (modern & technisch)

Audiowide hat einen futuristischen Stil – perfekt für Technik-Themen.

Google Font Styles

Viele Google Fonts bieten verschiedene Varianten:

• Thin (100)
• Light (300)
• Regular (400)
• Medium (500)
• Bold (700)
• Black (900)
• Kursive Versionen (Italic)

p {
    font-family: "Trirong", serif;
    font-weight: 700;   /* fetter Text */
    font-style: italic; /* kursiv */
}

Google Font-Effekte

Einige Schriften können spezielle Effekte bekommen, z. B.:

• outline – Textumrandung
• shadow-multiple – mehrere Schatten
• emboss – wie eingraviert

<link href="https://fonts.googleapis.com/css?family=Sofia&effect=emboss|outline|shadow-multiple" rel="stylesheet">

<h1 class="font-effect-emboss">Geprägter Effekt</h1>