Google Fonts per CSS einbinden: Webfonts, Barcode-Schriften und QR-Code-Alternativen
Webfonts, Barcode-Schriften und QR-Codes sauber trennen
Google Fonts liefert Text- und Symbolschriften über eine CSS-API. Im Katalog liegen außerdem mehrere Libre-Barcode-Familien. Einen allgemeinen QR-Code-Font bietet Google Fonts dagegen nicht. Das ist kein bloßer Namensunterschied: Lineare Barcodes können sich teilweise über vorbereitete Glyphen darstellen lassen, während ein QR-Code aus dem gesamten Nutzinhalt, einer Fehlerkorrekturstufe und weiteren Parametern berechnet wird.
Eine feste Zahl für den gesamten Google-Fonts-Katalog nenne ich bewusst nicht. Der Bestand ändert sich laufend; eine Momentaufnahme aus einer Sekundärquelle wäre schnell veraltet und hilft bei der Auswahl kaum.
Google Fonts über die CSS2-API einbinden
Für eine extern geladene Schrift genügt ein Stylesheet-Link. Die beiden preconnect-Hinweise sind optional und lohnen sich vor allem, wenn die Verbindung zu Google ohnehin vorgesehen ist:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: "Inter", system-ui, sans-serif;
}
display=swap zeigt den Text zunächst in einer Ersatzschrift und tauscht sie aus, sobald der Webfont verfügbar ist. Das verhindert unsichtbaren Text, kann aber einen sichtbaren Schriftwechsel verursachen. Wer Layout-Verschiebungen minimieren will, stimmt die Fallback-Schrift zusätzlich mit CSS-Eigenschaften wie size-adjust ab.
Variable Fonts können einen Wertebereich in einer Datei abdecken. Trotzdem sollte die Anfrage nur die tatsächlich verwendeten Achsen und Bereiche enthalten:
https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap
Libre Barcode richtig verwenden
Google Fonts führt unter anderem Libre Barcode 39, Libre Barcode 39 Extended, Libre Barcode 128 und Libre Barcode EAN13 Text, jeweils teilweise auch als Text-Variante. Die Familien sind nicht austauschbar.
- Code 39: Der Nutztext wird für die Libre-Barcode-Implementierung mit Start- und Stoppzeichen umschlossen, beispielsweise
ABC123. Zulässiger Zeichensatz und Prüfziffer hängen von der gewählten Code-39-Variante ab. - Code 128: Eine beliebige Zeichenfolge reicht nicht. Vor der Darstellung muss ein Encoder Zeichensatzwechsel, Startcode und Prüfsumme berechnen.
- EAN-13: Die Eingabe besteht aus Ziffern. Das Libre-Barcode-Projekt dokumentiert, wie eine fehlende Prüfziffer über OpenType-Ersetzungen erzeugt werden kann. Ob diese Funktion in der konkreten Renderkette aktiv ist, muss getestet werden.
.barcode-ean13 {
font-family: "Libre Barcode EAN13 Text";
font-feature-settings: "calt" 1;
font-size: 48px;
}
Eine optisch plausible Ausgabe ist noch kein belastbarer Barcode. Druckauflösung, Modulbreite, Kontrast, Ruhezonen, Skalierung und die verwendete Symbologie beeinflussen die Lesbarkeit. Für Versand, Verkauf, Produktion oder andere verbindliche Prozesse sollte eine passende Barcode-Bibliothek verwendet und das Ergebnis mit den vorgesehenen Scannern geprüft werden.
Warum ein QR-Code einen Encoder braucht
Bei einem QR-Code hängen Matrixgröße, Datenblöcke, Maskierung und Reed-Solomon-Fehlerkorrektur vom vollständigen Inhalt und den gewählten Parametern ab. Ein gewöhnlicher Font, der jedes Eingabezeichen unabhängig durch eine Glyphe ersetzt, kann diese Berechnung nicht übernehmen. Speziallösungen können vorberechnete QR-Glyphen oder komplexe Layouttechnik verwenden; sie ersetzen aber keinen allgemeinen QR-Encoder für beliebige Daten.
Für Webseiten eignen sich beispielsweise qrcode.js im Browser oder endroid/qr-code auf einem PHP-Server. Für lineare Barcodes ist JsBarcode eine verbreitete Alternative. Entscheidend ist nicht der Bibliotheksname allein, sondern ob die benötigte Symbologie, Prüfziffern und Ausgabeparameter unterstützt werden.
Extern laden oder selbst hosten?
Beim Abruf von fonts.googleapis.com und fonts.gstatic.com baut der Browser des Besuchers Verbindungen zu Google auf; dabei wird technisch bedingt dessen IP-Adresse übermittelt. Das LG München I bewertete eine dynamische Google-Fonts-Einbindung ohne Rechtsgrundlage in seinem Urteil vom 20. Januar 2022 (Az. 3 O 17493/20) als rechtswidrig. Das Urteil ersetzt keine Prüfung des eigenen Angebots.
Self-Hosting verhindert die Google-Anfragen für diese Schriftdateien. Es macht eine Website jedoch nicht automatisch insgesamt DSGVO-konform. Lizenzen, Datenschutzerklärung, weitere Drittanbieter und die konkrete technische Umsetzung bleiben separat zu prüfen.
Eine lokale Einbindung sieht beispielsweise so aus:
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-style: normal;
font-weight: 400 700;
font-display: swap;
}
Nur die benötigten Zeichensätze und Schriftschnitte sollten ausgeliefert werden. Die Lizenzdatei gehört mit ins Projektarchiv.
Fehlersuche
1. In den Entwicklerwerkzeugen prüfen, ob CSS- und WOFF2-Datei mit Status 200 geladen werden.
2. Kontrollieren, ob der in font-family verwendete Name exakt zum @font-face-Eintrag passt.
3. Bei Barcode-Fonts zuerst eine dokumentierte Testzeichenfolge verwenden.
4. Browser-Zoom, CSS-Transformationen und Bildskalierung ausschließen, wenn Scanner Probleme haben.
5. QR- und produktive Barcodes mit realen Zielgeräten testen; eine Vorschau am Bildschirm ist kein Qualitätsnachweis.
Fazit
Für Textschriften ist die Google-Fonts-CSS2-API bequem, Self-Hosting vermeidet jedoch die externen Font-Anfragen. Libre Barcode kann für passende, kontrollierte Anwendungsfälle genügen. Code 128 und insbesondere QR-Codes gehören in die Hände eines Encoders, der die vollständige Symbologie berechnet.
