0Pricing
CSS Academy · Lektion

Google Fonts und @font-face

Laden Sie externe Schriften aus Google Fonts oder definieren Sie mit der @font-face-Regel eigene Schriften.

Google Fonts und @font-face ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum benutzerdefinierte Schriften?

Websichere Schriften bieten nur eine begrenzte Auswahl. Mit benutzerdefinierten Schriften können Sie die Markenidentität präzise umsetzen. Die beiden wichtigsten Ansätze sind Google Fonts (gehosteter Dienst) und @font-face (selbst gehostet).

Google-Fonts-Einrichtung

Besuchen Sie fonts.google.com, wählen Sie eine Schriftfamilie aus, legen Sie die Schriftschnitte fest und kopieren Sie das <link>-Tag in den HTML-<head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Google Fonts in CSS verwenden

Verweisen Sie nach dem Einbinden in Ihrer font-family-Liste über den Namen auf die Schrift:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parameter der Google-Fonts-API

Der Parameter display=swap verwendet die Font-Display-Swap-Strategie: Der Text wird sofort in der Ersatzschrift angezeigt und anschließend durch die benutzerdefinierte Schrift ersetzt, sobald diese geladen ist. Dadurch wird unsichtbarer Text während des Ladens verhindert.

Grundlagen von @font-face

Mit @font-face können Sie eine benutzerdefinierte Schriftdatei laden, die Sie selbst hosten. Definieren Sie den Namen der Schriftfamilie und die Quelle der Datei:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: Das moderne Format

WOFF2 (Web Open Font Format 2) ist das empfohlene Format. Es bietet die beste Komprimierung (typischerweise 30 % kleiner als WOFF) und wird von allen modernen Browsern unterstützt. Binden Sie WOFF immer als Fallback ein.

Mehrere Schriftschnitte mit @font-face

Definieren Sie für jede Kombination aus Schriftschnitt und Stil einen eigenen @font-face-Block. Verwenden Sie denselben Namen für font-family, damit der Browser automatisch die richtige Datei auswählt:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

font-display-Eigenschaft

Der Deskriptor font-display steuert das Ladeverhalten von Schriften:

  • swap – Ersatzschrift sofort anzeigen und nach dem Laden ersetzen (empfohlen)
  • block – Text bis zu 3 Sekunden unsichtbar
  • fallback – kurze Blockierungsphase, danach dauerhaft die Ersatzschrift verwenden
  • optional – nur verwenden, wenn die Schrift bereits im Cache liegt
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face für variable Schriften

Variable Schriften definieren Wertebereiche für Achsen statt fester Schriftschnittwerte:

<p class="variable-text">Variable weight text (550)</p>

Wichtige Schriften vorab laden

Laden Sie Ihre wichtigste Schriftdatei vorab, um die renderblockierende Verzögerung zu verringern. Fügen Sie ein <link rel="preload"> vor dem Stylesheet ein:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() zum Überspringen des Downloads

Verwenden Sie local() in src, um vor dem Herunterladen zu prüfen, ob der Benutzer die Schrift bereits installiert hat:

<p class="roboto-text">Uses local Roboto if installed</p>

Kurztest

Welches Schriftformat bietet die beste Komprimierung und die umfassendste Unterstützung durch moderne Browser?

Zusammenfassung

Google Fonts stellt einfach einzubindende gehostete Schriften über ein <link>-Tag bereit. Hosten Sie Schriften mit @font-face selbst und verwenden Sie das WOFF2-Format sowie font-display: swap für optimale Leistung. Laden Sie wichtige Schriften vorab und verwenden Sie local(), um unnötige Downloads zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „Google Fonts und @font-face“ kostenlos?

Ja — der vollständige Text von „Google Fonts und @font-face“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Google Fonts und @font-face“?

Laden Sie externe Schriften aus Google Fonts oder definieren Sie mit der @font-face-Regel eigene Schriften. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Google Fonts und @font-face“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Schriftfamilien und websichere Schriften
  2. Schriftgröße, -stärke und -stil
  3. Textausrichtung, -dekoration und -abstände
  4. Google Fonts und @font-face
← Zurück zu CSS Academy