Schnellstartanleitung für Webfont-APIs
Schnellstartanleitung für Webfont-APIs
Was ist eine FontAPI?
| Concept | Description |
|---|---|
| Web-Schriftdienst | Gehostete Bibliothek (z. B. Google Fonts, Adobe Fonts), die CSS-<link>- oder JavaScript-Snippets zum Laden von Schriftdateien von einem CDN bereitstellt. |
| CSS@font-face | Browser-API auf niedriger Ebene, die dem Browser mitteilt, wo eine Schriftdatei heruntergeladen werden soll und welchen Familiennamen sie für CSS freigeben soll. |
| Variable-Font-API | Neuere Syntax (font-variation-settings, Achsenbereiche), mit der eine einzelne Datei mehrere Stile (Stärke, Breite, Neigung usw.) bereitstellen kann. |
| Schriftdarstellungsdeskriptor | Steuert die Textdarstellung während des Ladens der Schriftart (auto, block, swap, fallback, optional). |
| JavaScript-Ladehilfsfunktionen | Optionale Hilfsfunktionen (FontFace-Konstruktor, document.fonts.load()) zum dynamischen Laden oder Vorladen von Schriftarten. |
Alle diese gehören zur „Font API“-Familie, weil sie programmgesteuerte Möglichkeiten zum Anfordern und Verwenden von Schriftarten offenlegen.
Grundlegende CSS-Terminologie
| Eigenschaft / Schlüsselwort | Bedeutung |
|——————————|———|
|font-family | Der Name, den Sie in CSS verwenden, nachdem die Schriftart geladen wurde. |
|src | URL(s) der Schriftartdatei(en) (.woff2, .woff, .ttf, …). |
|unicode-range | Zeichensatz einer bestimmten Datei – ideal für Teilmengenbildung. |
|font-weight / font-style / font-stretch | Klassische statische Deskriptoren. |
|font-variation-settings | Schlüssel-Wert-Paare für variable Achsen ('wght' 400). |
|font-display | Ausweichstrategie für die Darstellung während des Ladens der Schriftart. |
Verwendung des integrierten CSS@font-face (selbst gehostet)
1<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Vorteile: volle Kontrolle über Caching, Lizenzierung und Teilmenge; Funktioniert offline, wenn Sie die Dateien bündeln.
Googlefonts CSSAPI (die gebräuchlichste API für öffentliche Schriftarten)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="stylesheet">Erklärung
| Teil | Funktion |
|---|---|
family=Roboto:wght@400;700 | Nur normale und fette Schriftschnitte von Roboto anfordern. |
family=Open+Sans:ital,wght@0,400;0,600;1,400 | Normale/halbfette römische Schriftschnitte sowie kursive normale Schriftschnitte von OpenSans laden. |
display=swap | Ersatztext verwenden, bis die Schriftarten vollständig geladen sind (empfohlen für eine bessere Benutzererfahrung). |
Dann in CSS:
1h1 { font-family: 'Roboto', sans-serif; }
2p { font-family: 'Open Sans', sans-serif; }Tipps
- Kombinieren Sie mehrere Familien in einer einzigen Anfrage – reduziert HTTP-Roundtrips.
- Verwenden Sie Achsenbereiche für variable Schriftarten: „family=Inter:wght@200..800“.
Beispiel für variable Schriftarten (Googlefonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</style>Warum es wichtig ist: Eine Datei ersetzt Dutzende statischer „.woff2“s → erheblich kleinere Nutzlast.
API zum Laden von JavaScript-Schriftarten („FontFace“)
Wann verwenden? – Sie müssen eine Schriftart nach dem Laden der Seite laden (z. B. im Routing einer Single-Page-Anwendung) oder möchten warten, bis die Schriftart geladen ist, bevor die Benutzeroberfläche angezeigt wird.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));Sie können auch abfragen, welche Schriftarten geladen sind:
1document.fonts.ready.then(() => console.log('All fonts ready'));AdobeFonts (Typekit) – eine weitere öffentliche Schriftart-API
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Dann referenzieren Sie Familien genau so, wie im Kit aufgeführt:
1h2 { font-family: "adobe-caslon-pro", serif; }Hauptunterschiede zu Googlefonts
- Erfordert ein Adobe-Konto und eine Einbettungskit-ID („xyz123“).
- Bietet sync- und async-Ladeoptionen (
<script>… Typekit.load(); </script>).
Best Practices für die Leistung
Teilmenge nur benötigter Glyphen – verwenden Sie den Parameter „unicode-range“ oder Google Fonts „text=“.
Nutzen Sie „Preload“ für kritische Schriftarten:
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Setzen Sie „font-display“ mindestens auf „swap“.
Vermeiden Sie es, die Textwiedergabe zu „blockieren“, da dies CLS (Cumulative Layout Shift) beeinträchtigt.Kombinieren Sie Familien in einer Anfrage, wenn Sie GoogleFonts oder AdobeFonts verwenden.
Cache für immer – die meisten CDNs senden „Cache-Control“-Header für die Zukunft für woff2-Dateien.
Kurzreferenz-Spickzettel
| API | Anfrage | Typischer Anwendungsfall |
|---|---|---|
| CSS @font-face | <style>@font-face{…}</style> + optionales <link rel="preload"> | Selbstgehostete Schriftarten, volle Kontrolle |
| Google Fonts CSS API | <link href="https://fonts.googleapis.com/css2?..."> | Kostenlose Schriftarten mit einfachen URL-Parametern |
| Adobe Fonts (Typekit) | <link href="https://use.typekit.net/xxxx.css"> | Kostenpflichtige Bibliothek mit Designsystemintegration |
| FontFace JS API | new FontFace(name, src[, descriptors]) | Dynamisches Laden in Single-Page-Anwendungen / Laufzeit-Bundles |
| Variabler Schriftachsenbereich | family=Inter:wght@200..800 oder CSS font-variation-settings | Reduziert die Dateianzahl und ermöglicht sanfte Übergänge zwischen verschiedenen Schriftstärken |
TL;DR-Codebeispiel – Einzeiler für die meisten Projekte
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Lädt nur normale und fette Schriftschnitte → minimaler Download. ✅
display=swapgarantiert schnellen Fallback-Text → gute Benutzererfahrung. ✅ Funktioniert auf allen modernen Browsern ohne zusätzliches JavaScript.
Was ist mit Aspose?
Wenn Sie Schriftartdateien auf der Serverseite bearbeiten oder konvertieren müssen (z. B. Teilmengen generieren, zwischen TTF/WOFF2 konvertieren oder Glyphenmetriken extrahieren), bietet die Aspose.Font-Bibliothek eine programmgesteuerte API für .NET, Java und Python. Es kann in Build-Pipelines oder Back-End-Dienste integriert werden, um Schriftarten-Assets vorzubereiten, bevor sie über eine der oben beschriebenen Schriftarten-APIs bereitgestellt werden.
Bereit zum Einbetten?
Kopieren Sie eines der oben genannten Snippets in Ihr HTML/CSS/JS und Sie erhalten in Sekundenschnelle eine produktionsbereite Font-API-Integration. Viel Spaß beim Stylen!