Schriften: Fonts für SVG

Ladbare Fonts für SVG

Als SVG als Grafik für das Web entwickelt und definiert wurde, gab es noch keine Spur von ladbaren Schriften für Webseiten – 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 überflüssig und veraltet, 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'}

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>