Schrift / Fonts für SVG

Jan 2024

SVG geht mit Schriften oder Fonts genauso um wie HTML/CSS: Die Schrift muss auf dem Gerät des Betrachters vorliegen. Schriften können nicht ohne weiteres wie Bilder Bilder eingebettet werden. Schriften lassen sich zwar von einer externen Schriftdatei laden, aber nur, wenn die Grafik inline im HTML sitzt.

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.

CSS der Webseite

@font-face {
   font-family: 'Amadeus';
   src: url(Amadeus.woff);
   }
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.

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.

Font als Base64 in externem SVG eingebettet — *Eingebettet als Base64 – dann zeigt sich der Font auch bei einem externen SVG*

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

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>