Font per base64 in CSS einbetten

Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren.

Dabei entsteht ein Schwall aus Zeichen, der direkt in die CSS-Datei eingebettet wird. Bei Fonts mit wenigen Zeichen spart das Einbetten ins CSS den HTTP-Request zur Schriftdatei.

Manchmal sind es nur ein paar Zeichen einer Schrift, die für ein Logo oder eine grafische Untermalung nötig sind. Dafür gleich einen ganzen Webfont mit seiner Ladezeit in die Seite laden? Jetzt nicht gleich wieder zum PNG oder GIF greifen.

Das Verfahren, Bilder als Base64-codierte Zeichenfolge direkt in den HTML-Quelltext zu setzen, ist schon lange bekannt. Base64 wurde ursprünglich zur Übertragung von Binärdaten in Anwendungen entwickelt, die nur Text übertragen und nicht sauber mit 8 bit-Zeichen umgehen können. Binärdaten wie Bilder werden durch Buchstaben und Ziffern codiert und ab geht die Post.

Base64 wandelt nicht nur Bilder, sondern auch auch Webfonts in Zeichenketten um. Die Zeichenkette wird direkt in die @font-face-Regel gesetzt.

Fonts Base64 encoded

Der WEBFONT GENERATOR von Font Squirrel codiert einen Font direkt in Base64. Wenn der Font geladen ist, gleich oben die Option »Expert« wählen, eine Strecke nach unten scrollen und bei CSS Base64 Encode aktivieren.

Fonts mit Base64 in CSS-Datei einbetten

Für einen kleinen Umfang an Zeichen ist ein eingebetteter Font besonders interessant. Bei »CSS:« noch Custom setting aktivieren und die Zeichen eingeben.

Das reduziert die Größe des Fonts in diesem Beispiel von 74 KB auf 6 KB.

Fonts auf weniger Zeichen reduzieren

In der CSS-Datei stylesheet.css liegt die font-face-Regel

@font-face {
    font-family: 'Pacifico';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGy …) format('woff');
    font-weight: normal;
    font-style: normal;
}

Kopieren, in die eigene CSS-Datei setzen und wieder mal einen HTTP-Request gespart. Im Selektor bestimmt CSS font-family die Schrift nicht anders, als wäre der Webfont per Link eingebunden:

.logo { font-family: 'Pacifico', cursive}
Pacifico

Google Webfonts bieten dafür den Zusatz &text=meinText im Link-Tag. Dieser Zusatz kann die Größe des geladenen Fonts drastisch reduzieren. Das macht sich besonders bei mobilen Geräten bemerkbar.

<link
  href='http://fonts.googleapis.com/css?family=Squada One&text=©Wisotop'
  rel='stylesheet' type='text/css'>
© Wisotop
Lyzeum
<div style="font-family:'Squada One',cursive">© Wisotop</div>
<div style="font-family:'Squada One',cursive">Lyzeum</div>

Netter Beweis für die Kürzung des Fonts auf eine Handvoll Zeichen: Copyright-Zeichen und »Wisotop« erscheinen eckig in ‚Squada One‘, das Lyzeum kommt in ‚cursive‘.

Auf Streamline your web font requests. Introducing “text=” beschreibt Google auch kurz, wie ein URL-encodiertes Zeichen (z.B. %5Cu262f für ein Yin Yang) in den reduzierten Text gesetzt wird.

Fonts in SVG

Wenn SVG in einem img-Tag eingebunden ist, bringt der Base64-encodierte String auch Webfonts in die SVG-Grafik.

Über die Font Face-Regel kommt der Webfont auch in die SVG-Datei, wenn Webfonts und Schriften in img-Tags vom Typ .svg gebraucht werden.

Das funktioniert genauso wie bei HTML und CSS.

<text … font-family="'Amadeus',cursive">Je schneller du dich bewegst,</text>

und auch mit einem style-Tag

@font-face {
    font-family: 'Amadeus';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAGy …) format('woff');
    font-weight: normal;
    font-style: normal;
}
text {font-family: 'Amadeus',cursive}

