+++ NEU +++ Sonntag, 5. April 2026 – zuletzt gestern aktualisiert
Ladezeit optimieren mit Webfont-Subset - die Zweite
2020 habe ich einen Artikel zum Thema Ladezeit optimieren mit Webfont-Subset erstellt.
Inzwischen geht das noch eleganter, ohne die Verwendung eines Online-Tools. Vorausgesetzt, der gewählte Font wird von Google Fonts angeboten.
So funktioniert's:
- Google-Fonts bietet eine API an, um direkt ein Webfont-Subset zu erzeugen: Die URL zum Aufruf der API lautet beispielhaft
https://fonts.googleapis.com/css2?family=Caveat:wght@700&text=Ladezeit optimieren mit Webfont-SubsetIn dieser Beispiel-URL steht- "family=Caveat" für die gewünschte Schrift
- "wght@700" für font-weight, hier: bold
- "&text=Ladezeit optimieren mit Webfont-Subset" für den Text, den du mit dem Subset anzeigen willst.
- Die Ausgabe sieht dann so aus
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6SIejYBxOgguVptYBI7t-_lZHkLh96CPyDSbTMdeF&skey=7833cd5b856b60c9&v=v23) format('woff2'); }Dieser Code kann direkt im CSS verwendet werden, wenn du kein Problem damit hast, den Code von Google-Servern zu laden. - Wenn du, wie ich, die Font-Datei lieber auf deinem eigenen Webspace speichern willst:
Kopiere die URL(...) aus srchttps://fonts.gstatic.com/l/font?kit=WnznHAc5bAfYB2QRah7pcpNvOx-pjRV6SIejYBxOgguVptYBI7t-_lZHkLh96CPyDSbTMdeF&skey=7833cd5b856b60c9&v=v23Öffne diese URL im Browser → Rechtsklick → Speichern unter … (z.B. als Caveat-Bold-Subset.woff2 im Projektordner fonts/.) - Das CSS wie immer:
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; src: url('fonts/Caveat-Bold-Subset.woff2') format('woff2'); } - Damit der Webfont ohne Wartezeit angezeigt wird, optional den Font preloaden. Dazu in den <head>-Bereich:
<link rel="preload" href="/fonts/Caveat-Bold-Subset.woff2" as="font" type="font/woff2" crossorigin>
Das Ergebnis:
Ladezeit optimieren mit Webfont-Subset
Größe der Subset-Font-Datei: 12 kB statt 108 kB für die komplette Font-Datei
Copyright-Hinweis
Artikeltexte und Code-Snippets: Creative Commons
CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.