Schrift / Fonts für SVG

Ladbare Fonts für SVG

Wenn SVG nicht sicherheitshalber auf verläßlichen Systemschriften beschränkt wird, lädt die CSS font-face-Regel die Schrift genauso wie in HTML-Seiten. Dabei ist es egal, ob lokale Fonts oder Webfonts eingesetzt werden. Allerdings kann die Grafik dann nicht mit dem img-Tag eingebunden werden, denn aus Sicherheitsgründen verarbeiten die Browser keine Ressourcen aus externen Dateien in SVG-Grafiken.

@font-face {
   font-family: 'Amadeus';
   src: url(Amadeus.woff);
   }
h2, text {font-family: 'Amadeus'}

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.

<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.

<style>
@font-face {
    font-family: 'black_roseregular';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAA70AA8AAAAAGF …) format('woff2'),
    font-weight: normal;
    font-style: normal;
}
</style>

<clipPath id="blackroses">
	 <text font-size="116" 
		   font-family="black_roseregular">
	 <tspan x="7" y="150">Black Roses</tspan>
	 </text>
</clipPath>

<image clip-path="url(#blackroses)" width="600" height="200" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhp … /Z "/>

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.

<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>