Inkscape bettet externe Schriften nicht ein. Da bleibt nur, die SVG-Datei mit einem Texteditor zu öffnen und die Font-Anweisungen per Hand einzufügen. Wenn die SVG-Datei anschließend wieder mit Inkscape geöffnet wird, löscht Inkscape die Webfont-Anweisungen aus dem style-Tag.

e2

Base64

Base64 wurde ursprünglich zur Übertragung von Binärdaten in Anwendungen entwickelt, die ansonsten nur Text übertragen und nicht sauber mit 8 Bit Zeichen umgehen können. Populärstes Beispiel ist Email.

Das Base64 Encoding-Verfahren nimmt drei Bytes, die jeweils aus 8 Bits bestehen und stellt sie als vier Zeichen aus einem begrenzten ASCII-Zeichenvorrat dar.

Jedes Zeichen des ASCII-Standards besteht aus sieben Bits, Base64 benutzt aber nur 6 Bits, damit die Daten druckbar und lesbar bleiben. So entstehen 64 unterschiedlichen Zeichen – 10 Zahlen, 26 Kleinbuchstaben, 26 Großbuchstaben sowie das + und ein /. Das Binärsystem nutzt 2 Zeichen, das Hexadezimalsystem 16 Zeichen. Base64 benutzt 64 Zeichen.

Als Daumenregel müssen wir davon ausgehen, dass die Datenmenge bei Base64-Kodierung um rund 30% wächst. Das Verfahren lohnt sich also eher bei kleinen Dateien, bei denen der Overhead des zusätzlichen HTTP-Requests größer ist als die Datei. Oder eben bei SVG-Grafiken in einem img-Tag, um Webfonts in SVG-Grafiken einzubetten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

5 Gedanken zu „Font per base64 in CSS einbetten“

  1. Gerd – 15. Juli 2016

    base64 in HTML und CSS ist sicher, denn es beutzt nur die 64 Zeichen, die als sicher bekannt sind. Bei PNG z.B. ist das nicht der Fall.
    Immer auf der Suche nach Gefahren und Nebenwirkungen …

  2. NoHarmony – 13. November 2014

    Hab ich mal ausprobiert und hat auf Anhieb funktioniert. Schön wenn man nur ein paar Buchstaben braucht: Nicht noch ein Link.
    Norbert

  3. NoHarmony – 13. November 2014

    Base64 ist ein Quasi-Standard für die Datenübertragung. Lieber Wilobie, du musst beim Hinblick auf die Gefahren sonst auch die Finger von Internet lassen. PHP ist gefährlich, denn damit kann ich Injections programmieren, vor Javascript ist eine ganze Generation zurückgeschreckt.
    Selbst Bleistifte sind gefährlich 🙁

  4. Willobie – 24. Oktober 2014

    Base 64 wird auch für Viren und Trojaner benutzt. Besser Finger von lassen und Artikel schnell rausnehmen!

    • Haessler – 24. Oktober 2014

      #Willobi: In gewisser Weise hast du recht: Base64 codierte Authentifizierung ist gefährlich, denn ich kann ein Passwort in Base64 ohne jegliche Hilfsmittel genauso lesen wie Binärdaten oder einen Hexcode, wenn man mir einen Bleistift und ein Stück Papier erlaubt.
      Base64-encodierte Angriffe sind schwer zu entdecken, weil Base64 einem normalen Text so ähnlich sieht. An einem regulären Ausdruck, der Base64-Schadcode exakt erkennen soll, kann man sich die Zähne ausbeißen. Es ist also einfacher, einen Base64-Schutz zu auszuhebeln, als einen Base64-Angriff erfolgreich zu verstecken. Das macht Base64 tatsächlich gefährlich.
      Tatsache ist aber auch, dass die Codierung von Bildern eine gängige Praxis ist – Scripte und HTML-Seiten binden Bilder oder wie hier Webfonts ein, um Abhängigkeiten zu vermeiden; Email verwendet Base64 für Anhänge.