Summary  
This chapter explains how to integrate custom web fonts by adding HTML <link> tags to fetch font resources (with preconnect and CORS considerations) and then applying them in CSS using font-family stacks and fallbacks to ensure consistent, performant typography.

General domain of usage  
Front-end web development

Learn how to add custom fonts to your website using Google Fonts. This video demonstrates how to select a font, embed it in your HTML, and apply it using CSS. You'll see the difference between default and custom fonts, and understand why proper font loading order is important for your site's appearance. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Schriftarten prägen das Erscheinungsbild und die Atmosphäre einer Website maßgeblich. Hochwertige Typografie verbessert die Lesbarkeit und macht ein Design einprägsamer. Viele Schriftarten sind kostenlos nutzbar, andere erfordern eine Lizenzierung – Urheberrechte sind stets zu beachten.

## Google Fonts Service
Es stehen zahlreiche interessante Schriftarten zur kostenlosen Nutzung bereit. Im Folgenden werden die Möglichkeiten von <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a> vorgestellt. Das Einbinden einer Google-Schriftart in das Markup ist unkompliziert.

Zunächst wird das folgende Beispiel mit der Standardschrift ausgeführt. Das `p`-Element besitzt die Eigenschaften: `font-family` (Schriftname), `font-size` (Schriftgröße) und `font-weight` (Schriftstärke).

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD4KICAgICAgQnVpbGRpbmcgZ3JlYXQgZXhwZXJpZW5jZXMgdGFrZXMgdGltZSwgY2xhcml0eSwgYW5kIGZvY3VzLiBUaGlzIHNwYWNlIGlzCiAgICAgIHJlc2VydmVkIGZvciBmdXR1cmUgY29udGVudCB0aGF0IHdpbGwgZ3VpZGUsIGluZm9ybSwgb3IgaW5zcGlyZS4gV2hldGhlcgogICAgICBpdCdzIGEgc3RvcnksIGEgcHJvZHVjdCBkZXNjcmlwdGlvbiwgb3IgYSBtZXNzYWdlIHRvIHlvdXIgYXVkaWVuY2UgLSBldmVyeQogICAgICB3b3JkIGhlcmUgd2lsbCBtYXR0ZXIuCiAgICA8L3A+CiAgICA8cD4KICAgICAgVW50aWwgdGhlbiwgdGhpbmsgb2YgdGhpcyBhcyBhIHF1aWV0IHBsYWNlaG9sZGVyLiBTb21ldGhpbmcgc2ltcGxlLgogICAgICBTb21ldGhpbmcgd2FpdGluZyB0byBiZWNvbWUgbWVhbmluZ2Z1bC4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgZm9udC1mYW1pbHk6ICdETSBTYW5zJzsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQ==

Die Eigenschaft font-family funktioniert nicht, da unser Projekt die benutzerdefinierte Schriftart "DM Sans" noch nicht kennt. Fügen wir die Schriftart dem Projekt hinzu, indem wir <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a> verwenden.

Zum Vergrößern der Details auf das Bild klicken.

Im Eingabefeld "Search fonts" den gewünschten Schriftartnamen eingeben. In diesem Fall "DM Sans". Sobald die Schriftart erscheint, auf die Karte für "DM Sans" klicken.

Auf der Schriftart-Seite die Schaltfläche „Get font“ anklicken.

Klicken Sie als Nächstes auf die Schaltfläche "Get embed code".

Kopieren Sie abschließend den Link und fügen Sie ihn in die HTML-Datei Ihres Projekts innerhalb des `<head>`-Elements ein. Es ist wichtig, den Link **vor** dem Link zu Ihren eigenen Styles einzufügen. Dadurch wird sichergestellt, dass der Browser zuerst die benutzerdefinierten Schriftarten lädt, bevor er Styles anwendet, die diese verwenden. Nachdem Sie den Link hinzugefügt haben, steht "DM Sans" als benutzerdefinierte Schriftart für Ihr Projekt zur Verfügung. Führen Sie nun das Projekt aus, um zu überprüfen, ob alles korrekt funktioniert.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbSIgLz4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbSIgY3Jvc3NvcmlnaW4gLz4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9RE0rU2FuczppdGFsLG9wc3osd2dodEAwLDkuLjQwLDEwMC4uMTAwMDsxLDkuLjQwLDEwMC4uMTAwMCZkaXNwbGF5PXN3YXAiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+CiAgICAgIEJ1aWxkaW5nIGdyZWF0IGV4cGVyaWVuY2VzIHRha2VzIHRpbWUsIGNsYXJpdHksIGFuZCBmb2N1cy4gVGhpcyBzcGFjZSBpcwogICAgICByZXNlcnZlZCBmb3IgZnV0dXJlIGNvbnRlbnQgdGhhdCB3aWxsIGd1aWRlLCBpbmZvcm0sIG9yIGluc3BpcmUuIFdoZXRoZXIKICAgICAgaXQncyBhIHN0b3J5LCBhIHByb2R1Y3QgZGVzY3JpcHRpb24sIG9yIGEgbWVzc2FnZSB0byB5b3VyIGF1ZGllbmNlIC0gZXZlcnkKICAgICAgd29yZCBoZXJlIHdpbGwgbWF0dGVyLgogICAgPC9wPgogICAgPHA+CiAgICAgIFVudGlsIHRoZW4sIHRoaW5rIG9mIHRoaXMgYXMgYSBxdWlldCBwbGFjZWhvbGRlci4gU29tZXRoaW5nIHNpbXBsZS4KICAgICAgU29tZXRoaW5nIHdhaXRpbmcgdG8gYmVjb21lIG1lYW5pbmdmdWwuCiAgICA8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

Wir können den Unterschied zwischen der **benutzerdefinierten Schriftart** und der **Standardschriftart** beobachten. Zusätzlich verwendet jeder Browser eigene Standardschriftarten. Daher ist es unerlässlich, zu wissen, wie man benutzerdefinierte Schriftarten auf einer Website verwendet.

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Benutzerdefinierte Schriftarten Hinzufügen

Google Fonts Service