Font per base64 in CSS einbetten

Font als Zeichenkette

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.

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.

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}

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.

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.

Externe Quellen

• Für alle diejenigen, die Webfonts lieber selber hosten: google-webfonts-helper