Schrift in Base64

So wandeln Sie eine Schrift in Base64 um

1. Legen Sie eine .woff2-, .woff-, .ttf- oder .otf-Datei auf dem Feld ab oder wählen Sie sie über die Dateiauswahl.
2. Ausgabe als steht bereits auf CSS @font-face. Wählen Sie Data-URI oder Reines Base64, wenn Sie die Regel selbst schreiben.
3. Ausgabe kopieren und in Ihr Stylesheet einfügen.

Für eine Datei namens Inter-Bold.woff2 sieht das Ergebnis so aus, mit gekürzten Daten:

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

Der Name in font-family stammt aus dem Dateinamen: Die Endung wird entfernt, und alle Zeichen außer Buchstaben, Ziffern, Leerzeichen, - und _ werden durch Leerzeichen ersetzt. Benennen Sie ihn in den Familiennamen um, den Ihr CSS verwendet, und ergänzen Sie font-weight und font-style, wenn Sie mehrere Schnitte einer Familie einbetten.

format()-Hinweise und MIME-Typen

Mit dem format()-Hinweis kann ein Browser Quellen überspringen, die er nicht nutzen kann, ohne sie herunterzuladen. Bei einer einzigen eingebetteten Quelle ist das weniger wichtig, doch einen Hinweis, den der Browser nicht kennt, überspringt er trotzdem. Das Tool leitet den Hinweis aus dem MIME-Typ ab, den der Browser meldet, und manche Systeme melden Schriften mit ungewöhnlichen Typen. Erscheint bei einer OTF format("truetype"), ändern Sie es in opentype.

Ein WOFF2 mit einer TrueType-Schrift darin beginnt mit d09GMgABAAA, eines mit CFF-Konturen mit d09GMk9UVE8.

Eingebettete Schriften klein halten

Das Base64 ist ein Drittel größer als die Schriftdatei und steckt in renderblockierendem CSS. Ein Test mit einer Icon-Schrift von 77.160 Bytes in WOFF2 ergab 102.880 Zeichen Base64, die alle geladen sein müssen, bevor irgendetwas auf der Seite gezeichnet wird.

Damit sich das Einbetten lohnt:

• Verwenden Sie WOFF2. Für dieselbe Schrift ist es viel kleiner als TTF oder OTF.
• Bilden Sie ein Subset. Entfernen Sie die Glyphen, die Sie nicht brauchen, etwa alle Schriftsysteme außer Latein; das kann eine große Schrift um den größten Teil ihrer Größe schrumpfen lassen. Subsetting-Tools erledigen das auf der Kommandozeile.
• Betten Sie nur einen Schnitt ein. Eine Überschriftenschrift oder eine Icon-Schrift, die im sichtbaren Bereich ohne Scrollen genutzt wird, ist ein guter Kandidat. Fließtext in vier Stärken ist als separate Dateien besser aufgehoben, die der Browser cachen kann.

Typische Fälle, in denen eine eingebettete Schrift die richtige Wahl ist, sind in sich geschlossene HTML-Dokumente sowie Canvas- oder SVG-Exporte, die ihre eigene Schrift mitbringen müssen.

Eine Base64-Schrift prüfen

Fällt der Text auf eine Standardschrift zurück, öffnen Sie die Entwicklertools des Browsers und suchen Sie nach Fehlern beim Laden von Schriften. Prüfen Sie dann, ob die Data-URI mit data:font/ beginnt und die Nutzdaten mit einem der Präfixe oben. Eine Datei, die mit PCFET0NUWVBF beginnt, ist eine HTML-Seite, die mit einer Schrift-Endung gespeichert wurde. Base64 in Schrift dekodiert eine Zeichenkette, zeigt die Glyphen in der Vorschau und speichert die Datei.

Häufige Fragen