Add Google Fonts with CSS: web fonts, barcode fonts, and QR code alternatives
Separate web fonts, barcode fonts, and QR codes
Google Fonts serves text and symbol fonts through a CSS API. Its catalog also contains several Libre Barcode families, but no general-purpose QR code font. The distinction is technical: some linear barcodes can be represented with prepared glyphs, while a QR matrix must be calculated from the complete payload, error-correction level, mask, and other parameters.
This article deliberately avoids quoting a total number of Google Fonts families. The catalog changes continuously, and a snapshot from a secondary source becomes stale quickly.
Load a font through the CSS2 API
<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;
}
The two preconnect hints are optional. display=swap renders fallback text immediately and swaps in the web font once it is available. This avoids invisible text but can produce a visible font change. Variable fonts can request a range rather than separate files:
https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap
Request only the axes and ranges the site actually uses.
Use Libre Barcode correctly
Google Fonts includes families such as Libre Barcode 39, Libre Barcode 39 Extended, Libre Barcode 128, and Libre Barcode EAN13 Text. They are not interchangeable.
- Code 39: The Libre Barcode implementation expects start and stop characters, for example
ABC123. The permitted character set and checksum rules depend on the selected variant. - Code 128: Plain input is insufficient. An encoder must calculate the start code, character-set changes, and checksum before the result is rendered with the font.
- EAN-13: Input is numeric. Libre Barcode documents an OpenType-based method for deriving a missing check digit. Test whether the required OpenType feature is active in the actual rendering chain.
.barcode-ean13 {
font-family: "Libre Barcode EAN13 Text";
font-feature-settings: "calt" 1;
font-size: 48px;
}
A plausible-looking pattern is not proof of a reliable barcode. Module width, resolution, contrast, quiet zones, scaling, and symbology all affect scanning. Shipping, retail, or production labels should be produced with an appropriate barcode library and tested with the intended scanners.
Why QR codes need an encoder
A normal font maps characters to independent glyphs. It cannot generally calculate a QR matrix whose size, data blocks, mask, and Reed–Solomon error correction depend on the complete payload. Special-purpose solutions may contain precomputed QR glyphs, but they do not replace a general QR encoder for arbitrary data.
Examples include qrcode.js in a browser and endroid/qr-code on a PHP server. JsBarcode is one option for linear barcodes. Verify that any chosen library supports the required symbology and output parameters.
External loading or self-hosting?
When a browser fetches files from fonts.googleapis.com and fonts.gstatic.com, it connects to Google and necessarily transmits its IP address. In its judgment of 20 January 2022 (3 O 17493/20), the Munich Regional Court I found one dynamic Google Fonts implementation without a legal basis unlawful.
Self-hosting prevents those font requests to Google. It does not make the entire site automatically GDPR-compliant; licensing, the privacy notice, other third parties, and the complete implementation still require separate review.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-style: normal;
font-weight: 400 700;
font-display: swap;
}
Serve only the required character sets and weights, and keep the license file with the project.
Troubleshooting
1. Confirm that the CSS and WOFF2 files return HTTP 200.
2. Match the font-family name exactly.
3. Start barcode tests with a documented sample value.
4. Exclude browser zoom and CSS transforms when a scanner fails.
5. Test QR codes and production barcodes on the intended real devices.
Conclusion
The Google Fonts CSS2 API is convenient for text fonts; self-hosting avoids external font requests. Libre Barcode can suit controlled use cases, but Code 128 and QR codes require an encoder that understands the complete symbology.
