CSS Webfonts
Sie kennen bereits font-family, Größe und Gewicht. Webfonts laden eine Schrift, die nicht schon auf dem Gerät des Besuchers liegt — deklarieren Sie sie mit @font-face, nutzen Sie den Familiennamen wie jede andere Schrift und enden Sie ruhig mit einem Fallback.
Teile von @font-face
📊 @font-face auf einen Blick
| Teil | Alltagsjob |
|---|---|
font-family |
Der Name, den Sie erfinden und später in CSS verwenden |
src |
Wo die Schriftdatei(en) liegen (url(...) und oft format(...)) |
font-weight / font-style |
Welches Face diese Datei darstellt (regular, bold, italic…) |
font-display |
Wie Text sich beim Laden der Schrift verhält (z. B. swap) |
Denken Sie an zwei ruhige Schritte: Face mit @font-face registrieren, dann denselben Familiennamen in normalen Regeln aufrufen. Fehlt einer der Schritte, findet der Stack die eigene Datei nie.
Ein minimales @font-face
Geben Sie dem Face einen klaren Namen und zeigen Sie mit src auf eine Schriftdatei auf Ihrer Site (oder CDN).
Einfaches @font-face
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}Mehr als ein Format anbieten
Moderne Browser bevorzugen woff2. woff danach deckt ältere Browser ab. Das beste Format zuerst nennen.
woff2 dann woff
css@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}font-display — Text früher zeigen
font-display: swap lässt den Browser zuerst Fallback-Text zeigen und tauscht den Webfont ein, sobald er da ist — oft besser als eine lange unsichtbare Lücke.
Display swap
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}Die deklarierte Familie nutzen
Nach @font-face rufen Sie denselben font-family-Namen in Ihren Regeln auf — und behalten einen generischen Fallback.
Eigene Familie anwenden
cssbody {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}Eine ruhige Self-Host-Gewohnheit
Hosten Sie nur die Gewichte, die Sie brauchen, bevorzugen Sie woff2, setzen Sie font-display, und behalten Sie immer einen System-/Generik-Stack.
Überschrift mit geladenem Bold-Face
css@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}Selbst ausprobieren
- Schreiben Sie einen
@font-face-Block mit eigenemfont-family-Namen undwoff2-src. - Fügen Sie eine zweite
src-Zeile fürwoffhinzu. - Setzen Sie
font-display: swap. - Wenden Sie
"Your Name", sans-serifaufbodyan. - Wenn Sie eine Bold-Datei haben, legen Sie ein separates
@font-facefür Gewicht700an — dannfont-weight: 700auf einer Überschrift.
Häufige Fehler
@font-facedeklarieren, aber den exakten Familiennamen nie infont-familynutzen- Fallback-Stack weglassen (bricht, wenn die Datei fehlschlägt)
- Viele ungenutzte Gewichte und Stile laden (langsame Seiten)
- Text lange unsichtbar lassen ohne
font-display-Strategie - Diese Lektion mit text-shadow / Effekten vermischen (kommen als Nächstes)
Kurzfassung
@font-faceregistriert einen eigenen Familiennamen und zeigt auf Schriftdateien- Bevorzugen Sie
woff2, optional mitwoffals Fallback font-display: swaphält Text oft lesbar, während Schriften laden- Denselben Familiennamen in CSS mit System-/Generik-Fallback nutzen
- Nur benötigte Faces laden; Effekte wie text-shadow sind eine spätere Lektion
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt