CSS, HTML und Javascript mit {stil}

Webfonts für SVG

Webfonts in SVG

SVG kann Webfonts genauso interpretieren wie lokale Fonts. Es gibt zwar Webfonts auch im SVG-Format, aber Fonts im WOFF-Format haben den Vorteil, dass keine lange Schriftliste mit alternativen Fonts angeboten werden muss.

Als SVG als Grafik für das Web entwickelt und definiert wurde, gab es noch keine Spur von Webfonts. Stattdessen konnte SVG Informationen über Glyphen (das grafische Zeichen für einen Buchstaben, eine Ziffer oder ein Symbol) verarbeiten.

Als SVG in HTML5 endlich den Weg in das HTML-Dokument fand, hatten die Browser bereits WOFF als Schriftformat für Webfonts an Bord. Wir bekommen zwar in den Webfont-Kits hier und da noch SVG-Fonts angeboten oder können SVG-Fonts mit dem Webfont-Generator von Fontsquirrel erzeugen, aber SVG-Fonts sind im Grunde genommen überflüssig, seitdem SVG WOFF-Fonts interpretiert.

Fonts in inline-SVG

Wenn SVG direkt als svg-Tag in die HTML-Seite eingebettet ist, gehorcht SVG den CSS-Regeln der Webseite. Dabei ist es egal, ob lokale Fonts oder Webfonts eingesetzt werden.

CSS der Webseite
@font-face {
   font-family: 'Amadeus';
   src: url(Amadeus.woff);
   }
h2, text {font-family: 'Amadeus'}
Je schneller du dich bewegst, desto schwerer wirst du. Gott sei Dank ist das nicht andersrum. E = m × c 2

SVG als img-Tag und Webfonts

Wird die SVG-Grafik über ein img-Tag eingebunden, bekommt sie von den CSS-Regeln der Webseite nichts mit. Auch ein eigenes style-Tag zeigt auf der Webseite keine Wirkung.

CSS in der SVG-Datei
<style type="text/css">
@font-face {
    font-family: 'uglyqua';
    src:  url('uglyqua-webfont.woff#uglyqua') format('woff'),
         url('uglyqua-webfont.svg#uglyqua') format('svg');
}
</style>

Wenn ein spezieller Font in der SVG-Grafik zuverlässig eingesetzt werden soll, dann hilft erst ein Font, der als Base64 in die SVG-Datei eingebunden wird.

SVG via iframe / object und Webfonts

Besser funktionieren Webfonts, wenn die SVG-Grafik über iframe oder ein HTML object Tag eingebunden ist. Dabei zeigt die Grafik Text in Webfonts, wenn die Webfonts direkt in der SVG-Datei definiert sind.

CSS in der SVG-Datei
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     … >
<style type="text/css">
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), 
       local('Kalam-Regular'), 
       url(https://fonts.gstatic.com/s/kalam/v7/6wE4KkDTwLxfsX94FmTAW6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
tspan { font-family:'Kalam', cursive; fill:hsl(356,30%,20%) }
</style>
    <g … >
</svg>